vue中异步请求数据，异步请求还没完成，文件就执行了就会报错，怎么解决？

Question

vue中，axios异步加载数据，但是有的文件里面需要用到异步拿到的数据，数据还没拿到，文件已经执行了，这时候数据就是空，就会报错，这个问题怎么解决？

具体表现：
我这边vue项目是进入页面的时候会调用一个login方法，然后设置localStorage，

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

然后有一个api.js文件，使用的是axios方法

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

但是因为login方法还没执行完api.js文件就已经执行了，所以localStorage.getItem('Authorization')就是空导致报错，请问这个问题怎么解决？

Answer 1

我知道了，可以用函数来实现，因为函数执行是实时的就像使用const SaleClockAuctionContract = window.web3.eth.contract(SaleClockAuction.abi).at(SaleClockAuction.address);const KittyCoreContract = window.web3.eth.contract(KittyCore.abi).at(KittyCore.address);应该使用函数包装起来，实时调用，这样才不会因为文件加载顺序而出现window.web3未定义的错误，const SaleClockAuctionContract = () => {    window.web3.eth.contract(SaleClockAuction.abi).at(SaleClockAuction.address); }const KittyCoreContract = () => {    window.web3.eth.contract(KittyCore.abi).at(KittyCore.address); }