简单理解JavaScript 的async/await

什么是Async/Await?

  • async 函数 : 是 Generator 函数的语法糖
  • async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
  • async/await与Promise一样,是非阻塞的
  • async函数返回的是 Promise 对象,可以作为await命令的参数

二、语法

1、返回 Promise 对象

async函数返回一个 Promise 对象。

async函数内部return语句返回的值,会成为then方法回调函数的参数。

async function f() {
    return ‘hello world‘;
}

f().then(v => console.log(v))
// "hello world"

async函数内部抛出错误,会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到

async function f() {
    throw new Error(‘出错了‘);
}

f().then(
    v => console.log(v),
    e => console.log(e)
)
// Error: 出错了

2、Promise对象的状态变化

只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数。

async function getTitle(url) {
    let response = await fetch(url);
    let html = await response.text();
    return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle(‘https://tc39.github.io/ecma262/‘).then(console.log)
// "ECMAScript 2017 Language Specification"

3、await命令

正常情况下,await命令后面是一个 Promise 对象。如果不是,会被转成一个立即resolve的 Promise 对象。

await命令后面的 Promise 对象如果变为reject状态,则reject的参数会被catch方法的回调函数接收到。

只要一个await语句后面的 Promise 变为reject,那么整个async函数都会中断执行

async function f() {
    await Promise.reject(‘出错了‘);
    await Promise.resolve(‘hello world‘); // 不会执行
}

有时,我们希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行。

async function f() {
    try {
        await Promise.reject(‘出错了‘);
    } catch(e) {
    }
    return await Promise.resolve(‘hello world‘);
}

f()
.then(v => console.log(v))
// hello world

另一种方法是await后面的 Promise 对象再跟一个catch方法,处理前面可能出现的错误。

async function f() {
    await Promise.reject(‘出错了‘)
    .catch(e => console.log(e));
    return await Promise.resolve(‘hello world‘);
}

f()
.then(v => console.log(v))
// 出错了
// hello world

4、错误处理

如果await后面的异步操作出错,那么等同于async函数返回的 Promise 对象被reject。

防止出错的方法,将其放在try...catch代码块之中。

async function f() {
    try {
        await new Promise(function (resolve, reject) {
            throw new Error(‘出错了‘);
        });
    } catch(e) {
    }
    return await(‘hello world‘);
}
如果有多个await命令,可以统一放在try...catch结构中。

async function main() {
    try {
        const val1 = await firstStep();
        const val2 = await secondStep(val1);
        const val3 = await thirdStep(val1, val2);
        console.log(‘Final: ‘, val3);
    }
    catch (err) {
        console.error(err);
    }
}

总结

函数前的 async 关键字有两个作用:

  1. 总是返回 promise。
  2. 允许在其中使用 await。

在 promise 之前的 await 关键字,使 JavaScript 等待 promise 被处理,然后:

  1. 如果有 error,就会产生异常,就像在那个地方调用了 throw error一样。
  2. 否则,就会返回值,我们可以给它分配一个值。

原文地址:https://www.cnblogs.com/Mr-Tao/p/11108592.html

时间: 2024-10-08 12:04:11

简单理解JavaScript 的async/await的相关文章

【前端_js】理解 JavaScript 的 async/await

async 和 await 在干什么 任意一个名称都是有意义的,先从字面意思来理解.async 是“异步”的简写,而 await 可以认为是 async wait 的简写.所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成. 理解 JavaScript 的 async/await 原文地址:https://www.cnblogs.com/leiblog/p/11057896.html

理解 JavaScript 的 async/await

随着 Node 7 的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await.我第一次看到这组关键字并不是在 JavaScript 语言里,而是在 c# 5.0 的语法中.C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用,因此我还很悲伤了一阵--为了要兼容 XP 系统,我们开发的软件不能使用高于 4.0 版本的 .NET Framework. 我之前在<闲谈异步调用"扁平"化> 中就谈到了这个问题.无论

【转】6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)

原文:https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9 ---------------------------------------------------------------------------------------------- 6 Reasons Why JavaScript's Async/Await Blows Prom

JavaScript 的 Async\/Await 完胜 Promise 的六

参考:http://www.10tiao.com/html/558/201705/2650964601/1.html Node 现在从版本 7.6 开始就支持 async/await 了. 简介: Async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. Async/await 实际上是建立在 promise 的基础上.它不能与普通回调或者 node 回调一起用. Async/await 像 promise 一样,也是非阻塞的. Async/await 让

理解koa2 之 async + await + promise

koa是下一代的Node.js web框架. 我们首先使用koa来实现一个简单的hello world吧!假如目前的项目结构如下: ### 目录结构如下: koa-demo1 # 工程名 | |--- app.js # node 入口文件 | |--- node_modules # 项目依赖包 | |--- package.json app.js 代码如下: const Koa = require('koa'); const app = new Koa(); app.use(async (ctx

JavaScript 的 async/await

随着 Node 7 的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await. 异步编程的最高境界,就是根本不用关心它是不是异步. async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案. async 和 await 起了什么作用 async 起什么作用 这个问题的关键在于,async 函数是怎么处理它的返回值的! 我们当然希望它能直接通过 return 语句返回我们想要的值,但是如果真是这样,似乎就没 await 什么事了.所以,写段代码来试试,看它到

[转] Understanding JavaScript’s async await

PS:Promise的用处是异步调用,这个对象使用的时候,call then函数,传一个处理函数进去,处理异步调用后的结果 Promise<Action>这样的对象呢,异步调用后的结果是一个Action,传到处理函数里 async/await的作用是,不需要写then函数了,相当于与自动帮你写,你只需要把异步调用后的结果保存下来就可以了 https://ponyfoo.com/articles/understanding-javascript-async-await http://liubin

简单理解javascript中的原型对象,实现对之间共享属性和行为

javascript中提供了构造函数,能够方便的创建对象.典型的构造函数如下: function Person(name, age) { this.name = name; this.age = age; this.say = function () { return this.name + ',' + this.age;; } 之后就可以用new和构造函数创建多个对象.javascript中,类的不同对象之间,属性和方法都是独立的.什么意思呢?java中类的不同对象之间,成员变量是独立的(每个

简单理解javascript的原型prototype

原型和闭包是Js语言的难点,此文主要讲原型. 每一个方法都有一个属性是 prototype 每一个对象都有一个属性是 _proto_ 一旦定义了原型属性或原型方法,则所有通过该构造函数实例化出来的所有对象,都继承了这些原型属性和原型方法,这是通过内部的_proto_链来实现的. /* Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型.这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型. 每一个方法都有一个属性叫