深入学习 ES7 中的 await
在 ES7 中，引入了一个新的关键字 await，它可以让我们更方便地处理异步操作，避免了回调函数嵌套的问题。今天，我们来深入学习 ES7 中的 await，了解它的用法、原理以及一些注意事项。
一、await 的用法
await 只能在 async 函数中使用，它的作用是暂停 async 函数的执行，等待 Promise 对象的状态改变，然后继续执行 async 函数。
我们来看一个简单的示例：
async function test() {
let result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
let json = await result.json();
console.log(json);
}
test();在这个示例中，我们定义了一个 async 函数 test，在函数中使用 await 等待 fetch 方法返回的 Promise 对象的状态改变，然后获取响应数据并打印出来。由于使用了 await，代码看起来更加简洁易懂。
二、await 的原理
await 的本质是让 async 函数生成器一个 Promise 对象，然后等待这个 Promise 对象的状态改变。我们来看一下上面示例的代码转换后的写法：
// javascriptcn.com 代码示例
function test() {
return new Promise(function(resolve, reject) {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(function(result) {
return result.json();
})
.then(function(json) {
resolve(json);
})
.catch(function(error) {
reject(error);
});
});
}
test().then(function(json) {
console.log(json);
});这里，我们将 async 函数转换成了 Promise 对象，在函数中通过 fetch 方法获取数据，并通过 Promise 对象返回结果。然后我们调用 test 函数，获取结果并打印出来。可以看到，使用 await 相比使用 Promise 对象的代码清晰度更高。
三、注意事项
await 只能在 async 函数中使用。
在 async 函数中，多个 await 语句按顺序执行，前面的 await 语句等待 Promise 对象状态改变后才会执行后面的 await 语句。
await 可以跟 Promise 对象，也可以跟普通值。如果跟普通值，则会直接将该值封装成 Promise 对象返回。
async function test() {
let result = await 10; // Promise.resolve(10)
console.log(result);
}
test();- await 会抛出错误，需要使用 try-catch 语句处理。
// javascriptcn.com 代码示例
async function test() {
try {
let result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
let json = await result.json();
console.log(json);
} catch (error) {
console.log(error);
}
}
test();总结
通过深入学习 ES7 中的 await，我们可以更好地处理异步操作，避免回调函数嵌套的问题，让代码更加简洁易懂。在实际开发中，我们可以将 await 和 async 应用到多个场景中，例如获取数据、操作 DOM 等。需要注意的是，await 只能在 async 函数中使用，并且要处理抛出的错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65422bbf7d4982a6ebbd1666