async、await、promise三者是es6新增的关键字,async-await 是建立在 promise机制之上的,并不能取代其地位。
async: 作为一个关键字放在函数前面,用于表示函数是一个异步函数,因为async就是异步的异步,异步函数也就是意味着这个函数的执行不会阻塞后面代码的执行。
async基本语法:
async function func(){
............
}
func();
async表示函数异步,定义的函数会返回一个promise对象,可以使用then方法添加回调函数。
async function demo(){
return "hello async!";
}
console.log(demo());
demo().then((data) => {
console.log(data);
});
console.log('first exec');
/*
若 async 定义的函数有返回值,return 'hello async!';相当于Promise.resolve('hello async!'),没有声明式的 return则相当于执行了Promise.resolve();
Promise { 'hello async!' }
first exec
hello async!
*/
如果async内部发生错误,使用 throw 抛出,catch捕获
async function demo(flag){
if(flag){
return 'hello world!!';
}else{
throw "happend err!";
}
}
demo(0).then((val)=>{
console.log(val);
}).catch((val)=>{
console.log(val);
});
console.log('first exec');
/*
first exec
happend err!
*/
await: 是等待的意思,那么它在等待什么呢,它后面跟着什么呢?其实它后面可以放任何表达式,不过我们更多放的是一个promise对象的表达式。注意await关键字,只能放在async函数里面,不能单独使用。
async function Func() {
await Math.random();
}
Func();
/*
SyntaxError: await is only valid in async function
*/
await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西,但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。
function demo(){
return new Promise((resolve, reject) => {
resolve('hello promise!');
});
}
(async function exec(){
let res = await demo();
console.log(res); //hello promise!
})();
Promise : 对象用于表示一个异步操作的最终状态(完成或失败),以及该异步操作的结果值。它有三种状态:pending,resolved,rejected
1、Promise从pending状态改为resolved或rejected状态只会有一次,一旦变成resolve或rejected之后,这个Promise的状态就再也不会改变了。
2、通过resolve(retValue)传入的retValue可以是任何值,null也可以,它会传递给后面的then方法里的function去使用。通过rejected(err)传入的err理论上也是没有限制类型的,但我们一般都会传入一个Error,比如reject(new Error(“Error”))
await 若等待的是 promise 就会停止下来。业务是这样的,我有三个异步请求需要发送,相互没有关联,只是需要当请求都结束后将界面的 loading 清除掉即可.
function sleep(second) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('request done! '+ second + Math.random());
}, second);
})
}
async function bugDemo() {
console.log(await sleep(2000));
console.log(await sleep(3000));
console.log(await sleep(1000));
console.log('clear the loading~');
}
bugDemo();
/*
request done! 20000.9130830570273656
request done! 30000.5404841472398161
request done! 10000.26831404663460434
clear the loading~
*/
网友评论