美文网首页
浅谈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

    浅谈Async/Await用 async/await 来处理异步 async和await async:声明一个异步...

  • 浅谈async/await

    ES7的async/await语法在2016年就已经提出来了,惭愧的是我最近才接触使用,,下面来聊聊 解决了什么问...

  • 浅谈async/await

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

  • ES8(一) —— async&await

    目录 async和普通函数的区别 await async/await处理多回调异步 async和await必须配合...

  • async

    async/await特点 async/await更加语义化,async是“异步”的简写,async functi...

  • ES6中的好东西

    1 Await/Async 前端的回调时代我没有赶上,我赶上的是await/async时代。await和async...

  • Vue接口调用方式(三)async/await用法

    async/await用法 1. async/await的基本用法 async/await是ES7引入的新语法,可...

  • nodejs async 使用简介

    async await node async 使用

  • JS 中的 async/await

    async/await 是什么? async/await 是 ES2017 中新增的异步解决方案; await 只...

  • ES2017 async 函数

    async 和 await 在干什么 每个名称都有意义async : 异步await: async wait简...

网友评论

      本文标题:浅谈async/await

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