jQuery 與 fetch 的非同步請求方法介紹

更新日期： 2024 年 11 月 6 日

在網頁開發中，向伺服器發送非同步請求，來獲取資料是常見操作。

jQuery 提供了多種簡化 AJAX 請求的方法，如 $.ajax 和 .done()，而現代 JavaScript 則推出了 fetch 函數來進行非同步請求。

本文將介紹 jQuery 中的 AJAX 方法、.done() 方法的使用方式及其特性，並探討 $.ajax.done 與 fetch 的異同。

jQuery 的 $.ajax 方法

$.ajax 是 jQuery 提供的核心 AJAX 方法，用於進行 HTTP 請求。

該方法支持多種配置選項，可以用於 GET、POST 及其他 HTTP 方法的請求。

以下是 $.ajax 方法的常用參數以及預設值說明。

$.ajax 的基本語法

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',  // 預設為 'GET'
    dataType: 'json', // 預設為 'text'
    data: { param1: 'value1', param2: 'value2' }, // 傳遞給伺服器的數據
    success: function(response) {
        console.log(response); // 成功回應的資料
    },
    error: function(error) {
        console.error('請求失敗：', error); // 請求失敗的錯誤訊息
    }
});

$.ajax 參數說明及預設值

• url：請求的伺服器網址，這是唯一必填的參數。
• method：HTTP 方法，預設為 'GET'。可選擇如 POST、PUT 等其他方法。
• dataType：定義伺服器回應資料的格式，預設為 'text'。常用值如 'json'、'xml' 等，設定為 'json' 時，會自動將回應轉換為 JavaScript 物件。
• data：傳遞給伺服器的數據內容，通常為物件格式。
• success：定義請求成功時執行的回呼函數，response 是伺服器的回應資料。
• error：定義請求失敗時執行的回呼函數，接收錯誤訊息物件作為參數。

jQuery 的 .get 與 .post 方法

在 jQuery 中，$.get 和 $.post 是針對 GET 和 POST 請求的快捷方法。

這兩個方法是 $.ajax 的簡化版本，但僅支援單一的 HTTP 方法。

.get 方法

$.get('https://api.example.com/data', { param1: 'value1' }, function(response) {
    console.log(response); // 成功回應的資料
});

.post 方法

$.post('https://api.example.com/data', { param1: 'value1' }, function(response) {
    console.log(response); // 成功回應的資料
});

在這兩個方法中：

• 第一個參數是請求的 url。
• 第二個參數是傳遞的數據。
• 第三個參數是請求成功後的回應處理函數，response 是伺服器回應的資料。

.done() 方法與 $.ajax 搭配使用

什麼是 .done() 方法？

.done() 是 jQuery 的 Deferred 方法，用於處理非同步操作（如 AJAX 請求）成功時的回應。

Deferred 是 jQuery 中的延遲物件（Deferred Object），用於管理和處理多個非同步操作的回應狀態。

當 .done() 與 $.ajax 搭配使用時，能以鏈式結構處理多層非同步請求，比單獨使用 success 回呼函數更清晰易讀。

.done() 方法的參數

.done() 可以接收一個或多個回應處理函數，並自動解析伺服器回應為 JSON 格式。

此方法的主要參數如下：

• data：伺服器回應的資料。當 dataType 設為 json 時，data 是解析後的 JSON 物件，不再是 Promise。
• textStatus：回應的狀態描述，例如 'success'。
• jqXHR：封裝 AJAX 請求的 jQuery 物件，包含完整的請求資訊和狀態。

.done() 的基本使用

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    dataType: 'json'
}).done(function(data, textStatus, jqXHR) {
    console.log('請求成功，回應資料：', data); // 解析後的 JSON 資料
}).fail(function(error) {
    console.error('請求失敗：', error); // 處理錯誤
});

.done() 的應用場景

當需要鏈式操作時，.done() 方法比 success 回呼函數更具可讀性，且更方便組合多重異步操作。

例如，下例中在第一次請求後發送第二次請求：

$.ajax({ url: 'https://api.example.com/data', method: 'GET' })
    .done(function(data) {
        console.log('第一次回應資料：', data);
        return $.ajax({ url: 'https://api.example.com/nextData', method: 'GET' });
    })
    .done(function(nextData) {
        console.log('第二次回應資料：', nextData);
    })
    .fail(function(error) {
        console.error('請求失敗：', error);
    });

這樣的操作方式更直觀且易於維護。

比較 $.ajax.done 與 fetch

JavaScript 的 fetch 是另一種非同步請求方法，返回一個 Promise 物件，並且不依賴 jQuery。

相比 $.ajax，fetch 支援更現代的 Promise 語法及 async/await，使代碼更加精簡易讀。

以下是 $.ajax.done 和 fetch 的代碼示例及差異比較。

$.ajax.done 代碼範例

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    dataType: 'json'
})
.done(function(data) {
    console.log('jQuery 回應資料：', data);
})
.fail(function(error) {
    console.error('jQuery 請求失敗：', error);
});

fetch 代碼範例

fetch('https://api.example.com/data')
    .then(response => response.json()) // 將回應轉為 JSON 格式
    .then(data => {
        console.log('fetch 回應資料：', data);
    })
    .catch(error => {
        console.error('fetch 請求錯誤：', error);
    });

差異比較

總結

• $.ajax.done：適合 jQuery 開發者，且 dataType: 'json' 時，回傳資料已自動解析為 JSON，程式碼更簡潔。
  
  可以直接使用 .done()、.fail() 等鏈式方法，方便處理多重非同步請求，適合以 jQuery 為基礎的專案。
• fetch：不依賴 jQuery，支援原生 Promise 語法，特別適合現代 JavaScript 專案，並支援 async/await，可簡化代碼結構。
  
  不過，回應資料需要手動調用 response.json() 來解析。

綜上，fetch 提供了更現代化的語法和靈活性，而 $.ajax 更適合已經依賴 jQuery 的專案。

根據專案需求選擇合適的方法可以提升開發效率並保持代碼一致性。