多个任务依次执行

并行任务的串行化/并发任务的同步化

场景：一个页面中有多个组件，每个组件都有一个独立的接口请求，当所有多个接口执行完成后，修改loading状态

<template>
  <a-skeleton :loading="loading" active :paragraph="{ rows: 8 }">
    <div v-if="typeFail" @click="">类型 加载失败</div>
    <div v-else>
      类型内容：{{ typeData }}
    </div>
  </a-skeleton>
  <a-skeleton :loading="loading" active :paragraph="{ rows: 8 }">
    <div v-if="stateFail">状态 加载失败</div>
    <div v-else>
      状态内容：{{ typeData }}
    </div>
  </a-skeleton>
</template>

<script>
import { getState } from ',/api';
export default {
  components: {},
  props: {},
  data() {
    return {
      // 类型 加载失败
      typeFail: false,
      // 状态 加载失败
      stateFail: false,
      loading: false,
      // 任务队列
      queue: [],
      typeData: '',
      stateData: ''
    };
  },
  methods: {
    runTask() {
      this.awaitAllTasks(this.type())
      this.awaitAllTasks(this.state())
    },
    async awaitAllTasks(task) {
      this.loading = true
      // 将task转换为promise对象，后期完成时从队列中删除
      const item = Promise.resolve(task).then(() => {
        const index = this.queue.indexOf(item);
        if (index > -1) {
          this.queue.splice(index, 1);
        }
      });
      // 将promise对象push到任务队列中
      this.queue.push(item);
      Promise.all(this.queue).then(() => {
        // 依次执行所有完任务后（无论成功/失败），将loading改为false
        if (this.queue.length === 0) {
          this.loading = false;
        }
      }).catch(() => {
        this.loading = false
      })
    },

	// 第一个请求
    type() {
      this.stateFail = false
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          this.typeFail = true
          console.log('延迟3s后执行失败----------------------')
          reject(new Error('执行失败'))
        }, 3000)
      })
    },
    
	// 第二个请求
    async state() {
      this.stateFail = false
      await getState().then(res => {
        this.stateData = res
      }).catch(e => {
        this.stateFail = true
        return Promise.reject(e)
      })
    },

  },
};
</script>

// api.js
import axios from "axios";
export async function getState(params) {
  const res = await axios.get('http:/.../...', {
    params
  })
  if (res.status === 200) {
    return res.data.data
  }
  return Promise.reject(new Error(res.data.message))
}