Async/await学习：写在前面渣渣新人的首篇外文文章翻译

Async/await

写在前面

渣渣新人的首篇外文文章翻译&＃xff01;&＃xff01;存在错误可能会很多&＃xff0c;如有错误&＃xff0c;烦请各位大大指正出来&＃xff0c;感谢&＃xff01;

本篇为翻译&＃xff01;

本篇为翻译&＃xff01;

本篇为翻译&＃xff01;

Async/await

有一种特殊的语法可以更舒适地与promise协同工作&＃xff0c;它叫做async/await&＃xff0c;它是非常的容易理解和使用。

Async functions

让我们先从async关键字说起&＃xff0c;它被放置在一个函数前面。就像下面这样&＃xff1a;

async function f() {

return 1

}

函数前面的async一词意味着一个简单的事情&＃xff1a;这个函数总是返回一个promise&＃xff0c;如果代码中有return 语句&＃xff0c;Javascript会自动把返回的这个value值包装成promise的resolved值。

例如&＃xff0c;上面的代码返回resolved值为1的promise&＃xff0c;我们可以测试一下&＃xff1a;

async function f() {

return 1

}

f().then(alert) // 1

我们也可以显式的返回一个promise&＃xff0c;这个将会是同样的结果&＃xff1a;

async function f() {

return Promise.resolve(1)

}

f().then(alert) // 1

所以&＃xff0c;async确保了函数返回一个promise&＃xff0c;即使其中包含非promise。够简单了吧&＃xff1f;但是不仅仅只是如此&＃xff0c;还有另一个关键词await&＃xff0c;只能在async函数里使用&＃xff0c;同样&＃xff0c;它也很cool。

Await

语法如下&＃xff1a;

// 只能在async函数内部使用

let value &＃61; await promise

关键词await可以让Javascript进行等待&＃xff0c;直到一个promise执行并返回它的结果&＃xff0c;Javascript才会继续往下执行。

以下是一个promise在1s之后resolve的例子&＃xff1a;

async function f() {

let promise &＃61; new Promise((resolve, reject) &＃61;> {

setTimeout(() &＃61;> resolve(&＃39;done!&＃39;), 1000)

})

let result &＃61; await promise // 直到promise返回一个resolve值(*)

alert(result) // &＃39;done!&＃39;

}

f()

函数执行到(*)行会‘暂停’&＃xff0c;当promise处理完成后重新恢复运行&＃xff0c; resolve的值成了最终的result&＃xff0c;所以上面的代码会在1s后输出&＃39;done!&＃39;

我们强调一下&＃xff1a;await字面上使得Javascript等待&＃xff0c;直到promise处理完成&＃xff0c;

然后将结果继续下去。这并不会花费任何的cpu资源&＃xff0c;因为引擎能够同时做其他工作&＃xff1a;执行其他脚本&＃xff0c;处理事件等等。

这只是一个更优雅的得到promise值的语句&＃xff0c;它比promise更加容易阅读和书写。

不能在常规函数里使用await

如果我们试图在非async函数里使用await&＃xff0c;就会出现一个语法错误&＃xff1a;

function f() {

let promise &＃61; Promise.resolve(1)

let result &＃61; await promise // syntax error

}

如果我们忘记了在函数之前放置async&＃xff0c;我们就会得到这样一个错误。如上所述&＃xff0c;await只能在async函数中工作。

让我们来看promise链式操作一章中提到的showAvatar()例子&＃xff0c;并用async/await重写它。

1.我们需要将.then()替换为await

2.此外&＃xff0c;我们应该让函数变成async&＃xff0c;这样await才能够工作

