async和await

383 阅读1分钟

async

mdn上说:async function 声明用于定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数,它会通过一个隐式的 Promise 返回其结果。

简单来说,如果你在一个函数前面使用了async关键字,那么这个函数就会返回一个promise。如果你返回的不是一个promise,JavaScript也会自动把这个值"包装"成Promise的resolve值。例如:

// 返回一个promise
async function aa() {
    return new Promise(resolve => {
        setTimeout(function(){
            resolve('aaaaaa');
        }, 1000);
    });
}

aa().then(res => {
    console.log(res); // 1s后输出 'aaaaaa'
});

typeof aa === 'function'; // true
Object.prototype.toString(aa) === '[object AsyncFunction]'; // true
Object.prototype.toString(aa()) === '[object Promise]'; // true



// 返回一个非promise
async function a() {
    return 1;
}
const b = a(); 
console.log(b); // Promise {<resolved>: 1}

a().then(res => {
    console.log(res); // 1
})

await

  • await 操作符用于等待一个Promise 对象。
  • 它只能在异步函数 async function 中使用。
  • await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。
  • 若 Promise 正常处理(fulfilled),其回调的resolve函数参数作为 await 表达式的值,继续执行 async function。
  • 若 Promise 处理异常(rejected),await 表达式会把 Promise 的异常原因抛出。
  • 另外,如果 await 操作符后的表达式的值不是一个 Promise,则返回该值本身。
const p = function() {
    return new Promise(resolve => {
        setTimeout(function(){
            resolve(1);
        }, 1000);
    });
};

const fn = async function() {
    const res = await p();
    console.log(res); 
    const res2 = await 2;
    console.log(res2);
};

fn(); // 1s后,会输出1, 紧接着,会输出2


// 把await放在try catch中捕获错误
const p2 = function() {
    return new Promise(resolve => {
        console.log(ppp);
        resolve();
    });
};

const fn2 = async function() {
    try {
        await p2();
    } catch (e) {
        console.log(e); // ppp is not defined
    }
};

fn2();