在我们日常开发中，es6的async-await是经常被使用的，不过很多人还不会怎么用，这里我们来详细的看下其用法
工具/原料
一台电脑
一个浏览器
async/await的使用
1、什么是async/awaitasync/await是es2017,即es8的规范，使用方式为： async function(){ await=返回promise的异步请求 }
2、async/await使用基本演示 当进入async标识的函数体后，会依次往下执行，直到遇到了await，然后让await后面的代码执行（一般为一个异步操作），然后await能将右边得到的值返回给左边的变量。如 var bl=await promisObj; b1能够获取返回的值。 同时如果async标识了的函数返回一个值的话，async函数左边的变量也能接收到其返回值，不过其返回值会是一个promise对象。
3、async/await使用时的注意事项1.要注意await只能在async中使用，不然是没有效果的。2.其实async 和await联合起来使用相当于替代了Promise的then和catch方法，将async后面的函数里面的代码由异步变成了同步阻塞式，3.await后面跟异步操作函数，如果异步结果是一个promise对象，那么当 赋值给左边的变量时，变量得到的一定是真正的值。如果是一个jq的ajax,那么不需要写成功的回调函数，将直接返回真正的结果到await左边的变量中
4、很有用的做法：使用async/await连续发起多次请求如果要使用async/await发起多次请求，那么需要在async标识的函数里面连续写多个await，并把请求的结果返回//通过aysnc实现同步请求varfn=asyncfunction() {//等待第一次请求完成varres1=await$.getJSON("http://127.0.0.1:8081/",function(d){returnd;});console.log("第一次请求完成：",res1);//等待第二次请求完成if(res1.data=="get"){varres2= await$.post("http://127.0.0.1:8081/",function(d){returnd;});}res2=JSON.parse(res2);console.log("第二次请求完成：",res2);//等待第三次请求完成if(res2.data=="post"){varres3= await$.getJSON("http://127.0.0.1:8081/",function(d){returnd});}console.log("第三次请求完成：",res3);};
async/await使用实例
1、async/await示例演示已知后端有三个接口：第一个验证用户名和密码是否为admin与123456，如果是就返回成功的对象.第二个接口接收当前用户名，返回当前用户的真正姓名，性别，等级，第二个接口接收当前用户等级，返回当前用户的消费总额【9999元】要求① 先发起第一次请求验证用户名与密码是否正确，② 如果用户名与密码正确，就发起第二次请求：通过用户名获取当前用户基本信息。③ 获取到用户基本信息后，就通过当前用户等级发起第三次请求，获取当前用户的消费总额④ 最后把当前用户的基本信息和消费综合写入到网页的div中
2、实现代码varfn=asyncfunction(){//发起第一次请求varres1= await$.post("http://127.0.0.1:8081/loginTest",{username:"admin",password:"123456"},function(d){returnd;})varres1=JSON.parse(res1)console.log("第一次请求：",res1);//发起第二次请求if(res1.msg!="yes") return;varres2= await$.post("http://127.0.0.1:8081/userInfo",{username:res1.username},function(d){returnd;})varres2=JSON.parse(res2)console.log("第二次请求",res2);//发起第三次请求if(res2.leve!="vip") return;varres3= await$.post("http://127.0.0.1:8081/money",{leve:res2.leve},function(d){returnd;})varres3=JSON.parse(res3)console.log("第三次请求",res3);}
其他类似async-await的实现
1、promise实现varp1= newPromise(function(resolved, reject) {$.post('http://127.0.0.1:8081/loginTest', {username:'admin',password:'123456'}, function(d) {varobjd= JSON.parse(d)console.log('登录接口验证结果：', objd)if(objd.msg== 'yes') resolved(objd)elsereject(objd)})})varp2= p1.then(function(data) {returnnewPromise(function(resolved, reject) {$.post('http://127.0.0.1:8081/userInfo', {username:data.username}, function(d) {varobjd= JSON.parse(d)console.log('获取用户信息接口，结果：', objd)if(objd.leve== 'vip') resolved(objd)elsereject(objd)})})})varp3= p2.then(function(data) {$.post('http://127.0.0.1:8081/money', {leve:data.leve}, function(d) {varobjd= JSON.parse(d)console.log('获取消费金额接口，结果：', objd)})})
2、fetch实现varf1= fetch('http://127.0.0.1:8081/loginTest', {method:'post',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:'admin',password:'123456'})}).then(function(d) {if(d.statusText== 'OK')returnd.json()elsereturn'错误'}).then(function(d) {console.log(d)returnd})varf2= f1.then(function(d) {if(d.msg!= 'yes') return'登录失败'returnfetch('http://127.0.0.1:8081/userInfo', {method:'post',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:d.username})}).then(function(d) {if(d.statusText== 'OK')returnd.json()elsereturn'错误'}).then(function(d) {console.log(d)returnd})})varf3= f2.then(function(d) {if(d.leve!= 'vip') return'不存在此等级'returnfetch('http://127.0.0.1:8081/money', {method:'post',headers:{'Content-Type':'application/json'},body:JSON.stringify({leve:d.leve})}).then(function(d) {if(d.statusText== 'OK')returnd.json()elsereturn'错误'}).then(function(d) {returnd})})varf4= f3.then(function(d) {console.log(d)})
3、Generators实现varobj= {}function*gen() {yieldfetch('http://127.0.0.1:8081/loginTest', {method:'post',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:'admin',password:'123456'})}).then(function(d) {if(d.statusText== 'OK')returnd.json()elsereturn'错误'}).then(function(d) {console.log(d)obj= d; // 存储获取的数据returnd})yieldfetch('http://127.0.0.1:8081/userInfo', {method:'post',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:obj.username})}).then(function(d) {if(d.statusText== 'OK')returnd.json()elsereturn'错误'}).then(function(d) {console.log(d)obj= d; // 存储获取的数据returnd})yieldfetch('http://127.0.0.1:8081/money', {method:'post',headers:{'Content-Type':'application/json'},body:JSON.stringify({leve:obj.leve})}).then(function(d) {if(d.statusText== 'OK')returnd.json()elsereturn'错误'}).then(function(d) {returnd})return'end'}varmyg= gen()vary1= myg.next()y1.value.then(function(d) {if(d.msg== 'yes') {myg.next().value.then(function(d1){if(d1.leve=="vip"){myg.next().value.then(function(d2){console.log(d2)})}})}})
