es6 promise的容易出现的问题

promise：简单来说是可以获取到异步操作的消息

then：为 Promise 实例添加状态改变时的回调函数

a() {
     return new Promise(function (resolve, reject) {
          resolve()
      })
    }
  a().then(() => {
          return new Promise(function (resolve, reject) {
             resolve()
          }).then(() => {
             console.log("success111")
          },() => {
            console.log("rejected111")
          })
     }).then(() => {
      console.log("success222")
     },() => {
       console.log("rejected222")
     })

这个打印结果倒是没有什么问题 依次是success111和success222

但是当在第一个then里面变成了一个网络的请求的时候，那么结果又会是什么样子呢

  a() {
     return new Promise(function (resolve, reject) {
          resolve()
      })
  }
 
  a().then(() => {
        // 初次的fetchPost是封装的axios的post请求
        fetchPost(this.username, this.password).then(response => {
           console.log(response)
        }).catch(error => {
            
        })
     }).then(() => {
      console.log("success222")
     },() => {
       console.log("rejected222")
     })

答案是success222 和Object {data: undefined, status: 200, statusText: "OK", headers: Object, config: Object…}

为什么会是这样呢？

我们先来回顾一下then的用法。then是在promise的状态结果产生fulfilled或者rejected的时候发生回调并且then方法的第一个参数是fulfilled状态的回调函数，第二个参数（可选）是rejected状态的回调函数。那么在这个案例中,第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化，结果也是fulfilled。在第二个案例中结果解释类同第一个，不同于的是第二个因为多了异步操作的等待，在异步操作的等待的时候，第二个then也等待出了一个then的对象发生的变化，也就是fulfilled。

解决的方法在异步操作里面重新添加创建一个promise实例，让它必须走完异步操作才能走第二个then

 第一种为它添加一个新的promise

  a() {
     return new Promise(function (resolve, reject) {
          resolve()
      })
    }   

  a().then(() => {
        return new Promise((resolve, reject) => {
            fetchPost(this.username, this.password).then(response => {
               console.log(response)
                resolve()
            }).catch(error => {
                reject()
            })
        })
       
     }).then(() => {
      console.log("success222")
     },() => {
       console.log("rejected222")
     })

第二个因为then返回的结果就是一个新的promise的实例

  a() {
     return new Promise(function (resolve, reject) {
          resolve()
      })
    }   

  a().then(() => {
        return fetchPost(this.username, this.password).then(response => {
               console.log(response)
                resolve()
            }).catch(error => {
                reject()
            })
       
     }).then(() => {
      console.log("success222")
     },() => {
       console.log("rejected222")
     })

具体的资源参考：http://es6.ruanyifeng.com/#docs/promise