async/await 简单理解

async/await能够更适合与promise协同工作,实现异步功能。

JavaScript

0x00 async

async 关键词 声明在一个函数前,此函数将会返回一个 Promise

如果代码中有 return <非promise> 语句,JavaScript 会自动把返回的这个 value 包装成 promiseresolved 值。

/**
Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable);
*/
Promise.resolve('foo');//等价于如下
new Promise((resolve)=>{
    resolve('foo');
})
async function f(){
    return 1;
}
f().then(alert)

例子

async 确保函数返回一个 promise


0x01 await

await 只能在 async 标识函数的内部使用

async function f() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("done!"), 1000)
    });

    let result = await promise; // wait till the promise resolves (*)

    alert(result); // "done!"
}
f();

这个程序运行的时候,会在 let result = await promise的语句处,会停下来,直到
promise 返回一个值(1秒后),await 使得 js 执行等待,直到 promise 处理完成,然后将结果继续下去。

promise 前的 await关键词能够使得 js 等待,直到 promise 处理结束。

换句话说, await 只会等待 Promise 的异步


0x02 错误处理

promise 正常 resolveawait 正常返回结果,在 reject 情况下会抛出一个错误,类似throw

promisereject 抛出错误需要一段时间,await 会等待,因此使用 try{...} catch(err){...} 捕获语句错误。

async function f() {
    try {
        let response = await fetch('http://www.test.com/api/')
    } catch (err) {
        alet(err) // TypeError: failed to fetch
    }
}
f()

当然也可以 .catch(),常用第一种方法

async function f() {
    let response = await fetch('http://www.test.com/api/')
}
// f()变成了一个rejected的promise
f().catch(alert) // TypeError: failed to fetch

如此写异步就像同步代码一样,也避免了回调地狱。

Referencehttps://javascript.info/async-await

发表评论 / Comment

用心评论~