使用Axios與Fetch API發送請求

如何使用Axios和Fetch API發送HTTP請求，這是與伺服器互動、取得外部資料的重要技能。無論是從伺服器抓取資料，還是提交表單數據，理解這些請求的操作方式都至關重要。

Fetch API
Fetch API是瀏覽器內建的一個用來發送HTTP請求的功能，它基於Promise，允許我們使用.then()和.catch()來處理請求的成功或失敗。

這是使用fetch()發送GET請求的一個基本範例：

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('網路回應錯誤');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);  // 顯示取得的資料
    })
    .catch(error => {
        console.error('出現錯誤:', error);  // 錯誤處理
    });

首先使用 fetch() 發送請求，接著使用 .then() 處理伺服器的回應並將其轉換為 JSON 格式。最後，用 .catch() 來處理任何可能發生的錯誤。

Axios
相比於Fetch API，Axios是一個第三方的 JavaScript 函式庫，提供了更簡潔的語法和更強大的功能，比如自動處理JSON回應和錯誤。Axios也是基於Promise，這使得它的用法和Fetch API類似，但它在處理一些細節時更加便捷。

以下是使用Axios發送相同的GET請求範例：

axios.get('https://api.example.com/data')
    .then(response => {
        console.log(response.data);  // 顯示取得的資料
    })
    .catch(error => {
        console.error('出現錯誤:', error);  // 錯誤處理
    });

在這裡，我們不用像Fetch那樣手動處理回應的狀態碼，Axios會自動為我們檢查錯誤並將回應轉換成 JSON格式，這使得程式碼更加簡潔。

Axios和Fetch API的比較
Fetch API是內建於瀏覽器中的，無需額外安裝，因此輕量且現代。
Axios則是提供了更豐富的功能，如支援取消請求、設置請求超時、拦截器等，適合處理更複雜的請求場景。