axios結合async await與promise的使用方法（異步轉同步）

場景：調用多個接口，需等待上一次請求完成，再調用下一個接口.(未二次封裝axios)

想利用async...await實現

async created() {
    await this.getBank();
    ......
    await this.getAccountInfo();
    ......
  },

請求函數寫法如下：

1.axios請求函數原生寫法，無法將異步請求轉為同步

使用async await時無法將函數轉為同步

getCompanyList(pageNo, pageSizeNumber, val) {
            this.axios({
                method: "post",
                url: "api-acc/companyaccount/expand/getAccountCompanyList",
                data: {
                    pageNo: pageNo,
                    pageSize: pageSizeNumber,
                    companyName: val
                }
            })
                .then(
                    response => {
                        if (!response.data.hasError) {
                            this.companyOptions = response.data.result.results;
                            this.total = response.data.result.total;
                        } else {
                        }
                    }
                )
                .catch(error => {});
        },

2.使用promise，改造axios，可以結合async await 使用，可以將異步請求轉為同步

getProjectList() {
      //   console.log("getProjectList");
      return new Promise((resolve, reject) => {
        this.axios({
          method: "get",
          url: "/api-acc/accountprojectgrant/expand/granted",
        })
          .then((res) => {
            resolve(res);
            if (!res.data.hasError) {
              let data = res.data.result;
              this.projectListOptions = data;
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: "error",
              });
            }
          })
          .catch((error) => {
            reject(error);
            this.$message.error("xxxx");
          });
      });
    },

3.axios不單獨寫在請求函數中，直接結合async await使用，因為axios本身就是一個promise，此時也能將axios請求轉為同步

 saveRunningWater(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.saveInfoLoading = true;
          await this.axios({
            method: "post",
            url: "api-acc/accass/expand/assignaccass",
            data: {
              id: this.runningWaterInfo.id,
              projectId: this.runningWaterForm.projectId,
            },
          })
            .then((res) => {
              if (!res.data.hasError) {
                this.$message({
                  message: "保存成功",
                  type: "success",
                });
                this.runningWater = false;
                this.getAcountInfo(); //刷新頁面數據
              } else {
                this.$message({
                  message: res.data.errorMsg,
                  type: "error",
                });
              }
            })
            .catch((error) => {
              this.$message.error("保存失敗");
            });
          this.saveInfoLoading = false;
        } else {
          return false;
        }
      });
    },

4.直接將請求函數return返回，return axios......也能將異步請求轉為同步，因為axios本身也是基於promise

getProjectList() {
      //   console.log("getProjectList");
      return  this.axios({
          method: "get",
          url: "/api-acc/accountprojectgrant/expand/granted",
        })
          .then((res) => {
            if (!res.data.hasError) {
              let data = res.data.result;
              this.projectListOptions = data;
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: "error",
              });
            }
          })
          .catch((error) => {
            this.$message.error("xxxx");
          });
    },

拓展：axios執行多並發請求

處理並發請求的助手函數：

axios.all(iterable)

axios.spread(callback)

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 兩個請求現在都執行完成
  }));

也可以使用Promise.all(arr).then(res=>{ })

 this.$axios.all(arr).then((res)=>{}）中then的第一個參數是一個數組，表示所有請求的信息;

 this.$axios.all(arr).then(this.$axios.spread(function (acct, perms){ }） 這種方式是請求返回的數據形式的數據逐個展開，acct表示請求返回后數組中的第一條數據，perms表示第二條數據；