关于fetch的使用

发表于 | 分类于

起源

在 Ajax 中涉及到的 JavaScript 方面的技术，即 XMLHttpRequest（以下简称 XHR）。很长一段时间我们都是通过 XHR 来与服务器建立异步通
信。然而在使用的过程中，我们发现 XHR 是基于事件的异步模型，在设计上将输入、输出和事件监听混杂在一个对象里，且必须通过实例化方式来发
请求。配置和调用方式混乱，不符合关注分点离原则。

基于此需求提出了Fetch API

fetch的使用

该fetch()方法返回一个Promise解析Response来自Request显示状态（成功与否）的方法。如果您promise {}在控制台日志屏幕中收到此消息，请不要惊慌 - 它基本上意味着Promise工作，但等待解决。因此，为了解决它，我们需要 .then()处理程序（回调）来访问内容。
所以简而言之，我们首先定义路径（Fetch），其次是从服务器请求数据（Request），第三个定义内容类型（Body），最后但并非最不重要的是，我们访问数据（Response）。

以下为使用fetch的一个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
fetch('./api/some.json')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

fetch相比于ajax的优势

fetch基于promise实现，所以fetch在应用了async写法后，可以将异步操作写的和同步操作一样清晰易懂。