async + await 的理解和用法（Promise）

很酷的站长

发布于 2022-12-16 21:50:53

3.1K00

代码可运行

文章被收录于专栏：站长的编程笔记站长的编程笔记

运行总次数：0

代码可运行

1. 前言

1. 前言

async/await 是 ES7 提出的基于 Promise (ES6 中提出的) 的解决异步的最终方案

async + await 的作用: 简化 promise 的异步操作，把 promise 的异步操作编程变为同步的写法

async 将一个函数标记为异步函数，await 需要在异步函数中使用，标记当前操作是异步操作

async + await 必须配合 promise 使用，同时 async 和 await 必须一起使用。即 await 必须在 async 标记的函数中使用

2. 获取成功的结果

在 vue 脚手架和 uniapp 中经常使用的写法

function getProfile() {
    return new Promise((resolve, reject) => {
        // 使用定时器模拟接口请求
        setTimeout(() => {
            resolve({
                code: 200,
                msg: "用户信息",
                data: {
                    id: 1,
                    name: "liang"
                }
            })
        }, 3000);
    });
}
// 以下代码会执行 输入 123 再执行输出 res
function loadData() {
    getProfile().then(res => {
        console.log(res);
    })
    console.log(123);
}
// 下面写法会使 getProfile() 先执行
// 等待三秒后执行完再把得到的结果赋值给左边的res，然后再继续往下执行
async function loadData() {
    const res = await getProfile()
    console.log(res);
    console.log(123);
}

3. 获取失败的结果

当 Promise 抛出错误信息时，控制台默认是直接抛出异常的

reject('接口请求失败')

可以使用 try … catch 捕获 promise 抛出的错误

try {
    const res = await getProfile()
    console.log(res);
} catch (error) {
    console.log('error: ', error);
}

4. 多个 Promise 的场景

使用 Promise

Promise.all 的参数是一个数组，数组的每一项是一个返回的 promise 的函数调用

Promise.all([getProfile(), getProfile()]).then(res => {
console.log(res, 'res');
})

使用 await

因为 Promise.all 返回的也是一个 Promise，所以也可以使用 await

async function loadData() {
const res = await Promise.all([getProfile(), getProfile()])
console.log(res);
}

5. async 标记函数

使用 async 标记一个函数，那么当调用这个函数时，该函数会返回一个 promise 对象

如果没有在 async 函数中 return ，那么 promise 对象的 resolve 就是 undefined

如果在 async 函数中写了 return，那么 promise 对象的 resolve 就是 return 的值

如果 async 里的代码都是同步的，那么这个函数被调用就会同步执行

async function fn(){
  console.log('a')
}
fn()
console.log('b')
//a
//b

6. await 等待异步操作执行完成

右侧的表达式的结果就是 await 要等的东西，等到之后，对于 await 来说，分两个情况。是 promise 对象，不是 promise 对象

const res = await getProfile()

如果不是 promise 对象，await 会阻塞后面的代码，先执行 async 外面的同步代码，再回到 async 内部，把这个非 promise 的东西，作为 await 表达式的结果

function fn() {
    console.log(1)
    return 'this is return'
}
async function f1() {
    const res = await fn()
    console.log(2)
    console.log(res);
}
f1()
console.log(3)
//1
//3
//2
// this is return

如果 await 等到的是一个 promise 对象，await 也会暂停 async 后面的代码，先执行 async 外面的同步代码，等着 Promise 对象 fulfilled，然后把 resolve 的参数作为 await 表达式的运算结果

function fn() {
    console.log(1)
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('this is return')
        }, 1500);
    });
}
async function f1() {
    const res = await fn()
    console.log(2)
    console.log(res);
}
f1()
console.log(3)
//1
//3
//2
// this is return