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

使用bus监听一下login的结果。或者在api.js的getList()加载的时候加个定时器，去判断localStorage.getItem('Authorization')的值是否为空，为空就不执行，不为空就执行getList()，然后清除定时器。

Answer 2

你可以利用axios和请求拦截器和响应拦截器来做处理

1. 请求拦截器：在每一次发送请求判断localStorage中有没有toekn,如果有把token加入到header中，如果没有路由跳转到登录界面

2.响应拦截器：每一次收到响应时重新赋值localStorage中的token

Answer 3

解决

• 把需要Authorization的请求全部放在login之后执行即可

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

原因

• js是单线程执行的
• login和getList都是异步请求
• 他们两个的回调函数,会在请求完成后自动执行
• 所以有可能,getList回调执行时,login还没返回结果

之前代码的执行顺序如下

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

修改代码的执行顺序如下(这时候就确保在执行getlist的时候有权限信息了)

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

原理

• 既然你已经在使用promise了,应该对回调地狱比较了解
• 可以看看阮一峰的es6入门中关于promise和await这两章http://es6.ruanyifeng.com/#do...

Answer 4

我知道了，可以用函数来实现，因为函数执行是实时的
就像使用

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