刚开始接触js的时候，小编以为js是用来做交互和效果的。后来随着自己接手的项目越来越多，才发现js对于前后端数据有更重要的用处。交互，说到数据交互，就少不了异步的问题。我之前也有几篇关于异步操作的文章。今天和大家讨论一下非常流行的方案，也就是前面提到的generator的语法糖——async和await方案。也可以关注我的微信公众号，蜗牛全栈。1.基本用法//返回的Promise对象asyncfunctionfoo(){return"helloworld"//Promise.resolve("helloworld")}console.log(foo())//Promise{:"helloworld"}asyncfunctionfoo(){letreslut=await"helloworld"//await正常异步工作，这里只是一个演示console.log(result)}foo()//helloworldfunctiontimeout(){returnnewPromise(resolve=>{setTimeout(()=>{console.log(1)resolve()},1000)})}asyncfunctionfoo(){timeout()console.log(2)}foo()//21秒后-->1functiontimeout(){returnnewPromise(resolve=>{setTimeout(()=>{console.log(1)resolve()},1000)})}asyncfunctionfoo(){awaittimeout()console.log(2)}foo()//12二、结合Promise对象回调：resolve中的参数作为await函数的返回值timeout(){returnnewPromise(resolve=>{setTimeout(())=>{//console.log(1)resolve(1)},1000)})}asyncfunctionfoo(){constres=awaittimeout()//resolve中的参数作为await的返回值console.log(res)//1console.log(2)}foo()第三，await必须是在异步函数中，就像yield关键字必须在生成器函数内部一样functiontimeout(){returnnewPromise((resolve,reject)=>{setTimeout(()=>{//console.log(1)//resolve(1)reject("fail")},1000)})}asyncfunctionfoo(){returnawaittimeout()//awaitfunctionisusedinsideasyncfunction}foo().then(res=>{}).catch(err=>{console.log(err)})//fail4.再次封装ajax：通过封装原生ajax实现功能（目录结构：当前文件下有一个static文件夹，一共有三个文件夹a.json、b.json、c.json中的文件每个文件都是一个对象，分别是{a:"Iama"},{b:"Iamb"},{c:"Iamc"})//ajax.jsfunctionajax(url,callback){//1.创建XMLHttpRequest对象varxmlhttpif(window.XMLHttpRequest){xmlhttp=newXMLHttpRequest()}else{//兼容早期浏览器xmlhttp=newActiveXObject('Microsoft.XMLHTTP')}//2.发送请求xmlhttp.open('GET',url,true)xmlhttp.send()//3.服务器响应xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState===4&&xmlhttp.status===200){varobj=JSON.parse(xmlhttp.responseText)//console.log(obj)callback(obj)}}}exportdefaultajax//index.jsimportajaxfrom"./ajax"functionrequest(url){returnnewPromise(resolve=>{ajax(url,res=>{resolve(res)})})}asyncfunctiongetData(){constres1=awaitrequest("static/a.json")console.log(res1)constres2=awaitrequest("static/b.json")console.log(res2)constres3=awaitrequest("static/c.json")console.log(res3)}getData()//{a:"我是a"}{b:"我是b"}{c:"我是c》}相信看完上面的例子，你会对Vue的源码有更深入的了解，以后的代码也会写得更优雅、更易读、更容易维护。狮子更近了一步
