上文写了下Promise, 有些时候我们一个流程里使用了太多的promise,会发现then也一大堆,仿佛又回到了之前的回调地狱,理解起来也没那么容易。
aync的用法很简单,以一个函数为例, async放到定义前面即可
async function a() {
console.log(1)
}
async 执行后返回的是一个Promise对象
await的意思就是同步,而且await必须在async标记的函数里面才能使用,不然会报错
Promise函数前面加上await,说明等待,需要这个代码执行完毕,才能执行下面的
async function a() {
console.log( await b())
// return 1
}
function b() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2)
}, 1000)
})
}
a() // 2
这样使用async await就能很好的解决Promise,then过多的问题了。
同时,使用的话,比如调两个接口,有一个接口必须需要前一个接口的值,这里就可以使用async await
function ajax1() {
return new Promise((resolve, reject) => {
const data = ajax('接口1', {params}).then((res) => {
}).data
resolve(data)
})
}
function ajax2(data) {
return new Promise((resolve, reject) => {
const data1 = ajax('接口1', {data}).then((res) => {
}).data
resolve(data1)
// resolve(data)
})
}
async function getData () {
const data = await ajax1()
await ajax2(data)
}
这样的话代码逻辑看起来也会比较清晰,阅读良好
只不过会有个小问题
如果某些接口返回数据比较慢的话,我们的页面可能加载速度会比较慢,毕竟await的时候,相当于同步,对js进程造成了阻塞,导致后面的代码无法运行。这个对性能还是会起到一定的负面作用。
这种问题的话,要么需要后端接口方对接口进行优化,要么自身解决(不做阐述,其实我也不会)