美文网首页nodejavascript
async、await、promise

async、await、promise

作者: ysp123 | 来源:发表于2019-07-09 09:28 被阅读0次

    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~
    */
    

    相关文章

      网友评论

        本文标题:async、await、promise

        本文链接:https://www.haomeiwen.com/subject/qcanhctx.html