How does VUE get the data in PromiseResult in the Promise object

How to get the data in PromiseResult in Promise object in VUE project

Problem Description

If we want to get the request result outside the interface request method and then do related data processing, what we often get is a Promise object. The case is as follows:

methods: {
    
    
  getInfoList(id) {
    
    
    let list = [];
    // 接口请求封装的方法
    list = infoStore(id)
    console.log('list :>> ', list);
  }
}

Print the results.

You can see that the value returned by the request is placed in the PromiseResult of the Promise object, but the value cannot be retrieved directly. This is because:
Promise is simply a container, which stores an event that will end in the future. (usually the result of an asynchronous operation);
syntactically speaking, Promise is an object from which the message of an asynchronous operation can be obtained;
so if you want to directly obtain the value of the Promise object, you need to obtain it through async await

solution

Obtaining async through async await
is used to declare that a function is asynchronous; while await can be considered as the abbreviation of async await, which is waiting for the completion of an asynchronous method; Usage
rules of async/awiat:

1. async and await should be used together;
2. async means that this is an async function. await can only be used in async functions and cannot be used alone;
3. async returns a Promise object, and await is to wait for the return result of this promise before continuing execution;
4. What await is waiting for is a Promise object, which must be followed by a Promise object, but there is no need to write then(), and the return value can be obtained directly;

async getShelfList(id) {
    
    
  letlist = [];
  list = await infoStore(id)
  console.log('list :>> ', list);
}

Print results

Summarize

To obtain the value of a Promise object asynchronously, you can also use the then method of the Promise object, but the then method performs data processing operations in the interface request object.

getShelfList(id) {
    
    
  let list = [];
  infoStore(id).then((res) => {
    
    
  	// res则为promise对象的返回的值，可以在then()方法里面做数据处理
    list = res.data
  })
}

The usage scenarios of the two methods are different. You can choose the best one according to your personal situation.

The above is personal experience, I hope it will be helpful to everyone!

renew

When using async await to obtain the value of a Promise object, there is no problem in the normal function, but an error will be reported when placed in the forEach() loop. For this problem, please refer to the following article. This article will introduce in detail what cannot be done in the forEach loop. Reasons for using async await asynchronous calls, and how to use them in different loops:
How to use async/await asynchronous calls in for/forEach/map loops