js fetch 方法返回响应|极客笔记

js fetch 方法返回响应

在前端开发中，经常需要通过网络请求来获取数据或与服务器进行交互。而在现代的web开发中，我们通常使用fetch API来发送网络请求并获取响应。

什么是fetch API

fetch API是一种现代的基于Promise的API，用于在web浏览器中进行网络请求。它提供了一种更简单、更强大的替代方案，来代替传统的XMLHttpRequest对象。

使用fetch API可以轻松地发送GET、POST、PUT、DELETE等各种类型的请求，并处理返回的响应数据。fetch API不仅支持发送基本的请求，还支持设置请求头、请求体、跨域请求等功能。

fetch API的基本用法

使用fetch API发送网络请求非常简单，只需调用fetch方法并传入要请求的URL即可。fetch方法返回一个Promise对象，通过.then()方法可以处理得到的响应数据。

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data));

上面的示例代码中，我们向https://jsonplaceholder.typicode.com/todos/1发送了一个GET请求，获取了一个待办事项的数据。通过链式调用.then()方法，我们首先将响应对象解析为JSON格式的数据，然后打印出来。

运行上述代码，我们可以在控制台看到获取到的数据：

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

fetch API处理请求错误

在实际开发中，网络请求可能会失败，例如服务器错误、断网等情况。为了处理这些错误，我们可以使用.catch()方法来捕获异常并做相应处理。

fetch('https://jsonplaceholder.typicode.com/todos/10000')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在上面的示例中，我们向一个不存在的URL发送了一个GET请求。由于该URL并不存在，服务器会返回一个404错误。我们在第一个.then()方法中通过response.ok来检查响应是否成功，如果不成功，则抛出一个自定义的错误。

运行上述代码，我们会在控制台看到类似如下输出：

Error: Network response was not ok

fetch API设置请求头和请求体

有时候我们需要在请求中设置一些自定义的请求头或请求体，以适应服务器的要求。fetch API提供了一些方法来实现这些功能。

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log(data));

在上面的示例中，我们向https://jsonplaceholder.typicode.com/posts发送了一个POST请求，并设置了请求头的Content-Type为application/json。同时，我们通过JSON.stringify()方法将一个JavaScript对象转换为符合JSON格式的字符串作为请求体。

fetch API跨域请求

在实际开发中，我们经常会碰到跨域请求的问题。浏览器出于安全考虑，限制了跨域请求。但是通过fetch API，我们可以轻松地发送跨域请求。

fetch('https://api.example.com/data', {
  mode: 'cors'
})
  .then(response => response.json())
  .then(data => console.log(data));

在上面的示例中，我们向https://api.example.com/data发送了一个跨域请求，并在请求配置中设置了mode为’cors’。这样浏览器就会允许该跨域请求，并返回响应数据。

总结

fetch API是一种现代的网络请求API，在前端开发中被广泛应用。通过fetch API，我们可以轻松地发送各种类型的网络请求，并处理返回的响应数据。fetch API基于Promise，支持链式调用.then()方法，让代码更具可读性和易维护性。

在实际项目中，我们经常会使用fetch API来获取数据、上传文件、与服务器进行通信等。掌握fetch API的基本用法和常见问题处理，可以帮助我们更高效地进行前端开发工作。

js fetch 方法返回响应