简介

Fetch被称为下一代Ajax技术,采用Promise方式来处理数据。是一种简洁明了的API，比XMLHttpRequest更加简单易用。

参考文档：www.w3cschool.cn/fetch_api/

与传统ajax对象

使用Ajax请求一个 json 数据一般是这样：

var url = 'some url';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
   if(xhr.readyState==4){
        if(xhr.status==200){
            var data=xhr.responseText;
             console.log(data);
   }
};
xhr.onerror = function() {
  console.log("Oh, error");
};
xhr.send();

同样我们使用fetch请求Json数据

fetch(url).then(response => response.json())//解析为可读数据
  .then(data => console.log(data))//执行结果是 resolve就调用then方法
  .catch(err => console.log("Oh, error", err))//执行结果是 reject就调用catch方法

从两者对比来看，fetch代码精简许多，业务逻辑更清晰明了，使得代码易于维护，可读性更高。总而言之，Fetch 优点主要有：

语法简洁，更加语义化，业务逻辑更清晰
基于标准 Promise 实现，支持 async/await
同构方便，使用 isomorphic-fetch

Promise 简介

由于 Fetch API 是基于 Promise 设计，接下来我们简单介绍下Promise工作流程，方便大家更好理解Fetch。

fetch方法返回一个Promise对象, 根据 Promise Api 的特性, fetch可以方便地使用then方法将各个处理逻辑串起来,。

使用 Promise.resolve() 或 Promise.reject() 方法将分别返会肯定结果的Promise或否定结果的Promise, 从而调用下一个then 或者 catch。一旦then中的语句出现错误, 也将跳到catch中。

演示 get 请求

这里请求一下GitHub的账号信息

fetch("https://api.github.com/users")
      .then((res) => res.json())
      .then(data => {
        console.log(data);
      })
      .catch(err => console.log(err));

演示 post 请求


let postData = {username:'andy', password: 'admin'};
fetch('http://data.xxx.com/Admin/Login/login', {
  method: 'POST',
  mode: 'cors',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: JSON.stringify(postData)
}).then(function(response) {
  console.log(response);
});

fetch-下一代的ajax技术

简介

与传统ajax对象

Promise 简介

演示 get 请求

演示 post 请求