ES6中的async、await函数

async是为了解决异步操作,其实是一个语法糖,使代码书写更加简洁。

1. async介绍

async放在一个函数的前面,await则放在异步操作前面。async代表这个函数中有异步操作需要等待结果,在一个async函数中可以存在多个await,也就是多个异步操作,但是需要注意的是await是一个一个发生的,执行完一个异步操作才会执行下一个异步操作,不是并发执行的。

async结果返回一个Promise对象,async结果状态变化可以由三种情况改变

第一种:函数体内有return,return的结果可以通过then方法获取。

第二种:如果await中的异步操作状态变为reject,则会将错误外抛,改变async的状态变为reject。

第三种:当所有await都执行完,并且状态为resolved,则状态会变为resolved,也就是只有所有异步操作执行完,才会执行then方法获取。

2. async可以使用在哪里?

  • 函数声明中
js 复制代码
async function fun() {}
  • 函数表达式
js 复制代码
const fun = async function() {}
  • 对象的方法
js 复制代码
let obj = { async foo() {} };
obj.foo().then()
  • Class的方法
js 复制代码
class Person{
    async age(num) {
        const a = await foo();
    }
}
const p1 = new Person();
p1.age(10).then();
  • 箭头函数
js 复制代码
const foo = async () => {};

3. 使用

js 复制代码
const f1 = async () => {
    await ab();
}
f1.then((resolve) => {
    console.log(resolve);
})

4. 错误处理

await后面一个Promise对象,如果不是则会立即转成Promise对象。

假如有问题的时候会向外抛出错误,会导致async状态变为reject。

假如我们不需要往外抛错误,可以使用try...catch或者在异步操作中添加catch方法,让错误及时处理掉,不往外抛。

js 复制代码
async Function f1 () {
    await Promise.reject('出错了');
    await Promise.resolve('hello word'); // 不会执行了
}

由于抛出错误了,会整个async函数都会中断执行。

js 复制代码
// 改成 第一种解决方法

async Function f1 () {
    try {
        await Promise.reject('出错了');
    }catch (err){
    }
    return await Promise.resolve('hello word');
}

f1.then(res => console.log(res)); // hello word

// 第二种解决方法

async Function f1 () {
    await Promise.reject('出错了').catch((err) => {
        console.log(err);
    })
    return await Promise.resolve('hello world');
}
f1.then(res => console.log(res)); // 出错了  hello word

5. 并发执行代码

正常情况下当async函数内部都多个await时,会执行完一个异步操作才会执行下一个异步操作,是继发执行,而不是并发执行,这样会很慢。

如果await后面的异步操作没有关联的话,则可以完全同时触发。

  • 第一种使用Promise.all()方法
js 复制代码
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
  • 第二种执行方法后await
js 复制代码
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise();
let bar = await barPromise();

这样会同时触发异步操作,缩短执行时间。

  • 第三种 for循环、不能map循环
js 复制代码
async function dbFuc (db) {
    let docs = [{}, {}, {}];
    let promises = docs.map(docs => db.post(doc));
    let results = [];
    for (let promise of promisees) {
        results.push(await promise);
    }
    console.log(results);
}
相关推荐
bjzhang751 分钟前
使用 HTML + JavaScript 实现文件树
javascript·html·文件树
掘金安东尼10 分钟前
⏰前端周刊第 452 期(2026年2月2日-2月8日)
前端·javascript·github
ArkPppp14 分钟前
NestJS全栈实战笔记:优雅处理 Entity 与 DTO 的映射与字段过滤
javascript·nestjs
钟智强27 分钟前
React2Shell:CVE-2025-66478 Next.js 远程执行漏洞深度分析与代码剖析
开发语言·javascript·ecmascript
Dragon Wu32 分钟前
Electron Forge集成React Typescript完整步骤
前端·javascript·react.js·typescript·electron·reactjs
华仔啊36 分钟前
jQuery 4.0 发布,IE 终于被放弃了
前端·javascript
bugcome_com1 小时前
阿里云 OSS C# SDK 使用实践与参数详解
阿里云·c#
空白诗1 小时前
高级进阶 React Native 鸿蒙跨平台开发:slider 滑块组件 - 进度条与评分系统
javascript·react native·react.js
晓得迷路了1 小时前
栗子前端技术周刊第 116 期 - 2025 JS 状态调查结果、Babel 7.29.0、Vue Router 5...
前端·javascript·vue.js
How_doyou_do1 小时前
执行上下文、作用域、闭包 patch
javascript