一、介绍

Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

二、使用

1.Fetch发送数据

使用Fetch发送也很简单，只需要配置三个参数。
fetch('url', options);

options有三个参数：

第一个参数是设置请求方法（如post、put或del），Fetch会自动设置方法为get。
第二个参数是设置头部。因为一般使用JSON数据格式，所以设置ContentType为application/json。
第三个参数是设置包含JSON内容的主体。因为JSON内容是必须的，所以当设置主体时会调用JSON.stringify。

fetch('url', {
  // 请求方式
  method: 'post',    // post|get
  // 设置头部
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: username=${userName}&password=${password}
})

2.Fetch响应数据处理

fetch('url').then(res => {
    if (res.ok) {
      return res.json(); // 返回一个promise对象
    } else {
       return Promise.reject('something went wrong!')
    }
}).then( data => {
    // 继续处理响应数据
}).catch( err => {
    console.log("网络出错" + err);
});

3.链式调用，例子

// fetch异步请求数据
      fetch("http://it.warmtel.com/api/login", {
        // 请求方式
        method: 'post',
        // 设置头部，post和get的头部不一样
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `username=${userName}&password=${password}`
      }).then(res => {
        // 响应成功会调用response.json。最简单方法是检查response是否为ok。
        console.log(res);
        if (res.ok) {
          return res.json(); // 响应内容转为json对象
          // 2.进入主界面
          this.$router.replace({ path: "/main" });
        } else {
          return Promise.reject(new Error("请求出错"));
        }
      }).then(data => {
        console.log(data);
        // 2.进入主界面
        this.$router.replace({ path: "/main" });
      }).catch(err => {
        console.log("网络出错" + err);
      })