浏览器支持 Fetch API

Fetch API是一种现代的网络请求API，它提供一种更好的方式来处理HTTP请求。Fetch API已经被广泛使用，它已经成为了一种主流的网路请求技术。

Fetch API的基本用法

在Fetch API中，我们可以使用fetch()函数来发送HTTP请求。它需要一个URL作为参数，返回一个Promise对象。

fetch('http://example.com/movies.json')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });

从上面的代码片段，我们可以看到，它使用fetch()函数来发送HTTP GET请求，并在收到响应后，使用json()函数将响应转换为对象，最后将解析后的对象输出到控制台。

Fetch API的请求方法

在Fetch API中，可以使用以下不同的请求方法来发送HTTP请求。

GET

GET方法用于从服务器获取数据。

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

POST

POST方法用于向服务器发送数据。

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

从上面的代码片段我们可以看到，它使用method参数来指定请求方法，body参数来传递请求的数据，headers参数来指定请求头。

PUT

PUT方法用于更新服务器上的数据。

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

从上面的代码片段我们可以看到，它使用PUT方法来更新服务器上的数据。

DELETE

DELETE方法用于从服务器上删除数据。

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE'
})
.then((response) => {
  return response.json();
})
.then((data) => {
  console.log(data);
});

从上面的代码片段我们可以看到，它使用DELETE方法从服务器上删除数据。

Fetch API的返回值

Fetch API返回一个Promise，它具有以下特点：

• 对于400、500状态码的响应，仍然会resolve，只是以ok属性作为响应值的一部分进行标注，我们需要判断如果响应码不在200到299之间，就要手动reject。
• 使用.then()处理响应，代码将会在请求成功后运行。
• Promise的结果将是代表请求结果的Response对象，它包含有关响应的信息和内容。

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

从上面的代码片段我们可以看到，它使用ok属性来判断请求是否成功。

Fetch API的好处

• Fetch API旨在提供一种更好的方式来处理HTTP请求，包括网络错误处理和超时等。
• Fetch API提供了一个简单、直接的方法来获取数据，不需要设置XHR对象或回调函数，使用起来更加方便。
• Fetch API支持流式数据流，可以轻松地处理请求和响应的类型，包括JSON、XML、HTML等。
• Fetch API允许我们更好的控制请求和响应，包括设置请求头、请求方法和缓存等。

总的来说，Fetch API是一种现代和强大的技术，已经成为了一种主流的网路请求技术。如果你还没有使用过这个技术，那么现在就可以开始尝试一下。