created方法中调用接口的执行顺序控制

众所周知，vue是单页面应用，我们在加载一个页面的时候，有些接口需要在页面创建时就调用，从接口中获取数据，然后渲染在页面上，简单来说就是在钩子函数created阶段调用接口。

像这样写，大概率很常见

 但是如果我们想从getList接口里获取列表数据，然后再通过获取到的字段作为参数，去调用其他接口的时候，这样的方法是取不到值的，因为不管你在钩子函数created里写的顺序如何，js中默认执行网络请求是异步的，他们会按顺序发出请求之后就不管了，谁先返回是不确定的。

我尝试过使用$nextTick，把需要后执行调用的函数放在$nextTick里，期待可以让他有一个延后的效果，$nextTick 是在下次 DOM 更新循环结束之后执⾏延迟回调，在修改数据之后使⽤ $nextTick，则可以在回调中获取更新后的 DOM，在下次 DOM 更新循环结束之后执行延迟回调。

       this.$nextTick(() => {
         this.handleReceiveSamples()
       })

简而言之，我期待的效果并没有实现。

然后我又想到setTimeout，定时器是直接解决函数执行顺序的方法了，但是同样也有弊端，因为没有办法确定第一个调用接口的响应时长，设置过长，用户体验感势必不会太好，设置过短，如果更换服务器或者网络过慢，后续接口就不会调用，引起更大的问题。我写这篇文章之前刚被后端同事敲了，小X啊，你说你改好了，可是这接口直接没调了啊。（尴尬！哭哭）

那么重点来了，调用接口我们是要操作数据啊，那么，调用其他方法自然也是操作数据的一部分，

只要将需要延后调用的接口写在上一个接口的.then里就轻松解决。（我怎么没想到呢）

export default {
  data(){
    return {
      data:{}
    }
  },
  created() {
    this.getList()  // 在这里调用第一个接口
  },
  methods: {
    getList(){
      getList().then(res=>{
        this.data=res.data  //  这里就可以从接口里拿到数据了
        // 这时候在调用第二个接口，就保证了在上一个接口后面执行
        this.handleReceiveSamples(res.data)  
      })
    }
  }  
}