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

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;
      });
    }
  }

原文由 WilTree 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一个 Promise ，它将使用异步函数返回的值来解析，或者使用从异步函数中抛出的未捕获异常来拒绝。

参考 - 异步函数

所以你可以这样做

{
  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 将数组中的两个异步函数作为参数传递。

原文由 Vamsi Krishna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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);

原文由 mohagali 发布，翻译遵循 CC BY-SA 4.0 许可协议