uniapp _微信小程序使用async,await（易如反掌的理解清楚）

一、async,await是什么

async 和 await 是 JavaScript 中处理异步编程的一种方式，它们是 ECMAScript 2017（也被称为 ES8）引入的新特性。

1、async 函数：

async 关键字用于声明一个函数是异步函数。异步函数在执行时返回一个 Promise 对象。它使得在函数内部可以使用 await 关键字等待异步操作的完成。

async function myAsyncFunction() {
    return 42; // 返回一个 Promise 对象
}

2、await 表达式：

await 关键字只能在 async 函数内部使用。它等待 Promise 对象的解析，并返回 Promise 解析后的值。

async function fetchData() {
    const result = await someAsyncFunction(); // 等待异步操作完成
    console.log(result); // 使用异步操作的结果
}

await 将暂停函数的执行，直到 Promise 被解析或拒绝。它可以用于等待异步操作完成，而不阻塞整个线程。

如果不写await会发什么什么？（面试曾经问过）

答案：

如果在 async 函数内部不使用 await 关键字，即不等待异步操作的完成，那么该函数将在异步操作开始后立即返回，并不会等待异步操作的结果。这可能导致意外的行为，因为在异步操作完成之前，函数可能已经执行完毕。

使用 await 和不使用 await 的区别

// 模拟异步操作的函数
function asyncFunction(delay, value) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(value);
      resolve(value);
    }, delay);
  });
}

// 使用 await 的情况
async function exampleWithAwait() {
  console.log('Start');

  await asyncFunction(1000, 'Async Operation 1');
  await asyncFunction(500, 'Async Operation 2');

  console.log('End');
}

// 不使用 await 的情况
function exampleWithoutAwait() {
  console.log('Start');

  asyncFunction(1000, 'Async Operation 1');
  asyncFunction(500, 'Async Operation 2');

  console.log('End');
}

// 调用两个例子
exampleWithAwait();
exampleWithoutAwait();

在 exampleWithAwait 中，await 会等待每个异步操作完成后再执行下一个。输出顺序将是：

Start
Async Operation 1  // 等待1秒后输出
Async Operation 2  // 再等待0.5秒后输出
End

而在 exampleWithoutAwait 中，由于没有使用 await，两个异步操作会同时开始执行，不会等待前一个操作完成。输出顺序可能是：

Start
End
Async Operation 2  // 先输出，因为只等待0.5秒
Async Operation 1  // 然后输出，因为等待了1秒

await 只能在 async 函数内部使用。当执行到 await 关键字时，它会暂停函数的执行，等待异步操作完成，然后获取异步操作的结果。一旦异步操作完成，await 后面的代码才会继续执行。这确保了异步操作按照顺序执行，而不是像同步代码一样立即执行。这对于处理异步任务的结果或确保操作的正确顺序非常有用。如果没有 await，则异步操作会在后台执行，而函数会继续执行后续代码，可能导致不确定的结果，如果没有使用 await，则两个异步操作会同时开始执行，而不考虑它们的相对顺序。

二、一般搭配try和catch使用

相当于promise里面的.then和.catch

async function example() {
    try {
        const result1 = await asyncFunction1();
        console.log(result1);

        const result2 = await asyncFunction2();
        console.log(result2);
    } catch (error) {
        console.error('An error occurred:', error);
    }
}

example();

 如果 asyncFunction1 或 asyncFunction2 中的任何一个出现错误，都会被捕获到 catch 块中，然后输出错误信息。这样可以更好地处理异步操作中的异常情况。async/await 更直观易读