JS多次請求接口按順序依次執(zhí)行解決辦法

更新時間：2024年04月19日 10:28:48 作者：donghua201

在JavaScript中for循環(huán)是同步的,意味著每個循環(huán)都會等待前一個循環(huán)的請求完成后才會執(zhí)行下一個循環(huán),這篇文章主要給大家介紹了關于JS多次請求接口按順序依次執(zhí)行的解決辦法,需要的朋友可以參考下

// 1、獲取用戶列表，將第一位用戶的門店設置為當前門店
getUsers() {
  return new Promise((resolve, reject) => {
    let data = {
      limit: 999,
      page: 1,
      roleIds: "1,2",
      bindStatus: 0,
    };
    getBuyUserList(data)
      .then((res) => {
        this.userList = res.list;
        if (!this.form.buyId) {
          this.form.buyUserId = res.list[0].userId;
          this.form.shopId = res.list[0].shopId;
        }
        // promise封裝的接口里面可以沒有return，但是一定要調(diào)用 resolve 函數(shù)，表明異步任務順利完成且返回結果值
        resolve();
      })
      .catch((error) => {
        reject(error);
      });
  });
},
///2、設置倉庫的默認項
setDefaultSelection() {
  let data = {
    page: 1,
    limit: 10,
    shopId: this.form.shopId,  //只篩選當前門店關聯(lián)的倉庫
  };
  getWarehouseList(data).then((res) => {
    this.warehouseList = res.list;
    if (!this.form.buyId) {
      this.form.warehouseId = this.warehouseList[0].warehouseId;
      this.form.warehouseName = this.warehouseList[0].name;
    }
  });
},
// Vue實例被創(chuàng)建后立即調(diào)用接口獲取篩選項數(shù)據(jù)
async created() {
    await this.getUsers();
    this.setDefaultSelection();
}

Promise對象

簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。

Promise 是一個對象，Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進行處理。axios 的內(nèi)部實現(xiàn)原理就是通過 Promise 實現(xiàn)的。

Promise對象的兩個特點

對象的狀態(tài)不受外界影響。有三種狀態(tài)：pending（進行中）、fulfilled（成功）和rejected（失敗）。只有異步操作的結果，可以決定當前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)
一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態(tài)改變，只有兩種可能：從pending變?yōu)閞esolved和從pending變?yōu)閞ejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結果

Promise對象是一個構造函數(shù)，用來生成Promise實例，帶有一個回調(diào)函數(shù)，回調(diào)函數(shù)的兩個參數(shù)是 resolve（成功）和 reject（失敗），這兩個參數(shù)他們也是函數(shù)。

鏈式調(diào)用then方法

then方法的第一個參數(shù)是resolved狀態(tài)的回調(diào)函數(shù)，第二個參數(shù)是rejected狀態(tài)的回調(diào)函數(shù)，它們都是可選的。

但是規(guī)范化的寫法是調(diào)用then和catch方法。

let p = Promise.resolve("foo");
// 等價于
let p = new Promise((resolve) => {
  resolve("foo");
});

p.then((data) => {
  console.log(data); //輸出'foo'
});


var p2 = new Promise(function (resolve, reject) {
  var flag = false;
  if(flag){
    resolve('這是數(shù)據(jù)2');
  }else{
    reject('這是數(shù)據(jù)2');
  }
});

p2.then(function(data){//狀態(tài)為fulfilled時執(zhí)行
  console.log(data);
  console.log('這是成功操作');
},function(reason){ //狀態(tài)為rejected時執(zhí)行
  console.log(reason);
  console.log('這是失敗的操作');
});