// Async/await
// Async/await 是以更舒适的方式使用 promise 的一种特殊语法，同时它也非常易于理解和使用。
// Async function
// 让我们以 async 这个关键字开始。它可以被放置在一个函数前面，如下所示：
// 所以说，async 确保了函数返回一个 promise，也会将非 promise 的值包装进去。很简单，对吧？但不仅仅这些。还有另外一个叫 await 的关键词，它只在 async 函数内工作，也非常酷。
// function a1() {
// let primise = new Promise((resolve, reject) => {
// setTimeout(() => resolve("zzzz"),2000)
// })
// }
// async function f() {
// let resault = await a1()
// alert(resault)
// alert("xxxx")
// console.log("xxxx")
// return 1
// }
// f()
// 关键字 await 让 JavaScript 引擎等待直到 promise 完成（settle）并返回结果。
// 这里的例子就是一个 1 秒后 resolve 的 promise：
// async function f() {
// let promise = new Promise((resolve, reject) => {
// setTimeout(() => resolve("done!"), 1000)
// });
// let result = await promise; // 等待，直到 promise resolve (*)
// alert(result); // "done!"
// }
// f();
// 这个函数在执行的时候，“暂停”在了 (*) 那一行，并在 promise settle 时，拿到 result 作为结果继续往下执行。所以上面这段代码在一秒后显示 “done!”。
// 让我们强调一下：await 实际上会暂停函数的执行，直到 promise 状态变为 settled，然后以 promise 的结果继续执行。这个行为不会耗费任何 CPU 资源，因为 JavaScript 引擎可以同时处理其他任务：执行其他脚本，处理事件等。
// 相比于 promise.then，它只是获取 promise 的结果的一个更优雅的语法，同时也更易于读写。
// 不能在普通函数中使用 await
// 如果我们忘记在函数前面写 async 关键字，我们可能会得到一个这个错误。就像前面说的，await 只在 async 函数中有效。
// 让我们拿 Promise 链 那一章的 showAvatar() 例子，并将其改写成 async/await 的形式：
// 我们需要用 await 替换掉 .then 的调用。
// 另外，我们需要在函数前面加上 async 关键字，以使它们能工作。
// Error 处理
// 如果一个 promise 正常 resolve，await promise 返回的就是其结果。但是如果 promise 被 reject，它将 throw 这个 error，就像在这一行有一个 throw 语句那样。
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) {
alert(err); // TypeError: failed to fetch
}
}
// 如果有 error 发生，执行控制权马上就会被移交至 catch 块。我们也可以用 try 包装多行 await 代码：
async function xxx() {
try {
let r =await fetch(`sadsa`)
let user =await r.json()
}catch (error) {
alert(error)
}
}
// 如果我们没有 try..catch，那么由异步函数 f() 的调用生成的 promise 将变为 rejected。我们可以在函数调用后面添加 .catch 来处理这个 error：
async function f() {
let response =await fetch('http://no-such-url');
}
xxx().catch(alert)
// 如果我们忘了在这添加 .catch，那么我们就会得到一个未处理的 promise error（可以在控制台中查看）。我们可以使用在 使用 promise 进行错误处理 一章中所讲的全局事件处理程序 unhandledrejection 来捕获这类 error。
// async/await 和 promise.then/catch
// 当我们使用 async/await 时，几乎就不会用到 .then 了，因为 await 为我们处理了等待。并且我们使用常规的 try..catch 而不是 .catch。这通常（但不总是）更加方便。
// 但是当我们在代码的顶层时，也就是在所有 async 函数之外，我们在语法上就不能使用 await 了，所以这时候通常的做法是添加 .then/catch 来处理最终的结果（result）或掉出来的（falling-through）error，例如像上面那个例子中的 (*) 行那样。
// async/await 可以和 Promise.all 一起使用
// 当我们需要同时等待多个 promise 时，我们可以用 Promise.all 把它们包装起来，然后使用 await：
// // 等待结果数组
// let results = await Promise.all([
// fetch(url1),
// fetch(url2),
// ...
// ]);
// 如果出现 error，也会正常传递，从失败了的 promise 传到 Promise.all，然后变成我们能通过使用 try..catch 在调用周围捕获到的异常（exception）。
// 总结
// 函数前面的关键字 async 有两个作用：
// 让这个函数总是返回一个 promise。
// 允许在该函数内使用 await。
// Promise 前的关键字 await 使 JavaScript 引擎等待该 promise settle，然后：
// 如果有 error，就会抛出异常 — 就像那里调用了 throw error 一样。
// 否则，就返回结果。
// 这两个关键字一起提供了一个很好的用来编写异步代码的框架，这种代码易于阅读也易于编写。
// 有了 async/await 之后，我们就几乎不需要使用 promise.then/catch，但是不要忘了它们是基于 promise 的，因为有些时候（例如在最外层作用域）我们不得不使用这些方法。并且，当我们需要同时等待需要任务时，Promise.all 是很好用的。
// async function loadJson(url) { // (1)
// let response = await fetch(url); // (2)
// if (response.status == 200) {
// let json = await response.json(); // (3)
// return json;
// }
// throw new Error(response.status);
// }
// loadJson('no-such-user.json')
// .catch(alert); // Error: 404 (4)
async function wait() {
await new Promise(resolve =>setTimeout(resolve, 1000));
return 10;
}
function f() {
// 1 秒后显示 10
wait().then(result =>alert(result));
}
f();
网友评论