fetch()函数说明与使用方法详解

fetch() 是浏览器原生提供的一个用于发送请求和接收响应数据的方法，可以使用该方法向服务器发送请求获取数据，并接收返回的数据。下面是一些常用的 fetch() 的使用方法。

基本使用方法

代码示例：

fetch(url)
  .then(response => { 
    return response.json() 
  })
  .then(data => { 
    console.log(data) 
  })
  .catch(error => { 
    console.log(error) 
  })

参数 url 表示要请求的资源的 URL，返回值是一个 Promise 对象。调用 fetch() 发起请求后，返回的 Promise 对象立即进入 pending 状态。然后通过 then() 方法来处理从服务器返回的响应数据。在 then() 回调函数中，我们可以接收到一个 Response 对象，我们可以将其解析为 JSON 格式的数据，并将其传递给下一个 then() 方法，这个下一个 then() 方法中的 data 就是服务器返回的数据。

请求类型

HTTP 请求方法

fetch() 方法默认的是 GET 请求方式，如果需要使用 POST、PUT、DELETE 等其他请求方式，需要在请求选项中指定，代码示例如下：

fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
})

fetch() 的第二个参数选项包含如下属性：

• method 表示请求的方法。
• body 表示请求体，一般用于 POST 请求的数据。
• headers 表示请求头。

请求可能的状态

fetch() 的 Response 对象表示了通信的响应，有很多属性可以表示被响应的状态，例如 status 和 statusText 属性。

状态码	描述
200 ~ 299	表示成功响应
300 ~ 399	表示重定向
400 ~ 499	表示客户端请求错误
500 ~ 599	表示服务器请求错误

示例

下面展示一个简单的例子：

fetch('https://api.github.com/users')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => console.log(error));

这个例子向 GitHub API 发起了一个 GET 请求获取用户列表信息。

再看一个 POST 请求的例子：

const data = { name: 'john', age: 28 };

fetch('https://example.com/api/users', {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Request failed!');
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => console.log(error));

这个例子向 https://example.com/api/users 发起一个 POST 请求，让服务器创建一个新的用户。在请求选项中，我们指定了请求的方法为 POST，并通过 body 属性添加了要发送的数据。在 headers 属性中添加了 Content-Type 表示传递的数据类型为 JSON 格式。在 then() 回调函数中，如果响应成功，则将其解析为 JSON 格式的数据，并将其传递给下一个 then() 方法，这个下一个 then() 方法中的 data 就是服务器返回的数据。如果有错误发生，则会跳转到 catch() 方法中，打印错误信息。

结论

fetch() 是一个方便、易用的 API，能够帮助你以简单、直观的方式和服务器进行交互。