es6 Async / Await
async/awaitf这种特殊的语法可以更舒适地与promise协同工作。
async-await是promise和generator的语法糖。
async-await 是建立在 promise机制之上的,并不能取代其地位。
Async的使用:
使用方法:
放置在函数的前面:async function demoFun () { return 1 }
含义:
这个函数总是返回一个promise.
promise中是没有return返回值的,只有resolve()成功回调与reject()失败回调
如果代码中有return (也就是非promise语句),JavaScript会自动把返回的这个value值包装成promise的resolved值。
如上示例中,返回为resolve为1的promise对象
两种写法:
方法定义:
async getData () {
return 1
},
async getDate () {
return Promise.resolve(2)
}
调用:
this.getData().then(res => {
alert(res)
})
this.getDate().then(res => {
alert(res)
})
Await
async确保了函数返回一个promise,即使其中包含非promise。
关键词await,只能在async函数里使用。
语法:
let value = await promise
作用:
关键词await可以让JS进行等待,直到一个promise执行并返回它的结果,JS才会继续往下执行。
这并不会占用任何的cpu资源,因为引擎能够同时做其他工作:执行其他脚本,处理事件等等。
一个await仅对应包裹他的一层async,await中不能包裹await,无论await修饰的是一个async方法或最外层方法被async修饰
两种写法:
方法定义:
async getPromiseResult () {
return await new Promise (function (resolve, reject) {
resolve("done")
})
},
async getPromiseAnswer () {
let promise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('setTimeout dome !')
}, 2000)
})
let result = await promise
return result;
}
调用:
this.getPromiseResult().then(res => {
alert(res)
})
this.getPromiseAnswer().then(res => {
alert(res)
})
注意:
不能在常规函数里使用await
在非async函数里使用await,会报语法错误:syntax error
链式调用:
async getChainResult () {
let _this = this
await _this.getData().then(res => {
_this.getDate().then(ress => {
alert(ress)
})
alert(res)
})
return 3
}
与promise.then一样,await也允许使用thenable对象(那些具有可调用的then方法的对象)。
同样,第三方对象可能不是一个promise,但是promise的兼容性表示,如果它支持.then方法,那么它就能用于await。
即:await不仅只能在async中使用,而且描述的对象必须有可调用.then方法
一个class方法同样能够使用async,只需要将async放在它之前就可以
class Waiter {
async wait () {
return await Promise.resolve(1)
}
}
new Waiter().wait().then(alert) // 1
错误处理:
如果一个promise获取到了目标结果,则通过resolve进行返回结果,
如果没有获取到目标结果,或者出现异常错误,则通过reject将非目标结果或是异常进行抛出。
当然可以通过try..catch快速捕捉到异常,但如果是非目标结果,try...catch是捕捉不到了,
但可以通过在.then()后缀.catch()去捕捉非目标结果,同时.catch()还能捕捉错误异常
resolve 与 reject 在同一个promise中只能触发一个,且只能触发一次,优先触发resolve
当使用async/await,如无需返回值可以不使用.then,因为await总是等待着执行结果.
如果依赖返回值,还是需要使用依靠.then的返回对象获取返回值
for循环写法:
// 正常 for 循环 await必须在async函数的上下文中的。
async function forDemo() {
let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i ++) {
await arr[i];
}
}
forDemo();//正常输出