微信小程序，按顺序执行异步操作

核心概念

• 异步函数：在微信小程序中，很多操作（如网络请求）都是异步的。这意味着当你发起一个请求时，程序不会等待请求完成，而是继续执行下一行代码。
• async/await：这是JavaScript提供的一种语法，用于更简洁地处理异步操作。async用于声明一个异步函数，await用于等待一个异步操作完成。

示例场景

假设我们有三个数据源，需要从每个数据源中获取数据，并且这些操作必须按顺序进行。

示例代码

1. 定义模拟异步函数

首先，我们定义三个模拟的异步函数，每个函数都返回一个Promise，模拟网络请求。

function fetchData1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("数据1");
    }, 1000); // 1秒后返回数据
  });
}

function fetchData2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("数据2");
    }, 500); // 0.5秒后返回数据
  });
}

function fetchData3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("数据3");
    }, 1500); // 1.5秒后返回数据
  });
}

2. 在小程序页面中使用async/await

在小程序的页面脚本中（例如index.js），我们可以使用async/await来按顺序调用这些函数。

Page({
  data: {
    results: [] // 用于存储获取到的数据
  },
  onLoad: async function() {
    try {
      // 使用await等待fetchData1完成
      const data1 = await fetchData1();
      console.log("获取到：", data1);
      this.setData({
        results: [...this.data.results, data1] // 将数据添加到results数组中
      });

      // 使用await等待fetchData2完成
      const data2 = await fetchData2();
      console.log("获取到：", data2);
      this.setData({
        results: [...this.data.results, data2]
      });

      // 使用await等待fetchData3完成
      const data3 = await fetchData3();
      console.log("获取到：", data3);
      this.setData({
        results: [...this.data.results, data3]
      });

      // 所有数据都获取完成后，显示成功提示
      wx.showToast({
        title: '数据获取成功',
        icon: 'success'
      });
    } catch (err) {
      // 如果在获取数据过程中发生错误，显示错误提示
      console.error('获取数据失败：', err);
      wx.showToast({
        title: '获取数据失败',
        icon: 'none'
      });
    }
  }
});

详细解释

• async关键字：用于声明onLoad函数是一个异步函数。这意味着onLoad函数内部可以使用await关键字。
• await关键字：用于等待一个异步操作完成。在await后面放置一个返回Promise的函数（如fetchData1），await会暂停onLoad函数的执行，直到Promise被解决（即数据被返回）。
• 顺序执行：通过在每个异步函数调用前使用await，确保每个函数在上一个函数完成后才会开始执行。
• 错误处理：使用try/catch块来捕获异步函数执行过程中可能发生的错误，并进行相应的处理。