前言

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

什么是 fetch 方法

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

基本語(yǔ)法

fetch 方法的基本語(yǔ)法如下：

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

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

簡(jiǎn)單的 GET 請(qǐng)求示例

以下是一個(gè)使用 fetch 方法發(fā)送簡(jiǎn)單 GET 請(qǐng)求的示例，用于從服務(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ā)起一個(gè) GET 請(qǐng)求到指定的 URL。
• then 方法中的回調(diào)函數(shù)接收一個(gè) Response 對(duì)象，通過(guò)檢查 response.ok 屬性來(lái)判斷請(qǐng)求是否成功。如果不成功，拋出一個(gè)錯(cuò)誤。
• 接著使用 response.json() 方法將響應(yīng)數(shù)據(jù)解析為 JSON 格式，該方法返回一個(gè)新的 Promise。
• 第二個(gè) then 方法中的回調(diào)函數(shù)接收解析后的 JSON 數(shù)據(jù)并打印到控制臺(tái)。
• 如果請(qǐng)求過(guò)程中出現(xiàn)錯(cuò)誤，會(huì)被 catch 方法捕獲并打印錯(cuò)誤信息。

發(fā)送 POST 請(qǐng)求示例

下面是一個(gè)使用 fetch 方法發(fā)送 POST 請(qǐng)求的示例，用于向服務(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);
  });

代碼解釋

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

Response 對(duì)象的常用方法

Response 對(duì)象提供了多種方法來(lái)處理響應(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)制大對(duì)象（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，但在一些舊版本的瀏覽器中可能不被支持?？梢允褂?nbsp;whatwg-fetch 等 polyfill 來(lái)解決兼容性問(wèn)題。

CORS（跨域資源共享）

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

錯(cuò)誤處理

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

附：取消fetch請(qǐng)求

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

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

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

controller.abort(); // 取消

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

實(shí)例：

//創(chuàng)建實(shí)例
let controller = new AbortController();
//設(shè)置定時(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 開(kāi)發(fā)者提供了一種強(qiáng)大且靈活的方式來(lái)處理網(wǎng)絡(luò)請(qǐng)求。通過(guò)使用 fetch，可以方便地發(fā)送 GET、POST 等各種類(lèi)型的請(qǐng)求，并處理服務(wù)器的響應(yīng)數(shù)據(jù)。在使用過(guò)程中，需要注意瀏覽器兼容性、CORS 問(wèn)題和錯(cuò)誤處理等方面，以確保應(yīng)用的穩(wěn)定性和可靠性。希望本文能幫助你更好地掌握 fetch 方法的使用。

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

最新評(píng)論