阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 03月20日

JavaScript 和 React 中的 API 處理：從基礎到專業級

學習使用 fetch、axios 和錯誤處理進行 JavaScript API 操作。API 操作是指對伺服器進行 HTTP 請求，以獲取或發送數據。

你好，我的前端開發夥伴們，今天我將討論 JavaScript 中一個最重要的概念：API 操作。

我首先會在 Scribbler.live 創建我的代碼片段，這是一個很棒的平台，讓你可以運行 JavaScript 筆記本、在線編譯器和編輯器，而無需手動設置。
此外，我還包括了一個連結到代碼片段，其中包含所有的代碼範例，以便你可以打開該片段並自己運行，以查看結果。
我將使用 scrib.show 來顯示結果，這相當於 console.log。
目前只會將 fetch API 的範例添加到 Scribbler，因為它不支援 axios 和 react。

讓我們深入了解

什麼是 API
什麼是 API 操作
HTTP 方法
在 JavaScript 中進行 API 請求
結論

什麼是 API？

API 是一組定義和協議，能夠使兩個軟體組件進行通信。
一些用於編寫 API 的技術包括：
- JavaScript (Express 框架)
- Python (Django 框架)
- Go (Gin 框架)
- Java (Spring Boot 框架)
- C# (ASP.NET Core 框架)

什麼是 API 操作？

API 操作是指對伺服器進行 HTTP 請求，以獲取或發送數據。在 JavaScript 和 React 中，API 請求通常使用 fetch、Axios 或類似 React Query 或 TanStack Query 的庫來處理。

HTTP 方法

API 使用不同的 HTTP 方法，每種方法有其特定的用途：

GET – 從伺服器獲取數據。
POST – 向伺服器發送新數據。
PUT – 更新現有數據（替換整個資源）。
PATCH – 更新現有資源的一部分。
DELETE – 從伺服器刪除數據。

在 JavaScript 中進行 API 請求

Fetch 方法

原生 fetch API 方法通常用於與 API 進行交互。它接受 2 個參數 - API 端點和選項對象，用於傳遞標頭、主體、方法等。

以 GET 請求使用 Fetch 方法

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => scrib.show(data))
  .catch(error => scrib.show('錯誤:', error));

以 POST 請求使用 Fetch 方法

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST', // 方法類型 GET, POST, PUT, DELETE
  headers: {
    'Content-Type': 'application/json' // 標頭類型，如來源、Bearer、內容類型、自定義標頭等。
  },
  // 要傳送到 API 的 POST 請求主體
  body: JSON.stringify({
    title: 'JavaScript 是偉大的',
    body: '你知道你可以在 Scribbler 中寫 HTML 和 JavaScript 組合嗎',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => scrib.show(data))
  .catch(error => scrib.show('錯誤:', error));

使用 fetch 方法的錯誤處理

fetch('https://jsonplaceho.typicode.com/posts') // 錯誤的 API 端點
  .then(response => response.json())
  .then(data => scrib.show(data))
  .catch(error => scrib.show('錯誤:', error)); // 將運行這段代碼並拋出錯誤

使用 try catch finally 區塊處理 API

async function getData() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) throw new Error('網絡響應不是正常狀態'); // 返回有效/無效響應的布林值
    let data = await response.json();
    scrib.show(data)
  } catch (error) {
    scrib.show('獲取錯誤:', error); // 如果 fetch 失敗，將處理錯誤
  } finally {
    scrib.show('Fetch 請求已完成'); // 無論響應是否有效或 fetch 是否失敗，這段代碼將運行
  }
}
getData()

查看這個嵌入以運行上面提到的代碼範例
https://app.scribbler.live/?jsnb=github:ShubhamTiwari909/api-handling-scribbler/fetch-method&hide-menu=true&hide-code=false

Axios

Axios 是一個 JavaScript 庫，它簡化了 API 操作並提供了更好的錯誤處理。

以 GET 請求使用 Axios

import axios from "axios"

// 所有 HTTP 方法都可以與 axios 連鎖使用
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => scrib.show(response.data))
  .catch(error => scrib.show('錯誤:', error));

以 POST 請求使用 Axios

import axios from "axios"

// JSON 主體作為第二個參數單獨傳遞，其他選項作為第三個參數
axios.post('https://jsonplaceholder.typicode.com/posts', {
   title: 'JavaScript 是偉大的',
    body: '你知道你可以在 Scribbler 中寫 HTML 和 JavaScript 組合嗎',
    userId: 1
}, {
  headers: { 'Content-Type': 'application/json' }
})
  .then(response => scrib.show(response.data)) // 自動將響應轉換為 JSON 格式
  .catch(error => scrib.show('錯誤:', error));

使用 Axios 的錯誤處理

import axios from "axios"

axios.get('https://jsonpl.typicode.com/posts') // 錯誤的網址
  .then(response => scrib.show(response.data))
  .catch(error => {
    // 對於不同情況有多種錯誤響應
    if (error.response) {
      scrib.show('伺服器響應狀態為:', error.response.status);
    } else if (error.request) {
      scrib.show('未收到響應');
    } else {
      scrib.show('設置請求錯誤:', error.message);
    }
  });

使用 try catch finally 區塊處理 API

import axios from "axios";

const fetchData = async () => {
  try {
    const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
    console.log("數據成功獲取:", response.data);
    return response.data;
  } catch (error) {
    console.error("獲取數據時出現錯誤:", error.response?.data || error.message);
    return null;
  } finally {
    console.log("獲取已完成")
  }
};

fetchData();

React (使用 useEffect 和 useState)

import { useEffect, useState } from 'react';

function Posts() {
  // 為數據和錯誤消息創建狀態
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(null);

  // 在 useEffect 中執行數據獲取，僅在頁面加載時執行一次
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        if (!response.ok) {
          throw new Error('獲取失敗');
        }
        return response.json();
      })
      .then(data => setPosts(data))
      .catch(error => setError(error.message));
  }, []);

  if (error) return <p>錯誤: {error}</p>;

  return (
    <div>
      <h2>文章</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Posts;

Tanstack 查詢庫

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

// 獲取數據並返回
const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

function Posts() {
  // tanstack 內建數據、錯誤、加載狀態
  const { data: posts, error, isLoading } = useQuery({ queryKey: ['posts'], queryFn: fetchPosts });

  if (isLoading) return <p>加載中...</p>;
  if (error) return <p>錯誤: {error.message}</p>;

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default Posts;