Data is requested asynchronously in vue. If the file is executed before the asynchronous request is completed, it will report an error. How to solve this problem?

vue, axios loads data asynchronously, but some files need to use the data obtained asynchronously. Before the data is obtained, the file has already been executed. At this time, the data is empty and an error will be reported. How to solve this problem?

specific performance:
my vue project will call a login method when entering the page, and then set localStorage,

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, localStorage.getItem ("Authorization") is empty and causes an error. How to solve this problem?

Asynchronous-programming javascript axios vue.js

May.19,2022

< H2 > solve < / H2 >

put all requests requiring 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
login and getList are both asynchronous requests
the callback functions of both of them will automatically execute
so it is possible that login has not returned a result when the getList callback is executed

the execution order of the previous code is as follows

login()  // => 1
getList() // => 2
login() // => 34
getList() // => 34

the execution order of the modified code is as follows (at this point, make sure you have permission information when executing getlist)

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

principle

now that you are already using promise , you should know more about callback hell
see the two chapters on promise and await in Ruan Yifeng's introduction to es6 http://es6.ruanyifeng.com/-sharpdo....

use bus to listen for the results of login. Or add a timer when api.js 's getList () is loaded to determine whether the value of localStorage.getItem ('Authorization') is empty, do not execute if it is empty, execute getList () if not, and then clear the timer.

you can use axios and request interceptor and response interceptor to do processing

request interceptor: check whether there is toekn in localStorage every time you send a request. If token is added to header, if there is no route to jump to the login interface

2. Response interceptor: re-assign token in localStorage every time a response is received

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);
}

Previous: Positioning the center with transform:translate causes the browser to appear a scroll bar

Next: About passing parameters back to the address bar