vue随笔3-关于Vue中created中顺序执行函数的方法---promise的异步实现

关于Vue中created中顺序执行函数的方法—promise的异步实现

前言

最近项目要求路由进入时要在created顺序执行两个methods
首先调用一个方法获取id，再传这个id去调用另一个方法获取数据列表，
遇到了不少坑，要想按照期望的顺序执行，将异步操作队列化,还是得使用promise实现

promise的异步实现

1.created中的写法

代码如下（示例）：

created () {
    let self=this
    new Promise(function (resolve, reject) {
      this.getId(resolve)
    }.bind(this)).then(function () {
      self.getData(true)
    })
}

2.getId这个方法中要用到resolve

代码如下（示例）：

getId (resolve) {
      let self=this
      self.http({
        url: self.api,
        method: 'POST',
        data: data
      }).then((r) => {
        if (r.code === '0') {
          self.id = r.data.id
          resolve()
        }
      }).catch(err => console.log(err))
    },

http是封装的axios，在main.js那里import使用
getData()就是自己要写的接口调用方法了

---

总结

新手前端记录工作时遇到的不少坑，有什么问题请反馈-。-