Promise相关方法以及原理，手动实现promise相关功能方法
在前端面试中Promise被问到的概率非常大，在我面试的过程中，懂技术的基本都会问相关问题。对于初学者来说并没有将Promise吃透，因此在面试中很容易被问到，同时能够手动实现一个Promise也是进入大厂的基础条件，以下是我对promise做的一些整理，欢迎各位大佬进行补充!
promise是一个构造函数，可以把他看作一个容器，里面可以存放异步代码，可以通过then方法来对结果进行处理，promise本身是一个同步任务，其then方法是一个异步任务。通过resolve，reject将成功或者失败的结构返回出去，解决了回调地狱的问题。那我们来手动实现一个promise对象
function Promise(executor){
this.PromiseState="pending";
this.PromiseResult=null;
this.callback=[];
const that=this;
function resolve(value){
if(that.PromiseState!=="pending"){
return
}
that.PromiseState="fulfilled"
that.PromiseResult=value
setTimeout(()=>{
that.callback.forEach(item=>{
item.onResolved(value)
})
})
}
function reject(value){
if(that.PromiseState!=="pending"){
return
}
that.PromiseState="rejected"
that.PromiseResult=value
setTimeout(()=>{
that.callback.forEach(item=>{
item.onRejected(value)
})
})
}
try{
executor(resolve,reject)
}catch(e){
reject(e)
}
}
定义then方法、`
Promise.prototype.then=function(onResolved,onRejected){
let that=this
if(typeof onResolved !=="function"){
value=>value
}
if(typeof onRejected !=="function"){
onRejected=reason=>{
console.log(reason,"reason");
throw reason
}
}
return new Promise((resolve,reject)=>{
function public(type){
try{
let result=type(that.PromiseResult)
if(result instanceof Promise){
result.then((v)=>{
resolve(v)
},(r)=>{
reject(r)
})
}else{
resolve(result)
}
}catch(e){
resolve(e)
}
}
if(this.PromiseState==="fulfilled"){
setTimeout(()=>{
public(onResolved)
})
}else if(this.PromiseState==="rejected"){
setTimeout(()=>{
public(onRejected)
})
}
else if(this.PromiseState==="pending"){
this.callback.push({
onResolved:function(){
public(onResolved)
},
onRejected:function(){
public(onRejected)
}
})
}
})
}
定义catch方法
Promise.prototype.catch=function(onRejected){
return this.then(undefined,onRejected)
}
定义resolve方法
Promise.resolve=function(value){
return new Promise((resolve,reject)=>{
if(value instanceof Promise){
value.then(v=>{
resolve(v)
},r=>{
reject(r)
})
}else{
resolve(value)
}
})
}
定义reject方法
Promise.reject=function(err){
return new Promise((resolve,reject)=>{
reject(err)
})
}```
**定义all方法**
```js
Promise.all=function(promises){
return new Promise((resolve,reject)=>{
let count=0;
let arr=[];
for(let i=0;i<promises.length;i++){
promises[i].then(v=>{
count++;
arr[i]=v;
if(count===promises.length){
resolve(v)
}
},r=>{
reject(r)
})
}
})
}
定义race方法
Promise.race=function(promises){
return new Promise((resolve,reject)=>{
for(let i=0;i<promises.length;i++){
promises[i].then(v=>{
resolve(v)
},r=>{
reject(r)
})
}
})
}
all方法和race方法的区别在于，all需要传入的数组中的promise对象全部成功才会返回成功的结果放在数组中，且数组中结果的顺序和原来数组中的顺序一一对应，一旦有一个失败的就会返回第一个失败的结果。而race的结果是最先成功的那个promise返回的结果，该结果不一定是发送请求时数组中的第一个。
const p=new Promise((resolve,reject)=>{
reject("error")
})
console.log(p);
const res= p.then((value)=>{
return "holle"
})
const a=p.catch(e=>{
console.log(e);
})
console.log(res,a);
|