[js]Es6 Async/await 的学习

原文文章地址：https://javascript.info/async-await

async function f() {
    return 1
}

async function f() {
    return 1
}
f().then(alert) // 1

async function f() {
    return Promise.resolve(1)
}
f().then(alert) // 1

// 只能在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
如果我们试图在非async函数里使用await，就会出现一个语法错误：

function f() {
   let promise = Promise.resolve(1)
   let result = await promise // syntax error
}

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

async function showAvatar() {
    // read our JSON
    let response = await fetch('/article/promise-chaining/user.json')
    let user = await response.json()
    // read github user
    let githubResponse = await fetch(`https://api.github.com/users/${user.name}`)
    let githubUser = await githubResponse.json()
    // 展示头像
    let img = document.createElement('img')
    img.src = githubUser.avatar_url
    img.className = 'promise-avatar-example'
    documenmt.body.append(img)
    // 等待3s
    await new Promise((resolve, reject) => {
        setTimeout(resolve, 3000)
    })
    img.remove()
    return githubUser
}
showAvatar()

await不能工作在顶级作用域
那些刚开始使用await的人们老是忘记这一点，那就是我们不能将await放在代码的顶层，那样是行不通的：

// 顶层代码处syntax error
let response = await fetch('/article/promise-chaining/user.json')
let user = await response.json()

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

await接受thenables（好吧我这个渣渣并不知道thenables该如何翻译，有人能告知吗？）
就像promise.then，await也允许使用thenable对象（那些具有可调用的then方法的对象）。同样，第三方对象可能不是一个promise，但是promise的兼容性表示，如果它支持.then方法，那么它就能用于await。
例如，这里await接受了new Thenable(1)

class Thenable {
   constructor(num) {
       this.num = num
   }
   then(resolve, reject) {
       alert(resolve) // function() {native code}
       // 1000ms后将this.num*2作为resolve值
       setTimeout(()=> {resolve(this.num * 2), 1000})
   }
}
async function(f) {
   // 等待1s，result变为2
   let result = await new Thenable(1)
   alert(result)
}
f()

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

async方法
一个class方法同样能够使用async，只需要将async放在它之前就可以
就像这样：

class Waiter {
   async wait () {
       return await Promise.resolve(1)
   }
}
new Waiter().wait().then(alert) // 1

这里的意思是一样的：它确保了返回值是一个promise，支持await

async function f() {
    await Promise.reject(new Error('whoops!'))
}

async function f() {
    throw new Error('Whoops!')
}

async function f() {
    try {
        let response = await fetch('http://no-such-url')
    } catch (err) {
        alet(err) // TypeError: failed to fetch
    }
}
f()

async function f() {
    try {
        let response = await fetch('/no-user-here')
        let user = await response.json()
    } catch(err) {
        // 在fetch和response.json中都能捕获错误
        alert(err)
    }
}
f()

async function f() {
    let response = await fetch('http://no-such-url')
}
// f()变成了一个rejected的promise
f().catch(alert) // TypeError: failed to fetch

async/await和promise.then/catch
当我们使用async/await，我们很少需要.then，因为await总是等待着我们，而且我们能够使用常规的try-catch而不是.catch，这通常（并不总是）更方便。
但是在代码的顶层，当我们在async函数的外部时，我们在语法上是不能使用await的，所以通常添加.then/catch去处理最终结果或者错误。

async/await能够与Promise.all友好的协作
当我们需要等待多个promise时，我们可以将他们包装在Promise.all中然后使用await：

// 直到数组全部返回结果
let results = await Promise.all([
   fetch(url1),
   fetch(url2),
   ...
])

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