JS fetch方法详解|极客笔记

JS fetch方法详解

在Web开发中，我们经常需要与服务器进行数据交互，如获取或提交数据。在传统的开发中，我们一般使用XMLHttpRequest对象来实现这种数据交互。然而，随着Web技术的发展，出现了新的API——fetch。fetch提供了更简洁、灵活的方式来处理网络请求，并且可以使用Promise来处理异步操作。

本文将详细介绍fetch方法的用法和相关内容。

1. fetch方法简介

fetch是ES6新增的方法，用于发送网络请求。它基于Promise实现，并且提供了更强大和灵活的API。fetch返回的是一个Promise对象。

fetch方法的基本语法如下：

fetch(url, options)
  .then(response => {
    // 处理response
  })
  .catch(error => {
    // 处理error
  });

其中，url为请求的地址，options为配置选项，包括method、headers、body等。fetch方法返回一个Promise对象，我们可以使用then方法处理成功的回调，使用catch方法处理失败的回调。

2. fetch方法使用示例

下面是一个简单的示例，通过fetch方法获取服务器返回的数据：

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

上面的代码中，我们向jsonplaceholder网站发送了一个GET请求，获取id为1的post数据。在then方法中，我们使用response.json()将返回的数据解析为JSON格式，然后输出到控制台。

3. fetch方法的配置选项

fetch方法的第二个参数options可以包含一些配置选项，常用的选项如下：

method: 请求方法，如GET、POST、PUT、DELETE等，默认为GET。
headers: 请求头对象，用于设置请求头信息。
body: 请求体，用于传递数据。
mode: 请求模式，如cors、no-cors、same-origin等。
credentials: 是否携带cookie，默认为same-origin。

下面是一个包含配置选项的fetch请求示例：

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))
  .catch(error => console.error(error));

上面的代码中，我们发送了一个POST请求，并且设置了请求头Content-Type为application/json，传递了一个JSON格式的对象作为请求体。

4. fetch方法的返回值

fetch方法返回一个Promise对象，我们可以通过then方法获取服务器返回的数据，并且进行处理。response对象的属性较为丰富，例如：

response.ok: 表示请求是否成功，返回一个Boolean值。
response.status: 表示HTTP状态码，如200、404等。
response.statusText: 表示HTTP状态信息，如OK、Not Found等。
response.headers: 表示响应头对象。

下面是一个示例代码，展示如何获取服务器返回的数据并且处理：

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

5. fetch方法的错误处理

在fetch方法中，我们可以使用catch方法来处理请求过程中出现的错误。例如网络错误、服务器错误等。

下面是一个简单的错误处理示例：

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

上面的代码中，我们向一个不存在的URL发送请求，会返回404错误，进而被catch方法捕获并处理。

6. fetchthen 返回变量

有时候我们需要在then方法中返回一个变量，以便在后续的逻辑中使用。这时，可以在then方法中返回需要传递的变量。

下面是一个示例代码，展示如何在then方法中返回一个变量：

let postId = 0;

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => {
    postId = data.id;
    return postId;
  })
  .then(postId => console.log(postId))
  .catch(error => console.error(error));

上面的代码中，我们在第二个then方法中返回了postId变量，然后在第三个then方法中使用了这个变量。

通过上面的示例，我们可以看到fetch方法的基本使用和一些常见的问题处理方式。fetch方法使得网络请求变得简单和可控，是Web开发中很重要的API之一。