结合之前的文章事件循环Event Loop_爬行者c的博客-CSDN博客 先理解JS异步的实现机制。

异步操作结果的处理方式一般会通过回调函数来实现。关于异步编程有以下几种。

Promise

内置类。异步编程，解决回调地域。

参数：一个函数，该函数接收两个函数参数，resolve和reject，且必传

三种状态：pending（进行中，默认状态）、fulfilled/resolved（已成功，异步操作成功后）和rejected（已失败，异步操作失败后）

注：

• 状态一旦修改就不能再改变，一旦执行就无法取消。pending-->resolved/rejected
• then方法的参数期望是函数，传入非函数则会发生值穿透。
• then异步执行，支持链式写法。

let promise = new Promise((resolve, reject) => {if (true) {// 将成功参数返回，供then方法使用resolve("value");} else {// 将失败参数返回，供then方法使用reject("error");}
});//  then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。
promise.then(value => {// resolved时调用，value为resolve函数返回的参数console.log(value);},err => {// rejected时调用，err为reject函数返回的参数console.log(err);}
);
promise.catch(error => console.log(error));   //捕获错误

原型上的公有方法

Promise.prototype.then()
Promise.prototype.catch()
Promise.prototype.finally()new Promise().then(res=>{}).catch(err=>{})

静态方法

Promise.resolve('a')
Promise.reject('a')
Promise.all([p1,p2,p3]]); //所有promise实例都为成功状态   返回值：新的Promise实例
Promise.race([p1,p2,p3]]); //同时发送多个请求，谁先有处理结果就返回，不管是成功还是失败（‘竞速’）

Generator函数

异步。分段执行。yield暂停执行，next恢复执行。缺点是并不能区分什么时候（在第一、第二...阶段）执行。

Generator 有两个区分于普通函数的部分：

• 一是在 function 后面，函数名之前有个 * ；

• 函数内部有 yield 表达式。

function* func(){console.log("one");yield '1';console.log("two");yield '2'; console.log("three");yield '3'; 
}
var f = func();// 返回一个内部指针
// next()方法分阶段执行Generator函数，每次调用完返回一个对象
f.next(); // one  {value: '1', done: false}
f.next(); // two {value: '2', done: false}
// return 方法返回给定值，并结束遍历 Generator函数，未给定参数就返回undefined
f.return('over'); // {value: "over", done: true}
f.next(); // {value: undefined, done: true}

async函数

async 是 ES7 才有的与异步操作有关的关键字，和 Promise 和 Generator 有很大关联。

四种使用形式：

• 函数声明： async function foo() {}
• 函数表达式： const foo = async function() {}
• 对象的方式： let obj = { async foo() {} }
• 箭头函数： const foo = async () => {}

返回值：一个 Promise 对象，可以使用 then 方法添加回调函数。

await

用于等待一个 Promise 对象, 它只能在异步函数 async function 内部(async上下文)使用。主要的意图是用来等待 Promise 对象的状态被 resolved， 相当于promise.then。

function testAwait(){return new Promise((resolve) => {setTimeout(function(){console.log("testAwait");resolve();}, 1000);});
}async function helloAsync(){await testAwait();console.log("helloAsync");}
helloAsync();
// testAwait
// helloAsync

await针对所跟不同表达式的处理方式：

• Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
• 非 Promise 对象：直接返回对应的值，对象/字符串/布尔值/数值/普通函数

Ajax

 异步 JavaScript 和 XML。核心技术是XMLHttpRequest（XHR），创建一个Ajax对象要经过：

    //1.创建Ajax对象if(window.XMLHttpRequest){var xhr=new XMLHttpRequest();}else{var xhr=new ActiveXObject("Microsoft.XMLHTTP");}//2.连接服务器xhr.open('GET', url, true);  // false为同步，true为异步//3.发送xhr.send();//4.接收xhr.onreadystatechange=function (){if(xhr.readyState==4){if(xhr.status==200){//alert('成功了：'+xhr.responseText);}else{//alert('失败了');}}};

fetch

基于标准 Promise 实现，支持 async/await。脱离了XHR，属于原生JS，是window的一个方法。

相对于XHR发起请求的语法更加简洁。

 参数

url 请求地址

options 配置项对象，包括method、headers、body、credentials等参数

get请求

var result = fetch('url', {credentials: 'include',headers: {'Accept': 'application/json, text/plain, */*',},    });

post请求 

var result = fetch('/api/post', {method: 'POST',credentials: 'include',headers: {'Accept': 'application/json, text/plain, */*','Content-Type': 'application/x-www-form-urlencoded'},// 注意 post 时候参数的形式body: "a=1&b=2"});

 处理回调

fetch(url).then(response => {if (response.ok) {return response.json() // 解析为可读数据} else {return Promise.reject('请求失败')}
}) .then(data => console.log(data)) //执行结果是 resolve就调用then方法，，第二个then是真正的数据 .catch(e => console.log("error")) //执行结果是 reject就调用catch方法

结合async/await优化写法

async function() {try {let response = await fetch(url);let data = response.json();console.log(data);} catch (error) {console.log(' error');}
}

注意：

1、fetch只对网络故障或请求被阻止报错，不会拒绝http的错误状态，对404，500都当做成功的请求，将promise标记为resolve。可通过判断Response象中的ok是否为true，如果不是，用 Promise手动添加一个reject。

2、fetch默认不会带cookie，需要添加配置项 credentials: 'include'。

3、fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费。

4、fetch没有办法原生监测请求的进度，而XHR可以。

5、兼容性问题（ie完全不支持），针对不同的问题需要引入不同的库。

fetch封装

export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {type = type.toUpperCase();url = baseUrl + url;if (type == 'GET') {let dataStr = ''; //数据拼接字符串Object.keys(data).forEach(key => {dataStr += key + '=' + data[key] + '&';})if (dataStr !== '') {dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));url = url + '?' + dataStr;}}if (window.fetch && method == 'fetch') {let requestConfig = {credentials: 'include',//为了在当前域名内自动发送 cookie ， 必须提供这个选项method: type,headers: {'Accept': 'application/json','Content-Type': 'application/json'},mode: "cors",//请求的模式cache: "force-cache"}if (type == 'POST') {Object.defineProperty(requestConfig, 'body', {value: JSON.stringify(data)})}try {const response = await fetch(url, requestConfig);const responseJson = await response.json();return responseJson} catch (error) {throw new Error(error)}} else {return new Promise((resolve, reject) => {let requestObj;if (window.XMLHttpRequest) {requestObj = new XMLHttpRequest();} else {requestObj = new ActiveXObject;}let sendData = '';if (type == 'POST') {sendData = JSON.stringify(data);}requestObj.open(type, url, true);requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");requestObj.send(sendData);requestObj.onreadystatechange = () => {if (requestObj.readyState == 4) {if (requestObj.status == 200) {let obj = requestObj.responseif (typeof obj !== 'object') {obj = JSON.parse(obj);}resolve(obj)} else {reject(requestObj)}}}})}
}