美文网首页
浅谈async/await

浅谈async/await

作者: 小丿贱 | 来源:发表于2019-10-11 15:33 被阅读0次

    简介

    使用async/await可以方便处理js中的异步情况,这是ES2017提出来的一对很好用的操作符。

    async

    函数开头加的一个关键字, 返回一个promise对象,如果函数直接返回一个值,则会用promise.resolve()包裹起来。

    async function demo() {
        return 'demo';
    }
    demo().then((data) => {
        console.log(data);
    })
    

    await

    await 意思是等待,等待的是一个表达式,可以是常量,变量,promise,函数等。

    function demo1() {
        return 'demo1';
    }
    const demo2 = 'demo2';
    
    async function test() {
        const a = await demo();
        const b = await demo1();
        const c = await demo2;
        console.log(`a:${a},b:${b},c:${c}`);
    }
    test();
    

    解惑

    • 问题1:await关键字只能在async函数中用吗?
      答:是的,await等待的是一个返回的结果,同步情况下,直接返回,异步情况下await会阻塞执行流程,直到结果返回,才会继续下面的代码。阻塞代码是意见很可怕的事,而async函数,返回的是一个promise对象,异步执行,所以await只能在async函数中使用,如果正常程序中使用,会造成整个程序阻塞,得不偿失。

    • 问题2:await只会等待一个结果,那么发生错误了该如何处理?
      答:我们知道promise返回的不仅仅只有resolve,还有一个reject的情况,所以我们可以用以下情况去处理错误:

    1. 用try-catch
    async function tryCatch() {
        try {
            await Promise.reject('tryCath');
        } catch(err) {
            console.log(err);
        }
    }
    tryCatch();
    
    1. 用promise的catch
    async function tryCatch1() {
        await Promise.reject('tryCath1').catch((err) => {
            console.log(err);
        });
    }
    tryCatch1();
    
    • 问题3:async/await和promise哪个好?
      答:个人觉得async/await比promise好多了,理由如下:
      (1)简洁,不需要写.then,也不需要定义多余的结果变量,避免嵌套
      (2)可以同时处理同步和异步错误,在promise中,try/catch不能处理JSON.parse的错误,因为在promise中,我们需要使用.catch,代码非常冗余
      (3)对于一些条件判断,数据可以直接返回进行比较,避免嵌套,更加直观
      (4)调试方便

    相关文章

      网友评论

          本文标题:浅谈async/await

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