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

下面是一個(gè)使用 Fetch API 請求數(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('請求失?。? + 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 請求，并在 Promise 的鏈?zhǔn)秸{(diào)用中處理響應(yīng)。如果響應(yīng)狀態(tài)碼為 200（response.ok 為真），則解析響應(yīng)的 JSON 數(shù)據(jù)；否則，拋出一個(gè)錯(cuò)誤。最后，通過 .then 處理解析后的數(shù)據(jù)，或通過 .catch 處理捕獲到的錯(cuò)誤。

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

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

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

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

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

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

Fetch API 還支持其他請求方法、請求頭的設(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ò)請求，并使用.then()和.catch()方法處理響應(yīng)和錯(cuò)誤。下面是Fetch API的詳細(xì)使用方法：

• 發(fā)起GET請求并處理響應(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('請求失?。? + 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對象。您可以使用.then()方法處理成功的響應(yīng)，如果狀態(tài)碼為200（response.ok為真），可以使用.json()方法解析響應(yīng)的JSON數(shù)據(jù)。如果發(fā)生錯(cuò)誤，可以通過.catch()方法捕獲并處理錯(cuò)誤。

• 發(fā)起POST請求并發(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('請求失?。? + response.status);
    }
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log('發(fā)生錯(cuò)誤：' + error.message);
  });

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

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

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('請求失?。? + response.status);
    }
  } catch (error) {
    console.log('發(fā)生錯(cuò)誤：' + error.message);
  }
}
fetchData();

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

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

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

最新評論