最近项目涉及到一个需求,两个异步请求,第二个请求需要等到第一个异步请求里的数据返回后才能发送,于是这里初步用到了async / await 。现在记录下
async/await 语法可以更舒适的与promise协同工作。
async 被放置在一个函数的前面(函数前面的async
一词意味着这个函数总是返回一个promise,如果代码中有return <非promise>
语句,JavaScript会自动把返回的这个value值包装成promise的resolved值。)
async function f() { return 1 }
关键词await可以让JavaScript进行等待,直到一个promise执行并返回它的结果,JavaScript才会继续往下执行。
// 只能在async函数内部使用 let value = await promise
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('done!'), 1000)
})
let result = await promise // 直到promise返回一个resolve值(*)
alert(result) // 'done!'
}
f()
await 字面上使得JavaScript等待,直到promise处理完成,
这里再加入一个新用上的知识点 try / catch
如果一个promise正常resolve,那么 await 返回这个结果,但是在reject的情况下会抛出一个错误,就好像在那一行有一个throw语句一样。
在真实的使用场景中,promise在reject抛出错误之前可能需要一段时间,所以 await 将会等待,然后才抛出一个错误。
我们可以使用try-catch语句捕获错误,就像在正常抛出中处理异常一样:
async function f() { try { let response = await fetch('http://no-such-url') } catch (err) { alet(err) // TypeError: failed to fetch } } f()
如果我们不使用try-catch,然后async函数f()的调用产生的promise变成reject状态的话,我们可以添加.catch去处理它:
async function f() { let response = await fetch('http://no-such-url') } // f()变成了一个rejected的promise f().catch(alert) // TypeError: failed to fetch
放在一个函数前的async有两个作用:
1.使函数总是返回一个promise
2.允许在这其中使用await
promise前面的await关键字能够使JavaScript等待,直到promise处理结束。然后:
1.如果它是一个错误,异常就产生了,就像在那个地方调用了throw error一样。
2.否则,它会返回一个结果,我们可以将它分配给一个值
该资源来自于https://segmentfault.com/a/1190000013292562?utm_source=channel-newest