ES6提供的Promise对象是异步控制相较于回调的更好的一种方法。包括ES8提供的asyncFunction本质上也是基于Promise和生成器的结合，因此在已经了解Promise对象的常用API基础上，更加深入的去了解如何使用Promise去解决一些常见的难题对于开发将会有一些帮助。
文章阅读前，希望读者已经对Promise的使用及相关api有了一定的了解 。[ 快速学习Promise ]
一、如何对Promise异步任务进行超时监听
任务描述
作为一道开胃小菜，这个问题还是不难解决的。平时对于一些异步任务很有可能需要进行超时监听，那么如何利用Promise来进行超时监听/监控呢？
解决方案
// 封装一个严格任务函数，第一个参数为promise对象，第二个参数为判定的超时标准，默认3s
function strictTack(promise,delay = 3){
// 函数返回一个超时基准promise对象
let promiseTimeout = function(delay){
return new Promise((res,rej)=>{
setTimeout(()=>{
rej(new Error("运行超时！"))
},1000 * delay)
})
}
// race，参数数组内的promise并发执行，一旦其中有一个promise对象产生判决就会终止其余的promise对象
return Promise.race([promise,promiseTimeout(delay)])
}
// 异步任务p1
let p1 = new Promise((res,rej)=>{
setTimeout(()=>{
res("p1 was resoved")
},1000 * 2)
})
// 异步任务p2
let p2 = new Promise((res,rej)=>{
setTimeout(()=>{
res("p2 was resoved")
},1000 * 4)
})
strictTack(p1)
.then(e=>{
console.log(e)// p1 was resoved
}).catch(err=>{
console.log(err)
})
strictTack(p2)
.then(e=>{
console.log(e)
}).catch(err=>{
console.log(err) // Error:运行超时！
})
任务总结
对于这个问题来说，核心部分就是利用好Promise.race这个API，因为使用它所执行的的Promise对象中的异步任务都是“竞态”的，只接受第一个发生判决的Promise对象。那么此时采用超时基准promise对象配合race正好巧妙的解决了超时监听的问题。
二、如何自己实现一个Promise
任务描述
这种具有一定难bian度tai的题目一般会在面试中遇到，那么如何手动实现一个Promise（或部分功能）？
解决方案
-
V 0.1初步版本的Promise (不支持正规Promise的链式调用)class PromisePolyfill{ constructor(exector = ()=>{}){ this.status = 'pending' // promise当前状态 this.reason = undefined // 用户回显到reject函数的值 this.value = undefined // 用户回显到resolve函数的值 // 成功事件回调队列 this.onFulfilledCallBacks = [] // 失败事件回调队列 this.onRejectedCallBacks = [] //实现resolve函数 let resolve = (value)=>{ if(this.status === 'pending'){ this.value = value this.status = 'fulfilled' this.onFulfilledCallBacks.map(e=>e()) } } // 实现reject函数 let reject = (reason)=>{ if(this.status === 'pending'){ this.reason = reason this.status = 'rejected' this.onRejectedCallBacks.map(e=>e()) } } try{ // 运行执行器 exector(resolve,reject) }catch(err){ reject(err) } } then(onFulfilled,onRejected){ // 同步情况 if(this.status === 'fulfilled' && onFulfilled){ onFulfilled(this.value) } if(this.status === 'rejected' && onRejected){ onRejected(this.reason) } // 异步情况 if(this.status === 'pending'){ // 将任务成功回调加入到成功队列中 onFulfilled && this.onFulfilledCallBacks.push(()=>{ onFulfilled(this.value) }) // 将任务失败回调加入到失败队列中 onRejected && this.onRejectedCallBacks.push(()=>{ onRejected(this.reason) }) } return this } catch(onRejected){ // 将任务失败回调加入到失败队列中 onRejected && this.onRejectedCallBacks.push(()=>{ onRejected(this.reason) }) return this } } -
V 0.2支持链式调用，但是未实现Promise的相关API--all、race、reject、resolveclass PromisePolyfill{ constructor(exector = ()=>{}){ this.status = 'pending' // promise当前状态 this.reason = undefined // 用户回显到reject函数的值 this.value = undefined // 用户回显到resolve函数的值 // 成功事件回调队列 this.onFulfilledCallBacks = [] // 失败事件回调队列 this.onRejectedCallBacks = [] //实现resolve函数 let resolve = (value)=>{ if(this.status === 'pending'){ this.value = value this.status = 'fulfilled' this.onFulfilledCallBacks.map(e=>e()) } } // 实现reject函数 let reject = (reason)=>{ if(this.status === 'pending'){ this.reason = reason this.status = 'rejected' this.onRejectedCallBacks.map(e=>e()) } } try{ // 运行执行器 exector(resolve,reject) }catch(err){ reject(err) } } then(onFulfilled,onRejected){ let promise2 = new PromisePolyfill((resolve, reject)=>{ if(this.status === 'fulfilled' && onFulfilled){ let x = onFulfilled(this.value) // resolvePromise函数，处理自己return的promise和默认的promise2的关系 resolvePromise(promise2, x, resolve, reject) } if(this.status === 'rejected' && onRejected){ let x = onRejected(this.reason) resolvePromise(promise2, x, resolve, reject) } // 异步情况 if(this.status === 'pending'){ // 将任务成功回调加入到成功队列中 onFulfilled && this.onFulfilledCallBacks.push(()=>{ let x = onFulfilled(this.value) // resolvePromise函数，处理自己return的promise和默认的promise2的关系 resolvePromise(promise2, x, resolve, reject) }) // 将任务失败回调加入到失败队列中 onRejected && this.onRejectedCallBacks.push(()=>{ let x = onRejected(this.reason) resolvePromise(promise2, x, resolve, reject) }) } }) return promise2 } } function resolvePromise(promise2, x, resolve, reject){ // 循环引用报错 if(x === promise2){ // reject报错 return reject(new TypeError('Chaining cycle detected for promise')); } // 防止多次调用 let called; // x不是null 且x是对象或者函数 if (x != null && (typeof x === 'object' || typeof x === 'function')) { try { // A+规定，声明then = x的then方法 let then = x.then; // 如果then是函数，就默认是promise了 if (typeof then === 'function') { // 就让then执行 第一个参数是this 后面是成功的回调 和 失败的回调 then.call(x, y => { // 成功和失败只能调用一个 if (called) return; called = true; // resolve的结果依旧是promise 那就继续解析 resolvePromise(promise2, y, resolve, reject); }, err => { // 成功和失败只能调用一个 if (called) return; called = true; reject(err);// 失败了就失败了 }) } else { resolve(x); // 直接成功即可 } } catch (e) { // 也属于失败 if (called) return; called = true; // 取then出错了那就不要在继续执行了 reject(e); } } else { resolve(x); } } -
在
v0.2基础上封装相关API-
all(iterable)这个方法接受一个promise数组，返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。
PromisePolyfill.all = function (promises){ function processData (){ let Arr = [] let i = 0 return function (index,data,resolve){ Arr[index] = data i++ if(i === promises.length){ resolve(Arr) } } } let process = processData() return new PromisePolyfill((resolve,reject)=>{ promises.map((promise,index) => { promise.then(data=>{ process(index,data,resolve) },reject) }) }) }-
race(iterable)这个方法接受一个promise数组。当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象。
PromisePolyfill.race = function(promises){ return new PromisePolyfill((resolve,reject)=>{ promises.map(promise=>{ promise.then(resolve,reject) }) }) }-
resolve(value)返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。
PromisePolyfill.resolve = function(data){ return new PromisePolyfill((resolve,reject)=>{ resolve(data) }) }-
reject(value)返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法
PromisePolyfill.reject = function(data){ return new PromisePolyfill((resolve,reject)=>{ reject(data) }) } -
三、手写一个Promise的Ajax函数
任务描述
老生常谈的问题了，面试官喜欢问的问题。主要思想实现出来就好了
解决方案
function ajax (params){
return new Promise((resolve,reject)=>{
let request = new XMLHttpRequset()
//设置请求方式和请求地址
request.open(params.type || 'get',params.url)
request.onreadystatechange = ()=>{
//当请求返回响应时
if(request.readyState === 4){
// 默认情况下返回200意味着请求成功
if(request.status === 200){
resolve(JSON.parse(request.responseText))
}else{
reject(JSON.parse(request.responseText))
}
}
}
//携带请求头发送请求
request.send(params.data || null)
})
}
四、理论部分
关于then和catch的返回值
如果自己去实现了一次Promise对象之后会发现，then和catch如果没有返回一个标准的promise对象时，将会默认返回一个Promise.resolve(基本值)，即使你没有写任何return语句。
let p1 = new Promise((res,rej)=>{
setTimeout(()=>{
// rej("p1 was rejected")
res("p1 was resoved")
},1000 * 2)
})
p1.then(res=>{
console.log("Then1:"+res)
}).then(res=>{
console.log("Then2:"+res)
return 'Hello'
}).catch(err=>{
console.log("Error1:"+err)
return Promise.reject("Error For Catch 1")
}).then(res=>{
console.log("Then3:"+res)
return Promise.reject('ERROR For Then 3')
}).then(res=>{
console.log("Then4:"+res)
}).catch(err=>{
console.log("Error2:"+err)
}).then(res=>{
console.log("Then5:"+res)
})
/*
结果
Then1:p1 was rejected
Then2:undefined
Then3:Hello
Error2:ERROR For Then 3
Then5:undefined
*/
经过分析不难发现，对于一个Promise中的链式调用的顺序是这样的：
- 对于一个
then/catch，默认返回为一个resolve - 当返回一个
reject时，将调用当前节点往后的最近的catch节点中的回调（跳过中间的then） - 如果当前节点并没有返回
reject但是恰巧后面的节点就是是catch，那么将会跳过这个（或连续几个）catch，直接到后面最近的then节点
以上为现象，原理请参考第二节Promise的实现
关于async Function (async/await)
asyncFunction是ES8中提出的更好的异步解决方案，实际用起来也确实如此。那么asyncFunction与Promise之间存在什么样的关系呢？
[ 快速学习async Function ]
async function fetch(){
console.log("Fetch is RUNING") // 立即输出Fetch is RUNING
let data1 = await new Promise((res,rej)=>{
setTimeout(()=>{
res(1)
},1000 * 2)
})
console.log(data1) //时间线至少2s后打印1
let data2 = await new Promise((res,rej)=>{
setTimeout(()=>{
res(2)
},1000 * 5)
})
console.log(data2) // 时间线至少2+5=7s后打印2
console.log(data1+data2) // 紧接着上一句执行，打印 3
}
fetch()
上例中展示了async/await的基本用法和执行过程
- 第一句同步打印任务可以直接输出。
- 第二句遇到
await,将会等待当前await任务返回Promise.resolve后才会继续执行下一句。这种模式和生成器的模式非常相像，async/await优于生成器的地方就是，生成器需要手动next才能进行下一步，而async/await是自动next,显然实现上要更为复杂。 - 依次类推...
从这个例子中可以看出，多个await产生的异步任务是逐个执行的，而不是并发。所以想要实现多异步任务并发控制，仍然需要使用
Promise.all或者Promise.race。
接下来，再来看个例子
async function fetch(){
let data1 = await new Promise((res,rej)=>{
setTimeout(()=>{
res(1)
},1000 * 2)
})
let data2 = await new Promise((res,rej)=>{
setTimeout(()=>{
res(2)
},1000 * 5)
})
return data1 + data2
}
fetch().then(res=>{
console.log(res) // 至少7s后输出 3
})
你没看错，asyncFunction将会默认返回一个Promise对象，和Promise.prototype.then返回Promise的效果一致
到这儿不难看出Promise的重要性了吧，现在的主要异步任务控制方式实际上都没有离开Promise。