关于async和await的一些误区实例详解

关于async和await的一些误区实例详解

引言

async/await是ES7出现的一个对于Promise的更高级别的封装，让我们在JavaScript中编写异步代码变得更加简单和易于理解。然而，由于它是ES7的一个比较新的特性，在使用的时候，有一些容易出现的误区。本篇文章将重点讲述两个易错点的实例，帮助读者能够更好地理解和使用async/await。

例1

第一个易错点是将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()方法来处理异步结果时，输出了正确的结果。

例2

第二个易错点是忘了在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，并写出更高质量的异步代码。