[前端自學轉職攻略] 21. 怎麼練習 API 串接？

推薦 OpenAI API

API 串接是前端工程師的工作中，相當重要的一環，最好能在 side project 中練習。如果不想投入時間學習後端自行開發 API，網路上也有許多現成的 API 可用。

OpenAI

OpenAI 是開發 ChatGPT 的公司，其提供的 API 使用 AI 模型，套用不同的 prompt 就能實作出不同功能，彈性非常大。

OpenAI 的 API 是依使用量付費，費用不算高，不過仍須留意使用情況，特別是打算將 side project 部署至網路上的話。

Google

https://console.cloud.google.com/apis/library

Google 的許多服務都有提供 API，例如 YouTube、Google Maps、Google Drive 等。這些 API 通常是免費但限制使用額度。額度對於多數 side project 應該足夠。如果 side project 中有適合使用 Google 服務的地方，也可以試試看。

其他資源

也有一些網站彙整了各種類型的 API，例如：

• https://rapidapi.com/
• https://apilist.fun/
• https://github.com/toddmotto/public-apis

串接方式

前端常見的 API 串接方式有以下兩種作法：

• JavaScript 原生的 fetch
• 第三方套件 axios

或是一些進階的套件，直接將 API 串接與狀態管理做整合，如 react-query。

另外，有些服務也提供自己開發的套件，如 openAI：

import OpenAI from "openai";
const openai = new OpenAI();
const completion = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: [
        {"role": "user", "content": "write a haiku about ai"}
    ]
});

由於 API 是前端工作相當重要的一環，以上幾種不同做法，建議都可以嘗試看看，多累積不同經驗。