vue异步处理

具体来说，在 Vue 组件中处理异步函数可以按照以下步骤进行：

定义一个 loading 属性来表示异步处理状态，默认为 false。

定义一个 async 函数，使用 Promise 包装异步操作，并使用 try…catch 块来捕获异常情况。

在异步函数中，根据业务逻辑进行判断，若成功，则返回相应的数据；若失败，则用 throw 抛出错误对象。

在 Vue 组件的模板中，根据 loading 属性控制加载等待的界面。

以下是一个使用 Promise 和 async/await 的 Vue 组件样例代码，能够处理带有多个判断条件的异步处理：

<template>
  <div>
    <div v-if="loading">Loading data...</div>
    <div v-if="!loading && data">Data: {{ data }}</div>
    <div v-if="!loading && error">{{ error }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      data: null,
      error: null,
      condition1: true,
      condition2: false,
    };
  },
  async created() {
    this.loading = true;
    try {
      if (this.condition1) {
        // 异步操作 1，返回数据 data1
        const data1 = await fetchData1();
        this.data = data1;
      } else if (this.condition2) {
        // 异步操作 2，返回数据 data2
        const data2 = await fetchData2();
        this.data = data2;
      } else {
        // 异步操作 3，返回数据 data3
        const data3 = await fetchData3();
        this.data = data3;
      }
    } catch (error) {
      this.error = error.message;
    } finally {
      this.loading = false;
    }
  },
  // ...
};
</script>

在上述样例代码中，根据组件中的不同条件，使用 await关键字等待异步操作完成，并返回相应的数据。异常则会在 catch 块中被捕获，控制相应的 error 属性。使用 finally 关键字来确保无论如何都会关闭 loading 属性。这种方式可以使代码更加清晰、简洁，并且能够处理各种判断条件下的异步处理。

如果 fetchData1 函数本身还包含异步操作，可以在其内部使用 Promise 来处理异步操作，并在 async/await 异步函数中使用 await 等待其返回结果。下面是一个示例代码：

// fetchData1 含有异步操作
function fetchData1() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作，假设需要 2s 才能完成
    setTimeout(() => {
      // 随机产生结果，50% 的几率出现成功和失败
      const random = Math.random();
      if (random > 0.5) {
        resolve('data1');
      } else {
        reject(new Error('Failed to fetch data1'));
      }
    }, 2000);
  });
}

// 在 async/await 异步函数中调用 fetchData1
async function asyncFunction() {
  try {
    const result = await fetchData1(); // 等待 fetchData1 返回结果
    console.log(result); // 输出 "data1"
  } catch (error) {
    console.error(error); // 输出 "Failed to fetch data1"
  }
}

在上面的代码中，fetchData1() 函数本身就包含异步操作，因此在其内部使用 Promise 处理异步操作，并在调用 fetchData1()函数的异步函数中使用 await 等待其返回结果。

对于多层嵌套的异步操作，可以使用 Promise 和 async/await 组合的方式，将代码逐层拆分为 Promise 和 async/await 结构，并在其中使用 try…catch 来捕获错误，从而简化代码并提高可读性和可维护性。