之后的笔记主要记载完成 Blue-whale商城 大作业时遇到的问题和知识点。

异步处理

在 JavaScript 中，我们经常需要处理异步操作，比如发送请求、读取文件等。传统上，使用回调函数或者 Promise 来处理异步操作，但这些方法有时会让代码变得复杂且难以维护。async 和 await 提供了一种更简洁的方式来处理异步操作，让代码更加清晰易懂。

async 和 await

async：用于声明一个异步函数。异步函数的返回值会自动封装为 Promise 对象。

await：只能在 async 函数中使用。它用于等待一个 Promise 完成，并返回结果。

基本用法

以大作业中的部分代码为例。我们有两个异步操作：获取商店列表和获取用户信息。在使用 async 和 await 之前，错误代码可能长这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function getStoreInfo() {
  const data = await getStoreList();
  stores.value = data;
  console.log('商店数据:', data);
}

function getUserInfo() {
  try {
    const res = await userInfo();
    // 设置用户信息
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
}

getStoreInfo()
getUserInfo()

在这个示例中，我们本意是想要先获得商店列表再获取用户信息，但代码执行的实际情况是控制台先打印了用户信息，这显然不符合我们的需求，需要使用 async 和 await 改写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 获取商店列表
async function getStoreInfo() {
  const data = await getStoreList();
  stores.value = data;
  console.log('商店数据:', data);
}

// 获取用户信息
async function getUserInfo() {
  try {
    const res = await userInfo();
    // 设置用户信息
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
}

// 执行顺序
async function fetchData() {
  await getStoreInfo();
  await getUserInfo();
}
fetchData();

代码解析：

• async 函数：getStoreInfo 和 getUserInfo 被声明为 async，意味着它们是异步函数，返回一个 Promise。

• await 关键字：我们使用 await 来等待 getStoreList() 和 userInfo() 的 Promise 结果。

• 顺序执行：通过 await 确保了 getStoreInfo() 完成后才执行 getUserInfo()，这样可以保证执行顺序。

• 错误处理: 通过 try...catch，我们能够捕获异步操作中的任何错误并进行处理，避免程序崩溃。

• ← Previous Post
• Next Post →