前言

在現(xiàn)代的 Web 開發(fā)中，與服務(wù)器進(jìn)行數(shù)據(jù)交互是一項(xiàng)常見且重要的任務(wù)。JavaScript 提供了多種方式來實(shí)現(xiàn)這一功能，其中 fetch 方法是一個強(qiáng)大且靈活的工具。本文將詳細(xì)介紹 fetch 方法的各個方面，幫助你更好地理解和使用它。

什么是 fetch 方法

fetch 是 JavaScript 中用于發(fā)起網(wǎng)絡(luò)請求的現(xiàn)代 API，它提供了一種更簡潔、更強(qiáng)大的方式來處理網(wǎng)絡(luò)通信。fetch 方法返回一個 Promise 對象，該 Promise 會在請求完成時被解決（resolved），并返回一個 Response 對象，開發(fā)者可以通過這個對象來獲取服務(wù)器的響應(yīng)數(shù)據(jù)。

基本語法

fetch 方法的基本語法如下：

fetch(url, options)
  .then(response => {
    // 處理響應(yīng)
  })
  .catch(error => {
    // 處理錯誤
  });

• url：必選參數(shù)，表示要請求的資源的 URL。
• options：可選參數(shù)，是一個包含請求配置信息的對象，例如請求方法（GET、POST 等）、請求頭、請求體等。

簡單的 GET 請求示例

以下是一個使用 fetch 方法發(fā)送簡單 GET 請求的示例，用于從服務(wù)器獲取 JSON 數(shù)據(jù)：

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    // 檢查響應(yīng)狀態(tài)是否為 200 - 299
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 將響應(yīng)數(shù)據(jù)解析為 JSON 格式
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

代碼解釋

• 首先調(diào)用 fetch 方法發(fā)起一個 GET 請求到指定的 URL。
• then 方法中的回調(diào)函數(shù)接收一個 Response 對象，通過檢查 response.ok 屬性來判斷請求是否成功。如果不成功，拋出一個錯誤。
• 接著使用 response.json() 方法將響應(yīng)數(shù)據(jù)解析為 JSON 格式，該方法返回一個新的 Promise。
• 第二個 then 方法中的回調(diào)函數(shù)接收解析后的 JSON 數(shù)據(jù)并打印到控制臺。
• 如果請求過程中出現(xiàn)錯誤，會被 catch 方法捕獲并打印錯誤信息。

發(fā)送 POST 請求示例

下面是一個使用 fetch 方法發(fā)送 POST 請求的示例，用于向服務(wù)器發(fā)送 JSON 數(shù)據(jù)：

const data = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

代碼解釋

• 定義了一個包含要發(fā)送數(shù)據(jù)的對象 data。
• 在 fetch 方法的第二個參數(shù) options 中指定請求方法為 POST，設(shè)置請求頭 Content-Type 為 application/json，并使用 JSON.stringify 方法將數(shù)據(jù)對象轉(zhuǎn)換為 JSON 字符串作為請求體。
• 后續(xù)處理與 GET 請求類似，檢查響應(yīng)狀態(tài)、解析響應(yīng)數(shù)據(jù)并處理可能的錯誤。

Response 對象的常用方法

Response 對象提供了多種方法來處理響應(yīng)數(shù)據(jù)，以下是一些常用的方法：

• response.json()：將響應(yīng)數(shù)據(jù)解析為 JSON 格式。
• response.text()：將響應(yīng)數(shù)據(jù)解析為文本格式。
• response.blob()：將響應(yīng)數(shù)據(jù)解析為二進(jìn)制大對象（Blob）格式，常用于處理圖片、音頻等二進(jìn)制數(shù)據(jù)。
• response.arrayBuffer()：將響應(yīng)數(shù)據(jù)解析為 ArrayBuffer 格式，用于處理二進(jìn)制數(shù)據(jù)。

例如，使用 response.text() 方法獲取文本響應(yīng)：

fetch('https://example.com/text.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  .catch(error => console.error('Fetch error:', error));

注意事項(xiàng)

瀏覽器兼容性

雖然 fetch 是現(xiàn)代 API，但在一些舊版本的瀏覽器中可能不被支持。可以使用 whatwg-fetch 等 polyfill 來解決兼容性問題。

CORS（跨域資源共享）

如果請求的資源位于不同的域名下，需要服務(wù)器端正確配置 CORS 頭，否則請求會被瀏覽器阻止。

錯誤處理

fetch 方法只有在網(wǎng)絡(luò)錯誤（如無法連接到服務(wù)器）時才會拒絕 Promise，對于 HTTP 錯誤（如 404、500 等），Promise 仍然會被解決，需要手動檢查 response.ok 屬性來處理 HTTP 錯誤。

附：取消fetch請求

• fetch()請求發(fā)送后，如果中途想要取消，需要使用AbortController對象

//創(chuàng)建一個AbortController實(shí)例
let controller = new AbortController();

fetch(url, {
  signal: controller.signal
});
//給controller.signal綁定監(jiān)聽事件，controller.signal的值改變則會觸發(fā)abort事件
controller.signal.addEventListener('abort',
  () => console.log('abort!')
);
// controller.abort()方法用于發(fā)出取消信號。這時會觸發(fā)abort事件，這個事件可以監(jiān)聽

controller.abort(); // 取消

// 可以通過controller.signal.aborted屬性判斷取消信號是否已經(jīng)發(fā)出
console.log(controller.signal.aborted); // true

實(shí)例：

//創(chuàng)建實(shí)例
let controller = new AbortController();
//設(shè)置定時器
setTimeout(() => controller.abort(), 1000);

try {
  let response = await fetch('路徑', {
    signal: controller.signal
  });
} catch(err) {
  if (err.name == 'AbortError') {
    console.log('Aborted!');
  } else {
    throw err;
  }
}

總結(jié)

fetch 方法為 JavaScript 開發(fā)者提供了一種強(qiáng)大且靈活的方式來處理網(wǎng)絡(luò)請求。通過使用 fetch，可以方便地發(fā)送 GET、POST 等各種類型的請求，并處理服務(wù)器的響應(yīng)數(shù)據(jù)。在使用過程中，需要注意瀏覽器兼容性、CORS 問題和錯誤處理等方面，以確保應(yīng)用的穩(wěn)定性和可靠性。希望本文能幫助你更好地掌握 fetch 方法的使用。

到此這篇關(guān)于JavaScript中fetch方法的文章就介紹到這了,更多相關(guān)JS中fetch方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論