Question

为了做比较，我们先来写个简单的例子，并且分别用 XMLHttpRequest 和 fetch 实现相关功能。我们想要实现的功能是这样的：请求一个 URL 地址，获取响应数据并将数据转换成 JSON 格式。

使用 XMLHttpRequest 实现

使用 XMLHttpRequest 来实现该功能需要设置两个监听函数，分别用来处理成功和失败的情况，同时还需要依次调用 open() 和 send() 方法才能实现请求。我们从 MDN 文档中找来了下面的示例代码：

function reqListener() {
  var data = JSON.parse(this.responseText);
  console.log(data);
}

function reqError(err) {
  console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

使用 fetch 实现

我们也可以使用 fetch 来实现相关功能，代码如下：

fetch('./api/some.json')
  .then(
    function(response) {
      if (response.status ! == 200) {
        console.log('Looks like there was a problem. Status Code: '
            +
          response.status);
        return;
      }

      // 处理响应中的文本信息


      response.json().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {

    console.log('Fetch Error :-S', err);
  });

在将响应的文本信息转换成 JSON 格式前，需要先确保响应的状态码为 200。

fetch() 请求后返回的响应是一个 Stream 对象，这就意味着我们在调用 json() 方法后会返回一个 Promise，因为读取 Stream 的过程是异步操作的。