理解
- 抽象表达：Promise是JS中进行异步编程的新的解决方案
- 具体表达：
- 从语法上来说：promise是一个构造函数
- 从功能上来说：promise对象用来封装一个异步操作并可以获取其结果
状态改变
- pending变为resolved
- pending变为rejected
- 说明：只有这两种，且一个promise对象只能改一次，无论变为成功还是失败，都会有一个结果数据，成功的结果数据一般称为value，失败的结果数据一般称为reason
基本使用
//创建一个新的promise实例对象
const p = new Promise((resolve,reject)=>{ //执行器函数
//执行异步任务
setTimeout(()=>{
const time = Date.now() //如果当前时间是偶数就代表成功，否则代表失败
if(time % 2 == 0){
//如果成功，调用resolve(value)
resolve('成功的数据，time=' + time)
}else{
//如果失败，调用reject(reason)
reject('成功的数据，time=' + time)
}
},1000)
})
p.then(
value=>{ //接收得到成功的value数据 onResolved
console.log('成功的回调',value)
},reason=>{ //接收得到失败的reason数据 onRejected
console.log('失败的回调',reason)
})
几个关键问题
- 如何改变promise的状态？
- resolve(value):如果当前是pending就会变为resolved
- reject(reason):如果当前是pending就会变成rejected
- 抛出异常：如果当前是pending就会变为rejected
- 一个promise指定多个成功/失败回调函数，都会调用吗？
- 当promise改变为对应状态时都会调用
- 改变promise状态和指定回调函数谁先谁后？
- 都有可能，正常情况下是先指定回调再改变状态，但也可以先改变状态再指定回调
- 如何先改状态再指定回调？
- 在执行器中直接调用resolve()/reject()
- 延长更长时间调用then()
- 什么时候才能得到数据？
- 如果先指定回调，那当状态发生改变时，回调函数就会调用，得到数据
- 如果先改变状态，那当指定回调时，回调函数就会调用，得到数据
- promise.then()返回的新promise的结果状态由什么决定？
- 简单表达：由then()指定的回调函数执行的结果决定
- 详细表达：
- 如果抛出异常，新promise变为rejected，reason为抛出的异常
- 如果返回的是非promise的任意值，新promise变为resolved，value为返回的值
- 如果返回的是另一个新promise，此promise的结果就会成为新promise的结果
- promise异常传透
- 当使用promise的then链式调用时，可以在最后指定失败的回调
- 前面任何操作出了异常，都会传到最后失败的回调中处理
- 中断promise链
- 当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
- 办法：在回调函数中返回一个pending状态的promise对象
手写promise
/*
自定义Promise函数模块：IIFE
*/
(function(window) {
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'
//Promise构造函数 executor：执行器函数()
function Promise(executor) {
const self = this
self.status = PENDING //给Promise对象指定status属性，初始值为pending
self.data = undefined //给Promise对象指定一个用于存储结果数据的属性
self.callbacks = [] //每个元素结构：{ onResolved(){} , onRejected(){} }
function resolve(value) {
//如果当前状态不是pending，直接结束
if (self.status !== PENDING) {
return
}
//状态改变为resolved
self.status = RESOLVED
//保存value数据
self.data = value
//如果有待执行callback函数，立即异步执行回调函数onResolved
if (self.callbacks.length > 0) {
setTimeout(() => {
self.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value)
});
})
}
}
function reject(reason) {
//如果当前状态不是pending，直接结束
if (self.status !== PENDING) {
return
}
//状态改变为rejected
self.status = REJECTED
//保存value数据
self.data = reason
//如果有待执行callback函数，立即异步执行回调函数onRejected
if (self.callbacks.length > 0) {
setTimeout(() => {
self.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(reason)
});
})
}
}
try {
executor(resolve, reject)
} catch (error) {
reject(error)
}
}
//Promise原型对象上的then(),指定成功和失败的回调函数,返回promise的结果由onResolved和/onRejected执行结果决定
Promise.prototype.then = function(onResolved, onRejected) {
onResolved = typeof onResolved === 'function' ? onResolved : value => value //向后传递成功的value
//指定默认的失败回调（实现错误/异常传透的关键点）
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason } //抽取传递失败的reason
const self = this
//返回一个新的promise
return new Promise((resolve, reject) => {
function handle(callback) {
/*
1.如果抛出异常，return的promise就会失败，reason就是error
2.如果回调函数返回不是promise，return的promise就会成功，value就是返回的值
3.如果回调函数返回是promise，return的promise结果就是这个promise的结果
*/
try {
const result = callback(self.data)
if (result instanceof Promise) {
result.then(
value => resolve(value), //当result成功时，让return的promise也成功
reason => reject(reason) //当result失败时，让return的promise也失败
)
//result.then(resolve,reject)
} else {
resolve(result)
}
} catch (error) {
reject(error)
}
}
//当前状态还是pending状态，将回调函数保存起来
if (self.status === PENDING) {
self.callbacks.push({
onResolved(value) {
handle(onResolved)
},
onRejected(reason) {
handle(onRejected)
}
})
} else if (self.status === RESOLVED) { //如果当前是resolved状态，异步执行onResolved并改变return的promise的状态
setTimeout(() => {
handle(onResolved)
})
} else { //如果当前是rejected状态，异步执行onRejected并改变return的promise状态
setTimeout(() => {
handle(onRejected)
})
}
})
}
//Promise原型对象上的catch()，指定失败的回调函数，返回一个新的promise
Promise.prototype.catch = function(onRejected) {
return this.then(undefined, onRejected)
}
//Promise函数对象上的resolve,返回一个指定结果的成功的promise
Promise.resolve = function(value) {
//返回一个成功/失败的promise
return new Promise((resolve, reject) => {
if (value instanceof Promise) { //使用value的结果作为promise的结果
value.then(resolve, reject)
} else { //value不是promise => promise变为成功，数据为value
resolve(value)
}
})
}
//Promise函数对象上的reject，返回一个指定reason的失败的promise
Promise.reject = function(reason) {
//返回一個失敗的Promise
return new Promise((resolve, reject) => {
reject(reason)
})
}
//Promise函数对象上的all，返回一个promise，只有当所有promise都成功时才成功，否则只要有一个失败就失败
Promise.all = function(promises) {
const values = new Array(promises.length) //用来保存所有成功value的数组
let resolveCount = 0 //用来保存成功promise的数量
return new Promise((resolve, reject) => {
//遍历promises获取每个promise的值
promises.forEach((p, index) => {
Promise.resolve(p).then(
value => {
resolveCount++ //成功的数量加1
//p成功，将成功的value保存values
values[index] = value
//如果全部成功了，将return的promise改变成功
if (resolveCount == promises.length) {
resolve(values)
}
},
reason => {
reject(reason)
}
)
})
})
}
//Promise函数对象上的race,返回一个promise，结果由第一个完成的promise决定
Promise.race = function(promises) {
//返回一个promise
return new Promise((resolve, reject) => {
//遍历promises获取每个promise的结果
promises.forEach((p, index) => {
Promise.resolve(p).then(
value => { //一旦有成功了，将return变为成功
resolve(value)
},
reason => { //一旦有失败了，将return变为失败
reject(reason)
}
)
})
})
}
//向外暴露Promise函数
window.Promise = Promise
})(window)