async function showAvatar() {

// read our JSON

let response &＃61; await fetch(&＃39;/article/promise-chaining/user.json&＃39;)

let user &＃61; await response.json()

// read github user

let githubResponse &＃61; await fetch(&＃96;https://api.github.com/users/${user.name}&＃96;)

let githubUser &＃61; await githubResponse.json()

// 展示头像

let img &＃61; document.createElement(&＃39;img&＃39;)

img.src &＃61; githubUser.avatar_url

img.className &＃61; &＃39;promise-avatar-example&＃39;

documenmt.body.append(img)

// 等待3s

await new Promise((resolve, reject) &＃61;> {

setTimeout(resolve, 3000)

})

img.remove()

return githubUser

}

showAvatar()

相当的简洁和易读&＃xff0c;比以前的要好得多。

await不能工作在顶级作用域

那些刚开始使用await的人们老是忘记这一点&＃xff0c;那就是我们不能将await放在代码的顶层&＃xff0c;那样是行不通的&＃xff1a;

// 顶层代码处syntax error

let response &＃61; await fetch(&＃39;/article/promise-chaining/user.json&＃39;)

let user &＃61; await response.json()

所以我们需要将await代码包裹在一个async函数中&＃xff0c;就像上面的例子一样。

await接受thenables(好吧我这个渣渣并不知道thenables该如何翻译&＃xff0c;有人能告知吗&＃xff1f;)

就像promise.then&＃xff0c;await也允许使用thenable对象(那些具有可调用的then方法的对象)。同样&＃xff0c;第三方对象可能不是一个promise&＃xff0c;但是promise的兼容性表示&＃xff0c;如果它支持.then方法&＃xff0c;那么它就能用于await。

例如&＃xff0c;这里await接受了new Thenable(1)

class Thenable {

constructor(num) {

this.num &＃61; num

}

then(resolve, reject) {

alert(resolve) // function() {native code}

// 1000ms后将this.num*2作为resolve值

setTimeout(()&＃61;> {resolve(this.num * 2), 1000})

}

}

async function(f) {

// 等待1s&＃xff0c;result变为2

let result &＃61; await new Thenable(1)

alert(result)

}

f()

如果await得到了一个带有then方法的非promise对象&＃xff0c;它将会调用提供原生函数resolve、reject作为参数的方法&＃xff0c;然后await一直等待&＃xff0c;直到他们其中的一个被调用(在上面的例子它发生在(*)行)。

async方法

一个class方法同样能够使用async&＃xff0c;只需要将async放在它之前就可以

就像这样&＃xff1a;

class Waiter {

async wait () {

return await Promise.resolve(1)

}

}

new Waiter().wait().then(alert) // 1

这里的意思是一样的&＃xff1a;它确保了返回值是一个promise&＃xff0c;支持await

错误处理

如果一个promise正常resolve&＃xff0c;那么await返回这个结果&＃xff0c;但是在reject的情况下会抛出一个错误&＃xff0c;就好像在那一行有一个throw语句一样。

async function f() {

await Promise.reject(new Error(&＃39;whoops!&＃39;))

}

和下面一样

async function f() {

throw new Error(&＃39;Whoops!&＃39;)

}

在真实的使用场景中&＃xff0c;promise在reject抛出错误之前可能需要一段时间&＃xff0c;所以await将会等待&＃xff0c;然后才抛出一个错误。

我们可以使用try-catch语句捕获错误&＃xff0c;就像在正常抛出中处理异常一样&＃xff1a;

async function f() {

try {

let response &＃61; await fetch(&＃39;http://no-such-url&＃39;)

} catch (err) {

alet(err) // TypeError: failed to fetch

}

}

f()

如果发生了一个错误&＃xff0c;控制会跳转到catch块。当然我们也能够捕获多行语句&＃xff1a;

async function f() {

try {

let response &＃61; await fetch(&＃39;/no-user-here&＃39;)

let user &＃61; await response.json()

} catch(err) {

// 在fetch和response.json中都能捕获错误

alert(err)

}

}

f()

如果我们不使用try-catch&＃xff0c;然后async函数f()的调用产生的promise变成reject状态的话&＃xff0c;我们可以添加.catch去处理它&＃xff1a;

async function f() {

let response &＃61; await fetch(&＃39;http://no-such-url&＃39;)

}

// f()变成了一个rejected的promise

f().catch(alert) // TypeError: failed to fetch

如果我们忘记添加.catch&＃xff0c;我们就会得到一个未被处理的promise错误(能够在控制台里看到它)&＃xff0c;这时我们可以通过使用一个全局的事件处理器去捕获错误&＃xff0c;就像在Promise链式操作一章讲的那样。

async/await和promise.then/catch

当我们使用async/await&＃xff0c;我们很少需要.then&＃xff0c;因为await总是等待着我们&＃xff0c;而且我们能够使用常规的try-catch而不是.catch&＃xff0c;这通常(并不总是)更方便。

但是在代码的顶层&＃xff0c;当我们在async函数的外部时&＃xff0c;我们在语法上是不能使用await的&＃xff0c;所以通常添加.then/catch去处理最终结果或者错误。

async/await能够与Promise.all友好的协作

当我们需要等待多个promise时&＃xff0c;我们可以将他们包装在Promise.all中然后使用await&＃xff1a;

// 直到数组全部返回结果

let results &＃61; await Promise.all([

fetch(url1),

fetch(url2),

...

])

如果发生了一个错误&＃xff0c;它就像普通情况一样&＃xff1a;从一个失败状态的promise到Promise.all&＃xff0c;然后变成了一个我们能够使用try-cathc去捕获的异常。

总结

放在一个函数前的async有两个作用&＃xff1a;

1.使函数总是返回一个promise

2.允许在这其中使用await

promise前面的await关键字能够使Javascript等待&＃xff0c;直到promise处理结束。然后&＃xff1a;

1.如果它是一个错误&＃xff0c;异常就产生了&＃xff0c;就像在那个地方调用了throw error一样。

2.否则&＃xff0c;它会返回一个结果&＃xff0c;我们可以将它分配给一个值

他们一起提供了一个很好的框架来编写易于读写的异步代码。

有了async/await&＃xff0c;我们很少需要写promise.then/catch&＃xff0c;但是我们仍然不应该忘记它们是基于promise的&＃xff0c;因为有些时候(例如在最外面的范围内)我们不得不使用这些方法。Promise.all也是一个非常棒的东西&＃xff0c;它能够同时等待很多任务。