Fetch API 是一種用于進(jìn)行網(wǎng)絡(luò)請(qǐng)求的現(xiàn)代 JavaScript API，相對(duì)于傳統(tǒng)的 XMLHttpRequest，F(xiàn)etch API 更符合 Promise 和 async/await 的編程模型。

下面是一個(gè)使用 Fetch API 請(qǐng)求數(shù)據(jù)的示例代碼：

fetch('https://api.example.com/data')
  .then(function(response) {
    if (response.ok) {
      return response.json(); // 解析響應(yīng)的 JSON 數(shù)據(jù)
    } else {
      throw new Error('請(qǐng)求失敗：' + response.status);
    }
  })
  .then(function(data) {
    // 處理解析后的數(shù)據(jù)
    console.log(data);
  })
  .catch(function(error) {
    // 處理錯(cuò)誤
    console.log('發(fā)生錯(cuò)誤：' + error.message);
  });

上述代碼使用 Fetch API 發(fā)起了一個(gè) GET 請(qǐng)求，并在 Promise 的鏈?zhǔn)秸{(diào)用中處理響應(yīng)。如果響應(yīng)狀態(tài)碼為 200（response.ok 為真），則解析響應(yīng)的 JSON 數(shù)據(jù)；否則，拋出一個(gè)錯(cuò)誤。最后，通過(guò) .then 處理解析后的數(shù)據(jù)，或通過(guò) .catch 處理捕獲到的錯(cuò)誤。

在使用 Fetch API 進(jìn)行異步請(qǐng)求時(shí)，.then() 方法用于處理 Promise 對(duì)象的成功狀態(tài)。Fetch API 返回的 Promise 對(duì)象在請(qǐng)求成功時(shí)會(huì)觸發(fā)第一個(gè) .then() 方法，并將響應(yīng)對(duì)象作為參數(shù)傳遞給該方法。

在示例中的第一個(gè) .then() 中，我們檢查響應(yīng)對(duì)象的 ok 屬性來(lái)判斷請(qǐng)求是否成功（狀態(tài)碼為 200）。如果成功，我們使用 .json() 方法解析響應(yīng)的 JSON 數(shù)據(jù)，并返回一個(gè)新的 Promise 對(duì)象，以便將解析后的數(shù)據(jù)傳遞給下一個(gè) .then()。

第二個(gè) .then() 方法用于處理解析后的數(shù)據(jù)，它接收解析后的數(shù)據(jù)作為參數(shù)，并執(zhí)行相應(yīng)的操作。在示例中，我們使用 console.log() 打印解析后的數(shù)據(jù)。

請(qǐng)注意，每個(gè) .then() 方法返回的都是一個(gè)新的 Promise 對(duì)象，這使得我們可以在鏈?zhǔn)秸{(diào)用中繼續(xù)處理數(shù)據(jù)或進(jìn)行其他操作。

在鏈?zhǔn)秸{(diào)用中，如果在任何一個(gè) .then() 方法中拋出錯(cuò)誤，或者前一個(gè) .then() 返回的 Promise 對(duì)象被拒絕（reject），則會(huì)觸發(fā) .catch() 方法來(lái)處理錯(cuò)誤情況。.catch() 方法接收錯(cuò)誤對(duì)象作為參數(shù)，并執(zhí)行相應(yīng)的錯(cuò)誤處理邏輯。

因此，.then() 方法用于處理成功狀態(tài)的情況，而 .catch() 方法用于處理錯(cuò)誤狀態(tài)的情況。通過(guò)這種方式，我們可以更好地控制和處理異步操作的結(jié)果。

Fetch API 還支持其他請(qǐng)求方法、請(qǐng)求頭的設(shè)置、發(fā)送數(shù)據(jù)等功能。您可以根據(jù)具體需求進(jìn)行相應(yīng)的調(diào)整和擴(kuò)展。

需要注意的是，F(xiàn)etch API 的兼容性較好，但在一些舊版本的瀏覽器中可能不被支持。為了確保兼容性，您可以使用 Polyfill 或?qū)⑵渑c傳統(tǒng)的 XMLHttpRequest 結(jié)合使用。

當(dāng)使用Fetch API時(shí)，您需要使用fetch()函數(shù)發(fā)起網(wǎng)絡(luò)請(qǐng)求，并使用.then()和.catch()方法處理響應(yīng)和錯(cuò)誤。下面是Fetch API的詳細(xì)使用方法：

• 發(fā)起GET請(qǐng)求并處理響應(yīng)：

fetch('https://api.example.com/data')
  .then(function(response) {
    if (response.ok) {
      return response.json(); // 解析響應(yīng)的JSON數(shù)據(jù)
    } else {
      throw new Error('請(qǐng)求失?。? + response.status);
    }
  })
  .then(function(data) {
    // 處理解析后的數(shù)據(jù)
    console.log(data);
  })
  .catch(function(error) {
    // 處理錯(cuò)誤
    console.log('發(fā)生錯(cuò)誤：' + error.message);
  });

在fetch()函數(shù)中傳入U(xiǎn)RL作為參數(shù)，它將返回一個(gè)Promise對(duì)象。您可以使用.then()方法處理成功的響應(yīng)，如果狀態(tài)碼為200（response.ok為真），可以使用.json()方法解析響應(yīng)的JSON數(shù)據(jù)。如果發(fā)生錯(cuò)誤，可以通過(guò).catch()方法捕獲并處理錯(cuò)誤。

• 發(fā)起POST請(qǐng)求并發(fā)送數(shù)據(jù)：

var data = {
  username: 'John',
  password: 'secret'
};
fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('請(qǐng)求失?。? + response.status);
    }
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log('發(fā)生錯(cuò)誤：' + error.message);
  });

在這個(gè)示例中，我們使用fetch()函數(shù)的第二個(gè)參數(shù)來(lái)配置請(qǐng)求。我們指定請(qǐng)求的方法為POST，并設(shè)置請(qǐng)求頭為application/json。我們使用JSON.stringify()將數(shù)據(jù)轉(zhuǎn)換為JSON字符串，并將其作為請(qǐng)求的主體（body）。在.then()中處理響應(yīng)，以及在.catch()中處理錯(cuò)誤。

• 使用async/await進(jìn)行請(qǐng)求：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (response.ok) {
      const data = await response.json();
      console.log(data);
    } else {
      throw new Error('請(qǐng)求失敗：' + response.status);
    }
  } catch (error) {
    console.log('發(fā)生錯(cuò)誤：' + error.message);
  }
}
fetchData();

通過(guò)使用async/await，可以將異步請(qǐng)求的處理邏輯更簡(jiǎn)潔地表達(dá)出來(lái)。在fetch()和response.json()之前使用await關(guān)鍵字，可以等待Promise對(duì)象解析為結(jié)果。try/catch塊用于捕獲錯(cuò)誤并進(jìn)行處理。

這些示例展示了Fetch API的基本使用方法，您可以根據(jù)需要進(jìn)行進(jìn)一步的配置和調(diào)整。請(qǐng)記住，對(duì)于跨域請(qǐng)求和處理特定類型的數(shù)據(jù)，可能需要額外的配置和處理。

以上就是詳解JS中常用的Fetch API的詳細(xì)內(nèi)容，更多關(guān)于JS Fetch API的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論