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