记录一次axios请求造成的数组初始化失败

Posted 2021-02-17 骚年上天不?

axios请求是一个异步的请求，简单来讲就是在做其他事情的时候可以把这个先放一边等其他的事情做完后再来做这件事件。

我之前这样调用了一个方法：

mounted() {
        this.first()
        this.next();
    }
first(){
     this.next();
}
next(){
    this.Array = [];
    axios.post(url).then((res)=>{
         this.Array.push(res)
    })        
}

可以看到我是调用了两次的next事件，我在next最开始的部分对数组进行了初始化，按照我的预想是这个数组里面始终只有一个接口返回的res数据在里面，但是执行后发现数组里面有两个res。

后来对next和axios打印后发现，first的时候执行了初始化数组，但是并没有立即执行axios，把axios放一边，然后向下执行遇到next，于是再次执行初始化，执行完成后发现没有了，所以就找到axios，因为两次调用了axios所以push了两个res到数组里面去。

把代码改为这样，就解决了：

mounted() {
        this.first()
        this.next();
    }
first(){
     this.next();
}
next(){
    axios.post(url).then((res)=>{
        this.Array = [];
         this.Array.push(res)
    })        
}

严格来讲这个并不是axios请求的锅，是我本身对同步，异步执行的顺序存在理解上的问题，这个锅要自己背。

而最开始我对于同步异步的简单概述其实也是不标准的，对于异步，同步，阻塞，非阻塞还请参考其他大神的详细解释。