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

一个Promise，它将由async函数返回的值来解析，或者被async函数内部抛出的未捕获异常拒绝。

参考-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 2

我想您想同时等待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 3

here example how to wait axios all fetch
let url1="https://stackoverflow.com";
let url2="https://stackoverflow.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);

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

3 个答案: