ES6中的`await`关键字是用来暂停异步函数的执行,等待`Promise`对象的状态变为`resolved`(成功)或者`rejected`(失败),然后继续执行异步函数。
## 1. 使用await的条件
为了使用`await`关键字,函数必须在定义时使用`async`关键字声明。`async`函数能够隐式地返回一个`Promise`对象,而`await`只能用在`async`函数内部。
下面是一个使用`await`关键字的示例:
```javascript
async function getUser() {
const response = await fetch('https://api.example.com/user');
const user = await response.json();
console.log(user);
```
在上面的示例中,函数`getUser()`首先使用`await`关键字暂停执行,并等待`fetch`函数返回一个`Promise`对象。一旦`fetch`函数返回成功的`Promise`对象,`await`关键字会解析这个对象并将其值赋给变量`response`。
接着,函数继续执行,使用`await`关键字等待`response.json()`方法返回的`Promise`对象。`await`会等待这个`Promise`对象变为成功状态,并将其值赋给变量`user`。
最后,我们打印出`user`对象。
## 2. await表达式的返回值
`await`表达式的返回值是`Promise`对象解决后的值。如果被暂停的`Promise`对象处于失败状态,则`await`表达式将抛出一个错误。
以下是一个使用`await`表达式的示例:
```javascript
async function getUser() {
try {
const response = await fetch('https://api.example.com/user');
const user = await response.json();
return user;
} catch (error) {
console.error(error);
}
getUser()
.then(user => {
console.log(user);
});
```
在上面的示例中,如果`fetch`函数返回的`Promise`对象成功解析,`await`表达式将会返回一个包含用户数据的`Promise`对象。如果`fetch`函数返回的`Promise`对象处于失败状态,`catch`块将会捕获到错误并打印出出错信息。
在最后,我们使用`.then()`方法来获取`getUser()`函数返回的`Promise`对象的值,并打印出用户数据。
## 3. 多个await表达式的顺序执行
使用`await`关键字的好处之一是可以方便地在代码中保持顺序。下面的示例展示了多个`await`表达式的顺序执行:
```javascript
async function getData(apiUrl) {
const response1 = await fetch(apiUrl);
const data1 = await response1.json();
const response2 = await fetch(apiUrl + '?page=2');
const data2 = await response2.json();
return [data1, data2];
getData('https://api.example.com/data')
.then(dataArr => {
console.log(dataArr);
});
```
在上面的示例中,我们通过两次调用`fetch`函数来获取不同页码的数据。首先,我们使用`await`关键字等待第一次请求返回成功的`Promise`对象,然后解析该对象并将其值赋给`data1`变量。
接着,我们通过第二次调用`fetch`函数来获取第二页的数据,并使用`await`关键字等待其返回的`Promise`对象。最后,我们返回一个包含两个数据的数组。
在最后的`.then()`方法中,我们打印出获取到的数据。
## 总结
`await`关键字是ES6中用来控制异步函数执行顺序的重要工具。通过使用`await`关键字,我们可以暂停异步函数的执行,直到`Promise`对象的状态变为成功或失败。同时,`await`表达式的返回值是`Promise`对象解决后的值,使我们能够方便地处理异步操作的结果。