async 和 await（详解）

一、async 和 awaitpromise使用.then链式调用但也是基于回调函数async/await更加优雅的异步编程的写法1.它是消灭异步回调的终极武器2.它是同步语法也就是用同步的写法写异步的代码案例1promise异步加载图片分别使用 .then 和 await 来获取结果区别1.await 完全没有回调函数2.await 是同步写法异步操作3.await 后面不仅仅可以接 promise对象还可以接 async 函数//里面函数为AJAX因此是异步任务letloadImg(url){constpnewPromise((resolve,reject){letnewImgdocument.createElement(img)newImg.srcurl newImg.onloadfunction(){resolve(newImg)}newImg.errorfunction(){reject(newError(Could not load Image at url))}})returnp}//通过 .then 来获取结果loadImg(url1).then((img){console.log(img.width,img.height)document.body.appendChild(img)returnloadImg(url2)}).then((img){console.log(img.width,img.height)document.body.appendChild(img)}).catch((err){console.log(err)})//使用 async 和 await 的方法来写立即执行函数(asyncfunction(){// loadImg(url1) 返回 promise 对象// await 可以拿到从 resolve 传递过来的 dom 对象constimg1awaitloadImg(url1)document.body.appendChild(img1)constimg2awaitloadImg(url2)document.body.appendChild(img2)})()//await 接 async 函数asyncfunctionloadImg1(){constimg1awaitloadImg(url1)returnimg1}(asyncfunction(){//img1可以拿到 resolve 里面的值constimg1awaitimg1 document.body.appendChild(img1)})()二、async/await 和 promise的关系async/await 是消灭异步回调的终极武器但和Promise并不排斥两者相辅相成执行 async 函数返回的是 Promsie 对象await 相当于 Promise 的 then then指的是成功不指失败try…catch 可捕获异常代替了 Promise的 catch1.asyncasyncfunctionfn(){return100}console.log(fn())//返回一个成功态的promise对象result 是 100fn().then(data{console.log(data)})// 1002.awaitawait 后面接 Promise1.await p1相当于是p1.then并且只是成功态的then2.await 和 then 的区别就是then还需要传回调进去但 await 可以直接得到值(asyncfunction(){constp1Promise.resolve(300)//一个成功态的promise对象且传了result为300constresawaitp1// return 值console.log(res)// 300})await 和 .then 的区别fn().then(data{console.log(data)})//await直接通过返回值来接收daita, return dataconstresawaitfn()await接数值1.await后面跟的不是promise对象而是数值时会自动包装成成功态的promise对象2.并且传值给 resolve 为400(asyncfunction(){constresawait400//Promise.resolve400console.log(res)//400})()await接 async 函数(asyncfunction(){constresawaitfn()//fn()会返回promise对象原理一样console.log(res)//400})()await接promise 为空1.什么都打印不出来2.因为 new Promise 里面没有任何状态改变而await一直在等待状态改变3.只有状态改变了await才会允许执行后面的代码(asyncfunction(){constpnewPromise((){})constresawaitp console.log(res)console.log(success)})()await接 promise 为 error1.会出现报错2.await相当于成功态的 .then ,都没有成功因此不会执行后面的代码3.因为JS是单线程的4.解决使用 try…catch 偷偷解决掉 error保证代码运行——捕获到错误就不会影响后面的输出(asyncfunction(){constpPromise.reject(error)constresawaitp console.log(res)console.log(success)})()//什么都打印不出来(asyncfunction(){constpPromise.reject(error)try{constresawaitp console.log(res)}catch(error){console.log(error)}console.log(success)})()//打印出 error 和 success三、执行顺序代码中存在 await则需要等待该行执行完才执行下面的代码functiontimeout(){returnnewPromise(resolve{setTimeout((){console.log(1)resolve()//成功态})})}//情况一asyncfunctionfn(){timeout()console.log(2)}fn()//打印出 2 一秒后 1//情况2asyncfunctionfn(){awaittimeout()console.log(2)}fn()//1秒后打印出 1 2//写法二functiontimeout(){returnnewPromise(resolve{setTimeout((){resolve(1)//成功态传递参数1})})}asyncfunctionfn(){constresawaittimeout()//需要一个变量来接收await return的参数console.log(res)console.log(2)}fn()//1秒后打印出 1 2四、async 和 await 的实质Promise一般用来解决层层嵌套的回调函数async/await 是消灭异步回调的终极武器JS还是单线程还是得有异步还是得基于 event loop轮询机制async/await 只是一个语法糖案例2 请求多份数据但后一份数据的请求必须依赖上一份数据的请求结果解决1.可以使用promise的.then 链式层层调用2.也可以使用 async/await 用同步的代码来解决异步问题——依次获取数据完全是同步的写法——await会等待该行代码完全运行才执行后面的代码asyncfunctiongetDate(){constres1awaitrequest(./a.json)console.log(res1)constres1awaitrequest(./b.json)console.log(res2)constres1awaitrequest(./c.json)console.log(res3)}