WEB前端教程：异步编程 - asyncs&await

通过编写一个随机食谱项目练习 async / 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，但是，代码通常更容易阅读。

async 函数 | MDN(opens new window)

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 对象并且解析出数据，代码也更加整洁。

await | MDN(opens new window)

错误处理

我们可以使用 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 构建一个随机菜单项目

任务需求

点击 getMeal 按钮，获取一个随机菜肴。
获取随机菜肴的 API 接口：https://www.themealdb.com/api/json/v1/1/random.php(opens new window)
请你在页面中展示菜肴的名称，菜肴的图片，菜肴的原材料，菜肴的做法步骤，以及菜肴相关的产地，列表，和标签，具体参考示例说明图(opens new window)

参考效果如下：

任务二

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

提交

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

总结

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

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-11-02 11:11
阅读 ( 514 )
分类：WEB前端开发