JS multiple requests to interfaces are executed in sequence. Solution

need:In development, multiple interfaces need to be requested at the same time, but requests need to be executed sequentially. For example, first get the return value shopId of interface a, as the request parameter of interface b, and then adjust the interface to get the warehouse list.

Solution:Encapsulate interface a in Promise, add await before calling Promise. Await will wait for the resolution in Promise to proceed to the next operation.

// 1. Get the user list and set the first user's store as the current storegetUsers() {
  return new Promise((resolve, reject) => {
    let data = {
      limit: 999,
      page: 1,
      roleIds: "1,2",
      bindStatus: 0,
    };
    getBuyUserList(data)
      .then((res) => {
         = ;
        if (!) {
           = [0].userId;
           = [0].shopId;
        }
        //There is no return in the interface encapsulated by promise, but the resolve function must be called to indicate that the asynchronous task has been completed smoothly and the result value is returned        resolve();
      })
      .catch((error) => {
        reject(error);
      });
  });
},
///2. Set the default items of the warehousesetDefaultSelection() {
  let data = {
    page: 1,
    limit: 10,
    shopId: ,  //Only filter the warehouses associated with the current store  };
  getWarehouseList(data).then((res) => {
     = ;
    if (!) {
       = [0].warehouseId;
       = [0].name;
    }
  });
},
// Immediately after the Vue instance is created, call the interface to obtain filter dataasync created() {
    await ();
    ();
}

Promise object

Simply put, it is a container.It stores the result of an event that will end in the future (usually an asynchronous operation)。

Promise is an object. Promise provides a unified API, and various asynchronous operations can be processed in the same way. The internal implementation principle of axios is implemented through Promise.

Two characteristics of Promise objects

• The state of the object is not affected by the outside world. There are three states: pending (in progress), fulfilled (success), and rejected (failed). Only the result of asynchronous operation can determine which state it is currently in. No other operation can change this state.
• Once the state changes, it will not change again, and you can get this result at any time. There are only two possible ways to change the state of the Promise object: from pending to resolved and from pending to rejected. As long as these two situations occur, the state will solidify and will not change again. This result will be maintained.

The Promise object is a constructor used to generate a Promise instance with a callback function. The two parameters of the callback function areresolve (success) and reject (failed), these two parameters are also functions.

Chained call to the then method

The first parameter of the then method is the callback function in the resolved state, and the second parameter is the callback function in the rejected state, which are both optional.

But the normalized way is to call the then and catch methods.

let p = ("foo");
// Equivalent tolet p = new Promise((resolve) => {
  resolve("foo");
});

((data) => {
  (data); //Output 'foo'});


var p2 = new Promise(function (resolve, reject) {
  var flag = false;
  if(flag){
    resolve('This is data 2');
  }else{
    reject('This is data 2');
  }
});

(function(data){//Execute when the status is fulfilled  (data);
  ('This is a successful operation');
},function(reason){ //Execute when the status is rejected  (reason);
  ('This is a failed operation');
});

Summarize

This is the article about the solution to the multiple requests for JS interfaces to execute in sequence. For more related contents for JS interfaces to execute in sequence, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!