ES8 中的 Async 函数：让 JavaScript 更强大-JavaScript中文网-JavaScript教程资源分享门户

作为一门广泛应用于前端开发的语言，JavaScript 的异步编程一直是开发者们极力解决的难题。ES6 中异步编程的解决方案，Promise 和 Generator，一定程度上缓解了这个问题。而在 ES8 中，Async 函数成为了异步编程的新解决方案，也让 JavaScript 变得更加强大。

Async 函数是什么？

Async 函数是一个异步函数，相对于 Generator 函数，它不需要在函数体内部使用 yield 命令来执行异步操作，直接在函数前加上 async 关键字即可声明一个异步函数。

async function foo() {
  try {
    let result1 = await something1();
    let result2 = await something2();
    let result3 = await something3();
    return result3;
  } catch (error) {
    console.log(error);
  }
}

一些需要注意的点：

Async 函数在声明时返回一个 Promise 对象，可以使用 then 方法进行链式调用或者使用 await 来获取异步操作结果。
Async 函数可以通过 await 命令来挂起它所包含的异步操作，直到异步操作完成后再继续执行。
Async 函数使用 try-catch 语句来捕获异常，并且在 Promise 实例状态变为 reject 时返回的是 throw 语句所抛出的对象。

Async 函数的优势

简化异步操作代码

相比较于 Promise 和 Generator，在 Async 函数中开发者不必写那么多繁琐的逻辑实现异步编程，直接通过 await 命令等待异步操作结果即可，代码量大大减少。例如下面例子中，使用 Promise 实现的异步调用和使用 Async 实现异步调用的代码对比：

// 使用 Promise 实现
function requestData() {
  return new Promise((resolve, reject) => {
    fetch("http://xxx.com")
      .then(res => res.json())
      .then(data => {
        if (data.code === 0) {
          resolve(data.data);
        } else {
          reject(data.msg);
        }
      });
  });
}

requestData()
  .then(data => console.log(data))
  .catch(error => console.log(error));

// 使用 Async 实现
async function requestData() {
  try {
    let res = await fetch("http://xxx.com");
    let data = await res.json();
    if (data.code === 0) {
      return data.data;
    } else {
      throw new Error(data.msg);
    }
  } catch (error) {
    console.log(error);
  }
}

requestData();

通过对比两个代码片段，可以发现 Async 函数代码量相对更少，逻辑更简单。

错误处理更加便捷

在异步编程中，错误处理总是伴随代码编写的方方面面。Promise 和 Generator 中代码错误处理相对较为清晰有序，但是 Async 函数进一步强化了这个特点。在 Async 函数中，我们可以直接使用 try-catch 语句来捕获异常，不必写繁琐的 reject 链式调用。这使得错误处理的代码逻辑更加简单，也更易于管理和理解。

支持更优雅的代码结构

使用 Async 函数实现的异步编程代码结构更优雅，代码整个结构更加清晰，也更易于维护。同时，Async 函数在实现异步操作过程中对其它函数的调用更加自然，可以遵循正常的同步操作方式来实现异步操作。这改变了以往在异步编程中，大量的回调嵌套和 Promise 链式调用过程中函数间传递值的方式，使用 Async 函数可以实现更优雅的代码结构。

Async 函数的使用场景

Async 函数作为一种异步编程的解决方案，可以在前端开发的众多场景中使用。以下是几个使用 Async 函数的场景：

异步数据获取

在拿到异步数据的前提下，进行其他的展示逻辑处理等，这种工作场景适合异步函数来代替回调函数。

async function fetchUserInfo(userId) {
  const res = await fetch(`/user/${userId}`);
  const userInfo = await res.json();
  return userInfo;
}

async function showUserInfo(userId) {
  const userInfo = await fetchUserInfo(userId);
  renderUserInfo(userInfo);
}

异步操作数据的处理

在数据处理的过程中通常需要一些耗时的操作，例如文件读取、网络请求等，Async 函数则可以很好地避免高嵌套的回调函数和 Promise 的连续调用。例如下面将一张图片上传到服务器的代码示例中：

async function uploadImage() {
  try {
    const file = getUploadFile();
    const res1 = await requestUploadUrl(); // 获取上传 URL
    const uploadUrl = res1.upload_url;
    const res2 = await requestUploadPermission(uploadUrl); // 申请上传权限
    const token = res2.token;
    const formData = new FormData();
    formData.append("file", file);
    formData.append("token", token);
    const res3 = await axios.post(uploadUrl, formData); // 上传文件
    reutrn res3;
  } catch (err) {
    console.log(err);
  }
}

function getUploadFile() {
  // 获取上传文件
  const file = document.querySelector("input[type=file]").files[0];
  return file;
}

操作多个异步函数完成任务

Async 函数经常用于操作多个异步函数完成一个大任务，并且他们的执行顺序与返回值有关联。这种情况下，Async 函数通过对每个异步函数使用 await 命令，等待上一个异步函数执行完毕后，才会执行下一个异步函数。

async function orderCoffee() {
  try {
    const result1 = await fetchShopInfo(); // 获取咖啡店信息
    const result2 = await calculatePrice(result1); // 计算价格
    const result3 = await payForCoffee(result2); // 支付
    reutrn result3;
  } catch (err) {
    console.log(err);
  }
}

总结

Async 函数是对 JavaScript 异步编程解决方案的进一步增强，具有代码简单、错误处理便捷、代码结构优雅等优点。它值得广大开发者学习和运用。在实际工程应用过程中，不仅要掌握具体使用方法，更需理解其背后的异步编程思想，这对优化项目的性能和开发效率是十分有帮助的。

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

ES8 中的 Async 函数：让 JavaScript 更强大

Async 函数是什么？

Async 函数的优势

Async 函数的使用场景

总结

纠错反馈