详解JS中常用的Fetch API

Fetch API 是一种用于进行网络请求的现代 JavaScript API，相对于传统的 XMLHttpRequest，Fetch API 更符合 Promise 和 async/await 的编程模型。

下面是一个使用 Fetch API 请求数据的示例代码：

fetch('https://api.example.com/data')
  .then(function(response) {
    if (response.ok) {
      return response.json(); // 解析响应的 JSON 数据
    } else {
      throw new Error('请求失败：' + response.status);
    }
  })
  .then(function(data) {
    // 处理解析后的数据
    console.log(data);
  })
  .catch(function(error) {
    // 处理错误
    console.log('发生错误：' + error.message);
  });

上述代码使用 Fetch API 发起了一个 GET 请求，并在 Promise 的链式调用中处理响应。如果响应状态码为 200（response.ok 为真），则解析响应的 JSON 数据；否则，抛出一个错误。最后，通过 .then 处理解析后的数据，或通过 .catch 处理捕获到的错误。

在使用 Fetch API 进行异步请求时，.then() 方法用于处理 Promise 对象的成功状态。Fetch API 返回的 Promise 对象在请求成功时会触发第一个 .then() 方法，并将响应对象作为参数传递给该方法。

在示例中的第一个 .then() 中，我们检查响应对象的 ok 属性来判断请求是否成功（状态码为 200）。如果成功，我们使用 .json() 方法解析响应的 JSON 数据，并返回一个新的 Promise 对象，以便将解析后的数据传递给下一个 .then()。

第二个 .then() 方法用于处理解析后的数据，它接收解析后的数据作为参数，并执行相应的操作。在示例中，我们使用 console.log() 打印解析后的数据。

请注意，每个 .then() 方法返回的都是一个新的 Promise 对象，这使得我们可以在链式调用中继续处理数据或进行其他操作。

在链式调用中，如果在任何一个 .then() 方法中抛出错误，或者前一个 .then() 返回的 Promise 对象被拒绝（reject），则会触发 .catch() 方法来处理错误情况。.catch() 方法接收错误对象作为参数，并执行相应的错误处理逻辑。

因此，.then() 方法用于处理成功状态的情况，而 .catch() 方法用于处理错误状态的情况。通过这种方式，我们可以更好地控制和处理异步操作的结果。

Fetch API 还支持其他请求方法、请求头的设置、发送数据等功能。您可以根据具体需求进行相应的调整和扩展。

需要注意的是，Fetch API 的兼容性较好，但在一些旧版本的浏览器中可能不被支持。为了确保兼容性，您可以使用 Polyfill 或将其与传统的 XMLHttpRequest 结合使用。

当使用Fetch API时，您需要使用fetch()函数发起网络请求，并使用.then()和.catch()方法处理响应和错误。下面是Fetch API的详细使用方法：

• 发起GET请求并处理响应：

fetch('https://api.example.com/data')
  .then(function(response) {
    if (response.ok) {
      return response.json(); // 解析响应的JSON数据
    } else {
      throw new Error('请求失败：' + response.status);
    }
  })
  .then(function(data) {
    // 处理解析后的数据
    console.log(data);
  })
  .catch(function(error) {
    // 处理错误
    console.log('发生错误：' + error.message);
  });

在fetch()函数中传入URL作为参数，它将返回一个Promise对象。您可以使用.then()方法处理成功的响应，如果状态码为200（response.ok为真），可以使用.json()方法解析响应的JSON数据。如果发生错误，可以通过.catch()方法捕获并处理错误。

• 发起POST请求并发送数据：

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('发生错误：' + error.message);
  });

在这个示例中，我们使用fetch()函数的第二个参数来配置请求。我们指定请求的方法为POST，并设置请求头为application/json。我们使用JSON.stringify()将数据转换为JSON字符串，并将其作为请求的主体（body）。在.then()中处理响应，以及在.catch()中处理错误。

• 使用async/await进行请求：

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('发生错误：' + error.message);
  }
}
fetchData();

通过使用async/await，可以将异步请求的处理逻辑更简洁地表达出来。在fetch()和response.json()之前使用await关键字，可以等待Promise对象解析为结果。try/catch块用于捕获错误并进行处理。

这些示例展示了Fetch API的基本使用方法，您可以根据需要进行进一步的配置和调整。请记住，对于跨域请求和处理特定类型的数据，可能需要额外的配置和处理。

以上就是详解JS中常用的Fetch API的详细内容，更多关于JS Fetch API的资料请关注脚本之家其它相关文章！