undefinedfix
Sign in

Asynchronous request data in Vue. If the file is executed before the asynchronous request is completed, an error will be reported. How to solve this problem?

auserdude edited in Tue, 21 Jun 2022

In Vue, Axios loads data asynchronously, but some files need to use the data obtained asynchronously. The data has not been obtained, and the file has been executed. When the data is empty, an error will be reported. How can this problem be solved?

Specific performance: my Vue project calls a login method when entering the page, and then sets localstorage,

this.login().then(res => {
    if (res.code === 0) {
        localStorage.setItem(res.data.access_token)
    }
});

And then there's one api.js File, using the Axios method

const instance = axios.create({
    baseURL: config.BASE_URL,
    headers: {
        Authorization: localStorage.getItem('Authorization') || ''
    }
});
export default {
    getList() {
        return instance.request({
            url: '123',
            method: 'get'
        })
    }
}

But because the login method has not finished executing the API . JS file has been executed, so localstorage . getItem (' Authorization ') It is empty that leads to error. How can I solve this problem?

4 Replies
xajuw
commented on Tue, 21 Jun 2022

I've learned that it can be implemented with functions, because function execution is real-time, just like using

const SaleClockAuctionContract = window.web3.eth.contract(SaleClockAuction.abi).at(SaleClockAuction.address);
const KittyCoreContract = window.web3.eth.contract(KittyCore.abi).at(KittyCore.address);

It should be packaged with functions and called in real time, so that windows will not appear because of the file loading order . Web3 undefined error,

const SaleClockAuctionContract = () => {
    window.web3.eth.contract(SaleClockAuction.abi).at(SaleClockAuction.address);
}
const KittyCoreContract = () => {
    window.web3.eth.contract(KittyCore.abi).at(KittyCore.address);
}
thabouti
commented on Tue, 21 Jun 2022

solve

  • Put all the requests that need authorization after login to execute
this.login().then(res => {
    if (res.code === 0) {
        localStorage.setItem(res.data.access_token)
        getList();
    }
});

reason

  • JS is executed by a single thread
  • Both login and GetList are asynchronous requests
  • Their two callback functions are executed automatically after the request is completed
  • So it is possible that when the GetList callback is executed, the login does not return the result

The order of execution of the previous code is as follows

login()  // => 1
getList() // => 2
login()的回调 // => 可能是3也可能是4
getList()的回调 // => 可能是3也可能是4

The order of execution of the modified code is as follows ( At this time, make sure that you have permission information when executing GetList )

login()  // => 1
login()回调 // => 2
getList() // => 3
getList()回调 // => 4

principle

  • Now that you are using promise, you should know more about callback hell
  • You can see the two chapters about promise and await in Ruan Yifeng's ES6 introduction http://es6.ruanyifeng.com/#do...
Serket
commented on Tue, 21 Jun 2022

Use bus to monitor the result of login. Or in api.js Add a timer when loading getlist() to judge localStorage.getItem If the value of ('authorization ') is empty, it will not be executed if it is empty, and GetList () will be executed if it is not empty, and then the timer will be cleared.

Nerrix
commented on Wed, 22 Jun 2022

You can use Axios and request and response interceptors to do the processing

  1. Request Interceptor: determine whether there is a token in localstorage every time a request is sent. If there is a token added to the header, if there is no route, jump to the login interface

2. Response Interceptor: reassign the token in localstorage every time a response is received

lock This question has been locked and the reply function has been disabled.