百度前端技术学园

# 异步编程 - asyncs&await

# 课程目标

  • 学习掌握 async / await 语法
  • 通过编写一个随机食谱项目练习 async / await 的使用

# aysnc/await 介绍

async/await 实际上了 promise 语法糖，因此学习他们的前提是掌握 promise 基础知识

async/await 可以帮助使异步读取代码编写更像同步代码。这可以帮助代码看起来更干净更易于阅读，同时保持异步代码的好处。

以下是您可以在没有使用 async/await 的情况下使用 fetch 获取异步数据的方法 ：

const getData = () => {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
    });
};

// 用例
getData();

上面的代码可以使用 async/await 重写为：

const getData = async () => {
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
};

// 用例
getData();

通过这两个例子，相信您已经感受到 async/await 的魅力 很明显 async/await 因为它使代码更易于阅读。您终于可以从上到下阅读它并期望它从上到下运行。

# async 关键字

首先我们来学习 async 关键字

当一个函数用 async 声明时。这将使函数自动返回一个 promise。举个例子：

const getData = () => {
  return new Promise((resolve) => {
    resolve(1);
  });
};

// 用例
getData().then((data) => {
  console.log(data); // 1
});

使用 async 重写以上函数：

const getData = async () => {
  return 1;
};

// 用例
getData().then((value) => {
  console.log(value); // 1
});

以上段代码在功能上相同，但使用不同的语法编写。这就是为什么我们说它 async/await 是语法糖，因为你仍然在使用 Promise，但是，代码通常更容易阅读。

# await 关键字

await 关键字只能在函数内部使用 async,它告诉 JavaScript 在继续执行函数之前等待异步操作 primise 完成，然后它会自动解析（调用.then()）并返回一个结果。 现在我们来看如下实例：

async function getData() {
  return 1;
}

const init = () => {
  getData().then((result) => {
    console.log(result); // 1
  });
};

init();

上面的代码可以使用 await 函数重写：

async function getData() {
  return 1;
}

const init = async () => {
  const result = await getData();
  console.log(result); // 1
};

init();

请注意如何 await getValue()将暂停函数 init 的执行, 直到 getData() 函数返回 promise 对象并且解析出数据，代码也更加整洁。

# 错误处理

我们可以使用 try/catch 实现 async/await 的错误处理,查看如下例子：

const init = async () => {
  const result = await getData();
  console.log(result);
};

如果该 getData 函数调用内部出现问题，promise 可能会拒绝。所以，让我们用一个 try...catch 语句来包装它

const init = async () => {
  try {
    const result = await getData();
    console.log(result);
  } catch (error) {
    console.error(error);
    // 错误处理
  }
};

# async/await

阅读下面材料，深入学习 async/await

# 任务

请您运用 async/await 构建一个随机菜单项目

任务需求

参考效果如下：

# 任务二

请您运用 async/await 重构前面实现的汇率计算器项目代码

# 提交

把你觉得此次学习中做得最好的代码放在 Github 后进行提交。

# 总结

依然把今天的学习用时，收获，问题进行记录。

# 相关参考

书籍

文章

视频

← 个人任务管理系统 →