如何使用 Promise.all 使用 Axios Async Await

Question

我在 Nuxt.js 中有此 Axios Async Await 代码，我不确定如何以及将 Promise.all 放在这里。我正在努力承诺 getThemes() 和 getData()。有人可以帮我 Promise.all 代码吗？

我是否必须将 Promise.all 放在 mounted() 中？

mounted() {
    this.getData(this.$route.params.id);
    this.getThemes();
  },

  methods: {
    async getThemes() {
      this.loading = true;
      await axios.get(`${process.env.API_URL}/v1/communication/email-themes`, {}).then((response) => {
        this.theme = response.data.data;
        this.selected = this.theme.filter(t => this.themeId === t.id)[0].id;
        this.loading = false;
      }).catch((error) => {
        this.loading = false;
        this.errormsg = error.response.data.message;
      });
    },

    async getData(id) {
      this.loading = true;
      await axios
        .get(`${process.env.API_URL}/v1/communication/email-templates/${id}`)
        .then(({
          data
        }) => {
          this.templateName = data.data.name;
          this.templateCode = data.data.content;
          this.themeId = data.data.theme_id;
          this.loading = false;
        }).catch((error) => {
          this.loading = false;
          this.errormsg = error.response.data.message;
        });
    },

    async patchData(id) {
      await axios.put(`${process.env.API_URL}/v1/communication/email-templates/${this.$route.params.id}`, {
        name: this.templateName,
        content: this.templateCode,
        theme_id: this.selected
      }).then((response) => {
        this.results = response.data;
        this.loading = false;
      }).catch((error) => {
        this.loading = false;
        this.errormsg = error.response.data.message;
      });
    }
  }

Answer 1

我想你想等待 getThemes 和 getData 完成：

   mounted() {
     this.loadData();
   },
   methods: {
     async loadData() {
       this.loading = true
       try {
         await Promise.all([this.getThemes(), this.getData(this.$route.params.id)])
       } catch (error) {
         this.errormsg = error.message;
       } finally {
         this.loading = false
       }
     }
    getThemes() {
       return axios.get(`${process.env.API_URL}/v1/communication/email-themes`, {
       }).then((response) => {
         this.theme = response.data.data;
         this.selected = this.theme.filter(t => this.themeId === t.id)[0].id;
       })
     },

    getData(id) {
       return axios
         .get(`${process.env.API_URL}/v1/communication/email-templates/${id}`)
         .then(({ data }) => {
           this.templateName = data.data.name;
           this.templateCode = data.data.content;
           this.themeId = data.data.theme_id;
         })
    },
  }

Answer 2

A Promise which will be resolved with the value returned by the async function, or rejected with an uncaught exception thrown from within the async function.

参考 - Async function

所以可以按如下方式进行

{
  mounted() {
    this.loading = true;
    Promise.all([this.getThemes(), this.getData(this.$route.params.id)])
      .then(values => {
        //first return value
        this.theme = values[0];
        this.selected = this.theme.filter(t => this.themeId === t.id)[0].id;
        //second return value
        this.templateName = values[1].name;
        this.templateCode = values[1].content;
        this.themeId = values[1].theme_id;

        this.loading = false;
      })
      .catch(error => {
        this.errormsg = error.response.data.message;
        this.loading = false;
      });
  },
  methods: {
    async getThemes() {
      const response = await axios.get(
        `${process.env.API_URL}/v1/communication/email-themes`,
        {}
      );
      return response.data.data;
    },
    async getData(id) {
      const response = await axios.get(
        `${process.env.API_URL}/v1/communication/email-templates/${id}`
      );

      return response.data.data;
    }
  }
};

然后使用Promise.all将数组中的两个异步函数作为参数传递。

Answer 3

here example how to wait axios all fetch
let url1="https://whosebug.com";
let url2="https://whosebug.com/questions";
let request1=axios.get(url1);
let request2=axios.get(url2);
let [answer1,answer2]=await axios.all([request1,request2]);
console.log(answer1.data);
console.log(answer2.data);

如何使用 Promise.all 使用 Axios Async Await

How to use Promise.all using Axios Async Await

javascript

promise

vue.js

nuxt.js