关于async和await的一些误区实例详解
async/await是ES7出现的一个对于Promise的更高级别的封装，让我们在JavaScript中编写异步代码变得更加简单和易于理解。然而，由于它是ES7的一个比较新的特性，在使用的时候，有一些容易出现的误区。本篇文章将重点讲述两个易错点的实例，帮助读者能够更好地理解和使用async/await。
第一个易错点是将async/await看作同步函数。
考虑以下的一个示例：
async function getData() {
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data');
}, 1000);
});
let result = await promise; // 等待1s
console.log(result);
return result;
}
console.log('one');
let data = getData();
console.log('two');
console.log(data);
console.log('three');
在控制台打印的结果为：
one
two
Promise { <pending> }
three
Data
可以看到，输出结果与我们的预期不符，这是因为异步函数在执行过程中并不会影响下面代码的执行，如果异步操作的时间过长，程序会先执行完下面的代码，就像是同步函数一样。
那么如何解决这个问题呢？在异步函数调用的情况下，访问其返回的Promise对象，需要使用await 或者.then()来获取promise返回值。此外，async函数会返回一个Promise对象，需要使用await或者.then()处理Promise. 我们来修改一下代码：
console.log('one');
getData().then(data => {
console.log('four');
console.log(data);
});
console.log('two');
这次的输出结果为：
one
two
four
Data
可见，在异步函数之后，我们使用.then()方法来处理异步结果时，输出了正确的结果。
第二个易错点是忘了在try...catch语句块中处理异步异常。
考虑以下示例代码：
async function fetchData() {
let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
let data = await response.json();
return data;
}
try {
fetchData().then(data => console.log(data));
} catch (e) {
console.log(e);
}
在这个例子中，我们对一个远程URL发起了请求，并从响应中解析了JSON对象，但是我们没有在try...catch中处理异常。如果我们将这段程序运行，会在控制台看到以下错误：
Uncaught (in promise) TypeError: Failed to fetch
这个错误是因为我们尝试从一个非https的URL访问数据，由于浏览器不允许从非https的URL获取数据，所以我们的请求被阻止了。为了避免这样的错误发生，我们应该在try...catch语句块中包裹异步函数，并处理异常。修改后的代码如下：
try {
let data = await fetchData();
console.log(data);
} catch (e) {
console.log(e);
}
这样，即使出现异常，我们也能捕获并处理掉它。
以上就是关于async和await容易出现的两个误区的详细解析，希望这篇文章能够帮助大家更好地理解和使用async/await，并写出更高质量的异步代码。
本文链接：http://task.lmcjl.com/news/8697.html