在 ES10 中使用 Async/await 处理异步操作

在 ES10 中使用 Async/await 处理异步操作

在现代的 Web 开发中，异步操作已经成为了必备技能。JavaScript 作为一门弱类型动态语言，为异步编程带来很多成本，ES6 引入了 Promise，大大简化了异步编程，ES8 引入了 async/await，更是将异步操作与同步操作无缝衔接。在本文中，我们将深入探讨 ES10 中如何使用 async/await 处理异步操作。

1. 异步操作

异步操作的概念已经为人熟知，即指一个操作无法在当前时间内立即执行并返回结果，而需要等待一段时间后才能得到结果，这个操作就被称为异步操作。在 JavaScript 中，异步操作很多，如网络请求、定时器、事件监听等等。在以往的开发中，处理异步操作需要使用回调函数，而且嵌套层数多了会出现回调地狱的问题。ES6 引入了 Promise，可以解决回调地狱的问题，但是代码可读性并不理想，代码示例如下：

// javascriptcn.com 代码示例
function getData(id) {
  return new Promise((resolve, reject) => {
    http.get(`/api/data/${id}`, (res) => {
      let data = '';
      res.on('data', (chunk) => {
        data += chunk;
      });
      res.on('end', () => {
        resolve(JSON.parse(data));
      })
      res.on('error', (err) => {
        reject(err);
      });
    });
  });
}

getData(1)
  .then(data => {
    console.log(data);
    return getData(data.id);
  })
  .then(subData => {
    console.log(subData);
    return getData(subData.id);
  })
  .then(subSubData => {
    console.log(subSubData);
  })
  .catch(err => {
    console.log(err);
  });

1. Async/await

ES7 引入了 async/await，可以让异步操作的代码更加易读。async 函数返回一个 Promise 对象，可以使用 await 关键字等待异步操作完成后获取结果。async/await 可以让异步操作看起来像同步操作，代码可读性更好，代码示例如下:

// javascriptcn.com 代码示例
async function getData(id) {
  const res = await http.get(`/api/data/${id}`);
  const data = JSON.parse(res);
  return data;
}

async function getSubData() {
  const data = await getData(1);
  console.log(data);
  const subData = await getData(data.id);
  console.log(subData);
  const subSubData = await getData(subData.id);
  console.log(subSubData);
}

getSubData().catch(err => {
  console.log(err);
});

从上述代码示例可以看出，使用 async/await 的代码看起来像同步代码，易读性更好，由于 await 关键字会等待异步操作完成后获取结果，因此避免了回调地狱的问题。

1. 错误处理

使用 async/await 时，错误处理一般使用 try/catch 块处理。async/await 可以让错误处理代码更加简洁，代码示例如下：

async function someAsyncOperation() {
  try {
    const data = await getData(1);
    console.log(data);
  } catch (err) {
    console.log(err);
  }
}

1. 总结

在 ES10 中使用 Async/await 处理异步操作，让我们的代码更加易读、易写、易于维护。使用 async/await 可以很大程度上避免回调地狱的问题，使异步操作看起来像同步操作，从而提高代码可读性。同时使用 try/catch 块处理异常，代码简洁有力。建议在日常开发中，优先选用 async/await 方式处理异步操作。

参考文献：

1. ECMAScript® 2019 Language Specification - ECMAScript® 2019 Language Specification, https://tc39.es/ecma262/#sec-async-function-definitions
2. ECMAScript 6 入门 - Promise 对象, http://es6.ruanyifeng.com/#docs/promise
3. ECMAScript 2017 中的 async/await 是如何工作的？(阮一峰), http://www.ruanyifeng.com/blog/2017/08/async-await.html

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654c3d657d4982a6eb5d652c