vue-cli生成的webpack配置中一段代码解惑：dev-server.js有段关于promise的代码

Question

在dev-server.js中有段关于promise的代码如下：

var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})

console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
  // when env is testing, don't need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve()
})

var server = app.listen(port)

module.exports = {
  ready: readyPromise,
  close: () => {
    server.close()
  }
}

为什么要加这个啊？

Answer 1

加上完整的上下文：

var _resolve
var readyPromise = new Promise(resolve => {
  _resolve = resolve
})

console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
  // when env is testing, don't need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
  _resolve()
})

var server = app.listen(port)

module.exports = {
  ready: readyPromise,
  close: () => {
    server.close()
  }
}

源码里面是把 resolve 方法写在外面了，其实和写在里面是一样的：

var readyPromise = new Promise(resolve => {
  console.log('> Starting dev server...')
  devMiddleware.waitUntilValid(() => {
    console.log('> Listening at ' + uri + '\n')
    // when env is testing, don't need open it
    if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
      opn(uri)
    }
    resolve()
  })
})

这样是不是就好理解一些了呢？

Answer 2

就从你发的这一小部分代码来看，我觉得应该是为了简化代码解构，减少嵌套

一般我们写一个promise，都是这样

var promise = new Promise( resolve => {
    // 这里写一大堆代码
    resolve()
} );

这样就要在promise中包一大堆代码
如果把resolve赋值给一个外部变量_resolve，我就可以把需要写在promise构造函数中的代码写到外面了，只要完成时调用一下_resolve就行了