一段业务代码引发的思考

[DrugsZ]

一段业务代码引发的思考

ps:本文只是本人的一些思考,难免会有错误和纰漏,如有错误,请读者不吝斧正

        this.$store.dispatch('addMapTab', obj).then(()=>{
            this.$store.dispatch('getAreaList',param)
        })

最近在做一个项目,大部分都是用的以前项目的组件,但是当前一个电子围栏的组件虽然界面相同,但是逻辑我进行了重写,于是就有看到了这段代码,然后这段代码让我发现了几个问题,

我们先来看看这段代码,在执行addMapTab成功后执行getAreaList,于是我来到addMapTab看一看他到底做了什么

  addMapTab({commit},obj){
  	commit(types.ADD_MAP_TAB,obj)
  },

很奇怪,他没做什么操作,只是commit了一个mutations,

哇,我发现了个以前代码的bug!

桥豆麻袋! 如果是个bug,那么为什么一直没发现呢,我测试了一下确实可以啊,那么到底是哪里的问题呢,既然是执行的dispatch方法,那我就去看看dispatch是怎么实现的;

dispatch (_type, _payload) {
  // check object-style dispatch
  const {
    type,
    payload
  } = unifyObjectStyle(_type, _payload)

  const action = { type, payload }
  const entry = this._actions[type]
  if (!entry) {
    if (process.env.NODE_ENV !== 'production') {
      console.error(`[vuex] unknown action type: ${type}`)
    }
    return
  }

  this._actionSubscribers.forEach(sub => sub(action, this.state))

  return entry.length > 1
    ? Promise.all(entry.map(handler => handler(payload)))
    : entry[0](payload)
}

这个是vuex中关于dispatch的实现方法,我们重点看一看这段代码

  return entry.length > 1
    ? Promise.all(entry.map(handler => handler(payload)))
    : entry[0](payload)

如果actions中存在handler就通过Promise.all来返回处理结果;那么我们来看看
Promise.all做了什么!>

这是MDN文档说明(我个人总结的)

• 如果传入的参数是一个空的可迭代对象，则返回一个已完成（already resolved）状态的 Promise。
• 如果传入的参数不包含任何 promise，则返回一个异步完成（asynchronously resolved） Promise。注意：Google Chrome 58 在这种情况下返回一个已完成（already resolved）状态的 Promise。
• 其它情况下返回一个处理中（pending）的Promise。这个返回的 promise 之后会在所有的 promise 都完成或有一个 promise 失败时异步地变为完成或失败。 见下方关于“Promise.all 的异步或同步”示例。返回值将会按照参数内的 promise 顺序排列，而不是由调用 promise 的完成顺序决定。

这个是阮一峰ECMAScript6入门中关于Promise.all的描述

Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。

我们重点来看看这句

如果传入的参数不包含任何 promise，则返回一个异步完成（asynchronously resolved） Promise。
为什么要注意这句呢?回到刚才的业务代码,我们看到addMapTab方法并未做任何其他处理就直接的commit了mutations,那么按照文档中的说法,当我们执行

    this.$store.dispatch('addMapTab', obj)

的时候,会直接通过Promise.resolve返回一个处于resolve状态的Promise对象,
那么我们来可以来试试Promise.resolve是什么效果

    Promise.resolve(
        setTimeout(function(){
            console.log(1)
        },0)
    ).then(()=>{
        console.log(2)
    })

    // 2,1

    Promise.resolve(
        console.log(1)
    ).then(()=>{
        console.log(2)
    })
    //1,2

我们从打印顺序来看,Promise.resolve并没有在setTimeout中进行任何处理,就直接触发了then回调,这也符合文档中提到的,如果传入的对象中没有Promise实例会直接返回一个resolve状态的Promise对象,那么回到我们之前的业务代码

        this.$store.dispatch('addMapTab', obj).then(()=>{
            this.$store.dispatch('getAreaList',param)
        })

因为addMapTab中并没有任何的异步处理,所以会同步执行addMapTab``getAreaList,
也就是说相当于下面的代码

        this.$store.dispatch('addMapTab', obj)
        this.$store.dispatch('getAreaList',param)

由此我们可以看出,如果不是在actions中通过promise进行异步操作,那么在调用时没必要注册then回调,因为不管是否通过then来执行,都会按照顺序来一步一步的来进行执行;