promise深入解析
前置知识
学习promise之前，我们可以先学习一些基础知识，方面后面在学习promise使用和实现的时候能更快的理解
函数
- 函数：通过（）去调用的方法
- 构造函数：通过new 去调用的函数称为构造函数，默认函数名首字母大写
- 实例对象：通过new操作符实例化出来的对象
- 函数对象：将函数当作对象使用，往函数上增加属性和方法（此时称为函数对象）
回调函数
-
同步回调
代码立即执行，只有完全执行完了才结束，相关代码不会放入回调队列中
例子：数组遍历相关回调、promise中的excutor函数
-
异步回调
代码不会立即执行，会放入回调队列中，等待将来某个时刻触发后执行
例子：定时器回调、ajax接口请求回调、promise成功失败的回调
常见的内置错误
-
错误类型
- Error:所有错误的父类型
- ReferenceError:引用的变量不存在
- TypeError:数据类型不正确的错误
- RangeError:数据值不在其所循序的范围内
- SyntaxError:语法错误
-
错误处理
- 捕获错误：try......catch
try{ }catch{ } - 抛出错误：throw error
throw new Error()
- 捕获错误：try......catch
-
错误对象 (通过new 实例化出来的对象)
- message：错误相关信息
- stack：函数调用栈记录信息
promise理解与使用
一般对于一个技术点我们可以从WWH3个方面来进行了解（是什么、为什么、怎么用）
promise是什么
- 抽象化表达：promise是异步编程中的一种新实现，
- 具体化表达：
- 从语法层面上来说promise本质上是一个构造函数，
- 从功能上来说promise对象是用来封装一个异步操作，并可以从中获取到异步操作的结果
promise通过状态的改变来判定异步回调执行
为什么使用promise
// 成功的回调函数
function successCallback(result){
console.log('时间执行成功')
}
// 失败的回调函数
function failCallback(result){
console.log('时间执行成功')
}
// 使用纯回调函数
createAsync(doing,successCallback,failCallback)
// 使用promise回调
const promise = createAudioAsync()
promise.then(successCallback,failCallback)
- 指定回调函数的方式可以更加灵活
- 纯回调：必须先定义回调函数后才能启动异步任务
- promise：启动异步任务-->返回promise对象-->给promise对象上绑定对应的回调函数
- 支持链式调用，可以更好的解决回调地狱的问题,像写同步回调那样去写异步代码
- 通过generrator和promise封装的语法糖async/await是一个更好的解决回调地狱的方法
如何使用promise
promise API说明
-
promise构造函数:promise(excutor){}
- excutor:同步执行（resolve,reject）=>{}
- resolve函数：内部定义成功时我们调用的函数 value=>{]
- reject函数：内部定义失败是我们调用的函数 reason=>{}
- 说明:excutor会在Promise内部立即同步回调，异步操作在执行器中执行
-
promise.prototype.then方法：(onResolved,onRejected) =>{}
- onResolved:成功的回调函数 （value)=>{}
- onRejected:失败的回调函数 （reason）=>{}
- 说明：指定用于得到成功value的成功回调和用于得到失败reason的失败回调返回一个新的promise
-
promise.prototype.catch方法：(onRejected) =>{}
- onRejected:失败的回调函数 （reason）=>{}
- 说明：then()的语法糖，相当于 then(undifined,onRejected)=>{}
-
promise.resolve方法：（value)=>{}
- value:成功的数据或Promise对象
- 说明：返回一个成功/失败的promise对象
-
promise.reject方法：（reason)=>{}
- reason:失败的数据或Promise对象
- 说明：返回一个失败的promise对象
-
promise.all方法：（promise)=>{}
- promise:包含n个的promise的数组
- 说明：返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败了就直接失败
-
promise.race方法：（promise)=>{}
- promise:包含n个的promise的数组
- 说明：返回一个新的promise,第一个完成的promise的结果状态就是最终的结果状态
promiseAPI使用以及思考
-
如何改变promise的状态？
- resolve（value):如果当前是pendding就会变成resolved
- reject(reason):如果当前是pengdding就会变成rejected
- 抛出异常:如果当前是pendding就会变成rejected
-
一个promise指定多个成功/失败的回调函数都会调用么？
当promise改变为对应状态时都会调用
const p = new Promise((resolve,reject)=>{ resolve(1) }) p.then( value=>{console.log(value)}, reason=>{} ) p.then( value=>{console.log('value',value)}, reason=>{} ) // 打印出 1 value1 -
改变promise状态和指定回调函数谁先谁后
-
都有可能，正常情况下时先指定回调函数再改变状态，但是也可以先改状态再指定回调
-
如何先改变状态再指定回调？
- 执行器中直接调用resolve(),reject()
- 延迟更长时间再调用then()
-
什么时候才能得到数据？
- 如果先指定的回调，当状态发生改变时，回调函数就会调用，得到数据
- 如果先改变的状态，当指定回调时，回调函数就会调用，得到数据
-
-
promise.then()返回的新promise的结果状态由什么决定？
- 简单表达：由then（）指定的回调函数执行的结果决定
- 详细表达：
- 如果抛出异常，新promise变为rejected，reason为抛出异常
- 如果返回的时非promise的任意值，新promise变为resolved，value为返回的值
- 如果返回的是另一个promise,此promise的结果就会成为新promise的结果
const p = new Promise((resolve,reject)=>{ resolve(1) }) p.then( // 这里promise的状态是由定义的promise返回的结果决定 value=>{console.log(value)}, reason=>{} ).then( // 这里promise的状态是由上一个promise返回的状态决定的，值是通过return来获得 value=>{console.log('value',value)}, reason=>{} ) -
promise如何串联多个操作任务
- promise的then（）返回一个新的promise，可以开启then()的链式调用
- 通过then的链式调用串联多个同步/异步任务
new Promise((resolve,reject)=>{ setTimeout(()=>{ console.log('执行任务1（异步）') resolve(1) },1000) }).then( value=>{ console.log('任务1结果',value) console.log('执行任务2（同步）') return 2 }, reason=>{} ).then( value=>{ console.log('任务2结果',value) return new Promise((resolve,reject)=>{ setTimeout(()=>{ console.log('执行任务3（异步）') resolve(3) },1000) }) }, reason=>{} ).then( value=>{ console.log('任务3结果',value) }, reason=>{} ) -
promise异常传递？
- 当使用promise的then链式调用时，可以在最后指定失败的回调
- 前面任何操作出了异常，都会传递到最后失败的回调中进行处理
new Promise((resolve,reject)=>{ reject（1） }).then( value=>{ console.log('任务1结果',value) console.log('执行任务2（同步）') return 2 }, // reason=>{throw reason} ).then( value=>{ console.log('任务2结果',value) return 3 }, // reason=>{throw reason} ).then( value=>{ console.log('任务3结果',value) }, // reason=>{throw reason} ).catch(reason=>{ console.log('错误处理',reason) }) -
中断promise链
- 使用promise的then链式调用时，如何在中间中断链式调用
- 办法：在回调函数中返回一个pendding状态的promise
new Promise((resolve,reject)=>{ reject（1） }).then( value=>{ console.log('任务1结果',value) console.log('执行任务2（同步）') return 2 }, reason=>{throw reason} ).catch( reason=>{ console.log('任务2结果',reason) new Promise(()=>{}) // 中断promise链 } ).then( value=>{ console.log('不执行',value) } )
promise实现
定义整体结构
/*
自定义Promise函数模块：IIFE(es5)
*/
// 实例对象上的方法，定义在原型prototype上，
// 构造函数方法定义到函数对象属性上
(function(window){
/* Promise构造函数
excutor：执行器是同步执行 */
function Promise(excutor){}
/* Promise原型对象的then()
指定成功和失败的回调函数
返回一个新的promise对象 */
Promise.prototype.then = function(onResolved, onRejected){}
/* Promise原型对象的catch()
指定失败的回调函数
返回一个新的promise对象 */
Promise.prototype.catch = function(onRejected){}
/* Promise对象的resolve()
返回一个指定结果的成功的函数 */
Promise.resolve = function(value){}
/* Promise对象的reject()
饭hi一个指定reason的失败的promise*/
Promise.reject = function(reason){}
/* Promise对象的all()
返回一个promise，只有当所有promise都成功时才成功，否则只要有一个失败的就失败 */
Promise.all = function(promises){}
/* Promise对象的race()
返回一个promise，其结果由第一个完成的promise决定*/
Promise.race = function(promises){}
// 向外暴露Promise函数
window.Promise = Promise
})(window)
promise构造函数的实现
/* Promise构造函数
excutor：执行器是同步执行 */
function Promise(excutor){
this.status = 'pending' // 给promise对象指定status属性，初始值为pending,有3种状态值
this.data = undefined // 给promise对象指定一个用于存储结果数据的属性
this.callbacks = [] // 给promise对象指定一个用于存储异步回调函数的数组，每个元素的结构 ：{ onResolved(){},onRejected(){}}
const self = this // 缓存当前promise构造函数的this指向
// 用于改变promise状态的函数
function resolve(value){
if(self.status != 'pending') return // 如果当前状态不是pending，直接结束
self.status = 'resolved' // 将状态改为resolved
self.data = value // 保存value数据
if(self.callbacks.length > 0){ // 如果有待执行callback函数，立即异步执行回调函数
setTimeout(()=>{
self.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value)
})
});
}
}
function reject(reason){
if(self.status != 'pending') return
self.status = 'rejected'
self.data = reason
if(self.callbacks.length > 0){
setTimeout(()=>{
self.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(reason)
})
});
}
}
// 立即同步执行excutor
try{ // 执行器执行过程中可能会抛出错误，需要通过try catch进行错误捕获处理
excutor(resolve,reject)
}catch (error){
reject(error)
}
}
/* Promise原型对象的then()
指定成功和失败的回调函数
返回一个新的promise对象*/
Promise.prototype.then = function(onResolved, onRejected){
// 往异步回调数组中push对应的异步操作回调
this.callbacks.push({
onResolved,
onRejected
})
}
promise.then()/catch()的实现
Promise.prototype.then = function(onResolved, onRejected){
// 指定默认的成功回调（实现值穿透）
onResolved = typeof onResolved ==='function'?onResolved:value =>value
// 指定默认的失败回调（实现错误、异常穿透）
onRejected = typeof onRejected ==='function'?onRejected:reason =>{throw reason}
const self = this
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){ // 返回结果是promise的实例，通过then调用去指定对应的回调函数
// result.then(
// value=>resolve(value),
// reason => reject(reason)
// )
// 简洁写法
result.then(resolve, reject)
}else{
resolve(result) // 返回结果是值，直接调用成功的回调
}
} catch(error){
reject(error) // 返回结果出现错误，调用失败的回调
}
}
// 返回一个新的promise对象
return new Promise((resolve,reject)=>{
if(self.status === PENDING){ // 当前状态是pending状态，将回调函数保存起来
this.callbacks.push({
onResolved (){
handle(onResolved)
},
onRejected (){
handle(onRejected)
}
})
} else if (self.status === RESOLVED){ // 当前状态是Resolved状态，延迟调用成功回调
setTimeout(()=>{
handle(onResolved)
})
}else { // 当前状态是Rejected状态，延迟调用失败回调
setTimeout(()=>{
handle(onRejected)
})
}
})
}
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected )
}
promise.resolve/reject()的实现
Promise.resolve = function(value){
return new Promise((resolve,reject)=>{
if(vale instanceof Promise){
value.then(resolve,reject)
}else{
resolve(value) // value 不是promise, promise变为成功，数据是value
}
})
}
/* Promise对象的reject()
返回一个指定reason的失败的promise*/
Promise.reject = function(reason){
return new Promise((resolve,reject)=>{
reject(reason)
})
}
promise.all/race()的实现
/* Promise对象的all()
返回一个promise，只有当所有promise都成功时才成功，否则只要有一个失败的就失败 */
Promise.all = function(promises){
let list = new Array(promises.length) // 用来保存所有成功的value
let num = 0 // 用来保存成功promise的数量
return new Promise((resolve,reject)=>{
promises.forEach((p,index)=>{ // 遍历获取每个promise的结果
p.then(
value=>{
num ++
list[index] = value
if(num === promises.length){
resolve(list)
}
},
reason={ // 只要有一个失败了，return的promise就失败
reject(reason)
}
)
})
})
}
/*Promise对象的race()
返回一个promise，其结果由第一个完成的promise决定*/
Promise.race = function(promises){
return new Promise((resolve,reject)=>{
promises.forEach((p,index)=>{ // 遍历获取每个promise的结果
p.then(
value=>{ // 一旦有成功了，将return变为成功
resolve(value)
},
reason={ // 一旦有失败了，将return变为失败
reject(reason)
}
)
})
})
}
class版本的promise
- 把函数体内的执行部分放到constructor
- 原型上的方法变成类里的实例方法
- 函数的属性方法变成类里的静态类方法
