async / await函数

Posted 2020-10-08 恒之心

一、async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

二、async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。（await命令后面，可以是Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作））

三、async 函数多做表达式

// 函数声明
async function fn() {}

// 函数表达式
const fn = async function () {};

// 对象的方法
let obj = { async fn() {} };
obj.fn().then()
// 箭头函数
const fn= async () => {};

View Code

四、Promise 对象的状态变化

async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

案例1

async function fn (){
    return await confirm(‘回调函数‘);
}
fn().then(res => {
    console.log(‘回调函数后执行结果！‘)
})

View Code

案例2

async function timeOut (ms) {
    await new Promise ((resolve, reject) => {
        setTimeout(resolve, ms)
    })
}
async function showRes (v,ms){
    await timeOut(3000)
    console.log(v);
}
showRes(‘3秒后输出结果‘, 3000);

View Code

案例3

//前一个异步出错了，不影响下一个函数执行
async function fn () {
    await Promise.reject(‘出错了！‘).catch(err => {
                console.log(err)
    })
    return await Promise.resolve(‘hello‘)
        
}
fn().then(value => {
    console.log(value)
})

View Code

案例4 （并行处理多个异步结果）

function show1() {
    return 1;
}
function show2() {
    return 2;
}
async function fn () {
    const [res1,res2] =await Promise.all([
        show1(),
        show2()
       ]);
    console.log(res1,res2)
}
fn()    

View Code

案例5 （错误处理）

async function fn() {
    try {
     await new Promise((resolve, reject) => {
              throw new Error(‘出错了‘);
     });
    } catch(e) {
    }
     return await(‘hello world‘);
}
fn().then(res=>{
    console.log(res) //hello world
})

View Code