promise加强

最新推荐文章于 2024-03-20 14:14:44 发布
最新推荐文章于 2024-03-20 14:14:44 发布
阅读量449 收藏
点赞数
分类专栏： 提升 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39056703/article/details/126971434
版权

1.高阶函数：一个函数接受一个函数或者像闭包一样的返回一个函数; (函数的参数里面有函数)

function doSth(t,cb){
    return function(){
        if(--t===0){
            cb();        
        }    
    }
}

function logSth(){
    console.log('努力成为人上人')
}

let fn =doSth(3,logSth);

fn();
fn();
fn();
//在执行第三次的时候打印了

2.回调地狱

$.ajax({
    success(data1){
       $.ajax({
           data:{d:data1},
           success(data2){
               data:{e:data2},
               $.ajax({
                   ....               
               })           
           }       
       })         
    }
})

ajax是异步请求

3.promise 承诺 （承诺实现 resolve(解决问题) 承诺石沉大海 reject 承诺等待结果中 pending）

promise解决异步流程化的一种手段 promise的目的

promise是一个构造函数 是需要new的

promise里面有且只有一个参数是excutor执行器

excutor有两个参数---> 一个是resolve 一个是reject ---->两个参数都是函数 都是可以执行的

excutor执行器是在new Promise的时候调用执行的

//excutor执行器是同步执行的(!Important)
let promise =new Pronise((resolve,reject)=>{
    resolve('承诺实现');
    //reject('承诺石沉大海')
});
//每个promise对象都有一个then方法  (then是异步的)
promise.then((res)=>{
    console.log('Then')
    console.log(res);//承诺实现
},(err)=>{
    console.log(err);//只有在状态为reject的时候执行这个   承诺石沉大海
})
console.log('Gloabl')
//输出结果 (因为Then方法是异步的)
//1.Gloabl
//2.Then
//3.承诺实现

两个参数一个状态之间的关系

pending-->resolved 或

pending-->rejected 反过来是不行的 resolved <--->rejected 这两个执行之后的状态是不能够相互转换的

4.promise.all

用于多个异步任务并发运行，他的结果创建之后使用，等待所有任务结果的完成

Promise.all(iterable) iterable的数据类型必须是Array Map Set结构的

Promise.all([
    1,true,'123'
]).then(res=>{
    consoloe.log(res);//[1,true,'123']
})
//iterable内部传递的是promise对象集合，如果不是就直接resolve
//iterable内部没有元素 就返回空数组
//如果iterable中间的promise有一个rejected了 那就直接返回rejected
//如果iterable中间有多个失败  返回的始终是第一个失败的结果

Promise.resolve('成功啦')等价于下面 (语法糖)
new Promise((resolve,reject)=>{
    resolve('成功啦')
})
Promise.reject('失败啦') 同理
new Promise((resolve,reject)=>{
    reject('失败啦')
})

5.Promise.race

用于多个异步任务并发运行，谁先完成，就返回那个promise的结果 无论是fullfilled(成功完成状态)还是rejected

Promise.race(iterable) iterable的数据类型必须是Array Map Set结构的

如果iterable里面是空的，则不回返回，其状态永远都是pending状态

用的少 但是在测试资源响应速度或者接口响应的速度时可以用

6.async await

saync是一个异步函数 await就是一个操作符

async的意思是当前这个异步函数与同一作用域下的程序是异步关系

await就是一个等待Promise对象产出结果的操作手段 功能就是暂停async函数的执行，等待Promise处理后的结果

假如Promise处理的结果是rejected,会抛出异常

async 函数是通过一个隐式的Promise返回一个pending状态 有async必须有await 反之则可以

function getData0(){
    return new Promise((resolve,reject)=>{
        resolve('成功')    
    }).then((res)=>{
        console.log(res)    
    },(err)=>{
        console.log(err)    
    })
}

function getData1(){
    return new Promise((resolve,reject)=>{
        resolve('成功')    
    }).then((res)=>{
        console.log(res)    
    }).catch(err)=>{
        console.log(err)    
    }
}
...

async function logData(){
    const p1=await getData0();
    const p2=await getData1(p1);
    const p3=await getData2(p2);
    const p4=await getData3(p3);
    return p4;
    )
}
logData()

async 和await很好的解决了Promise的链式调用

7.Promise源码解析

promise.then(onFullfilled,onRejected) 这是两个状态 可以只写一个 也可以不写

先自己创建一个简单的promise

const PENDING = 'PENDING',
      FULFILLED = 'FULFILLED',
      REJECTED = 'REJECTED';
class MyPromise {
  //传入的函数 在实例的时候constructor会立即执行
  constructor(excutor) {
    this.status = PENDING;
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallBacks=[];
    this.onRejectedCallBacks=[];
    const resolve=(value) => {
      if (this.status === PENDING) {
        this.status === FULFILLED;
        this.value = value;
        //发布
        this.onFulfilledCallBacks.forEach(fn=>fn());
      }
    }
    const reject=(reason) => {
      if (this.status === PENDING) {
        this.status === REJECTED;
        this.reason = reason;
        //发布
        this.onRejectedCallBacks.forEach(fn=>fn());
      }
    }
    try {
      excutor(resolve, reject)
    } catch (e) {
      reject(e)
    }

  }
  then(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value);
    }
    if (this.status === REJECTED) {
      onRejected(this.reason);
    }
    if(this.status===PENDING){
        //订阅
        this.onFulfilledCallBacks.push(()=>{
            omFulfilled(this.value)        
        })    
        this.onRejectedCallBacks.push(()=>{
            onRejected(this.reason)        
        })
    }
  }
}
export default MyPromise;
let promise=new myPromise((resolve,reject)=>{
    resolve('success')
})

promise.then((value)=>{
    console.log(value)
},(reason)=>{
    console.log(reason)
})

链式调用

let promise=new Promise((resolve,reject)=>{
    resolve('Resolve1')
})
)
//通过return传递结果
promise.then((res=>{
    return res;//返回的是一个普通值
}).then(res=>{
    console.log(res);//Resolve1
})
//通过新的promise  resolve结果
//第一种情况
promise.then((res=>{
    return res;//返回的是一个普通值
}).then(res=>{
    return new Promise((resolve,reject)=>{
        resolve(res)    
    })
}).then(res=>{
    console.log(res);//Resolve1
})
//第二种情况
promise.then((res=>{
    return res;//返回的是一个普通值
}).then(res=>{
    return new Promise((resolve,reject)=>{
        setTomeout(()=>{
            resolve(res);        
        },2000) 
    })
}).then(res=>{
    console.log(res);//Resolve1
})
//第三种情况 通过新的promise reject去返回原因
promise.then((res=>{
    return res;//返回的是一个普通值
}).then(res=>{
    return new Promise((resolve,reject)=>{
        setTomeout(()=>{
            reject('error');        
        },2000) 
    })
}).then(res=>{
    console.log(res);
},err(err)=>{
    console.log('reject'+err);//reject erroe
})

//第四种情况 then走了失败的回调之后再走then
promise.then((res=>{
    return res;//返回的是一个普通值
}).then(res=>{
    return new Promise((resolve,reject)=>{
        setTomeout(()=>{
            reject('error');        
        },2000) 
    })
}).then(res=>{
    console.log(res);
},err(err)=>{
    console.log('reject'+err);//reject erroe
    //默认return一个undefined 
}).then(res=>{
    console.log(res);//undefined
},err(err)=>{
   console.log(err); 
})
//第五种情况 then中使用了throw New Error
promise.then((res=>{
    return res;//返回的是一个普通值
}).then(res=>{
    return new Promise((resolve,reject)=>{
        setTomeout(()=>{
            reject('error');        
        },2000) 
    })
}).then(res=>{
    console.log(res);
},err(err)=>{
    console.log('reject'+err);//reject erroe
    //默认return一个undefined 
}).then(res=>{
    throw New Error('throw Error')
}).then(res=>{
    console.log(res)
},err(reason)=>{
    console.log('exception',reason);//exception Error:throw Error
})

//在Promise中使用try catch捕获异常 但是他回调用最近的失败函数
promise.then((res=>{
    return res;//返回的是一个普通值
}).then(res=>{
    return new Promise((resolve,reject)=>{
        setTomeout(()=>{
            reject('error');        
        },2000) 
    })
}).then(res=>{
    console.log(res);
},err(err)=>{
    console.log('reject'+err);//reject erroe
    //默认return一个undefined 
}).then(res=>{
    throw New Error('throw Error')
}).then(res=>{
    console.log(res)
},(reason)=>{
    console.log('exception',reason);//exception Error:throw Error
}).catch(catch){
    console.log('catch'+catch);
    //这个的前提是上一个的error不存在 不然不会走到这个catch里面
    return 'catch'+catch;
}.then(res=>{
    console.log(res)//catch Error:throw Error
})
//catch在Promise的源码层就是一个then，Catch也是遵循then的运行原则的

//成功的条件
//then return 普通的javaScript value
//then return 新的promise成功态的结果 value

//失败的条件
//then return 新的promise失败态的原因  reason
//then 抛出异常 throw new Error

//promise的链式调用
//javascript JQuery retun this
//then不具备this
//return new Promise

注意区别

let promise=new Promise((resolve,reject)=>{....})
let promise2=promise.then(res=>{
    return 'resolve' //第一次返回新的promise结果
}).then(res=>{
    //return  第二次返回新的promise结果 
})

let promise2=promise.then(res=>{
    //return 第一次返回新的promise结果
})
promise2.then(res=>{
    //return 第一次then返回新的promise结果
})

链式调用源码

let promise1=new Promise((reslove,reject)=>{
     resolve('promise1');
})

let promise2=promise1.then(value=>{
    //return Promise.resolve(value+'->then->promise2')
    return value+'->then->promise2';//等同于上面
}).then(value=>{
    console.log(value);//'promise1->then->promise2'
})

const PENDING = 'PENDING',
      FULFILLED = 'FULFILLED',
      REJECTED = 'REJECTED';

function resolvePromise = (promise2, x, resolve, reject) => {
    console.log(promise2, x, resolve, reject);
    if(promise2===x){
        return reject(new TypeError('Chaining cycle detected for promise #<MyPromise>'))    
    } 
    let called=false;
        if((typyof x==='Object' && x!==null) || typeof x ==='function'){
      try{
        let then =x.then;
        if(typeof then ==='function'){//推断这是一个promise
        then.call(x,(y)=>{
            if(called)return;
            called=true;
           resolvePromise(promise2,y,resolve,reject)       
        },(r)=>{
            if(called)return;
            called=true;
            reject(r)        
        })      
        }else{
            resolve(x)        
        }     
    }   catch(e){
        if(called)return;
            called=true;
        reject(e)    
    }
    } else{
         resolve(x)   
    }
}
class MyPromise {
  //传入的函数 在实例的时候constructor会立即执行
  constructor(excutor) {
    this.status = PENDING;
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallBacks = [];
    this.onRejectedCallBacks = [];
    const resolve = (value) => {
      if (this.status === PENDING) {
        this.status === FULFILLED;
        this.value = value;
        //发布
        this.onFulfilledCallBacks.forEach(fn => fn());
      }
    }
    const reject = (reason) => {
      if (this.status === PENDING) {
        this.status === REJECTED;
        this.reason = reason;
        //发布
        this.onRejectedCallBacks.forEach(fn => fn());
      }
    }
    try {
      excutor(resolve, reject)
    } catch (e) {
      reject(e)
    }

  }
  //x 可能是普通值 也可能是promise     
  then(onFulfilled, onRejected) {
      onFulfilled=typeof onFulfilled==='function'?onFulfilled:value=>value;
      onRejected=typeof onRejected==='function'?onRejected:reason=>{throw reason}
    let promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            let x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      }
      if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      }
      if (this.status === PENDING) {
        //订阅
        this.onFulfilledCallBacks.push(() => { 
            try {
              let x = omFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            } 
        });
        this.onRejectedCallBacks.push(() => { 
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            } 
        });
      }
    });
    return promise2;
  }
  catch(errorCallback){
       return this.then(null,errorCallback) 
  }
}
export default MyPromise;

秋雨凉人心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
es-promise:PromisesA +的Promise实现以及es7 Promise增强
05-13
承诺Promises / A +的Promise实现，以及es7 Promise增强。 作者：Allex Wang（ ） 笔记： 支持Promise.try() ， #.finally() 提供Promise.polyfill() API和条目dist/promise.polyfill.min.js安装npm i es-promise...
增强的promise支持promise顺序执行
08-12
"增强的Promise支持Promise顺序执行"这个主题聚焦于如何更有效地序列化Promise链，使得异步任务按照预定的顺序依次执行，避免了回调地狱，并提升了代码的可读性和可维护性。 在标准的Promise中，`.then`方法会返回...
用promise.all搭配map方法解决异步问题
vvv3171071的博客
12-30 3283
今天在项目中遇到一个异步问题，出现原因如下： 我在getEnergeHouseDanhao这个函数中加入了一个请求，该函数是获取某机器单耗，但要请求四次分别去获取年单耗、月单耗、日单耗、小时单耗 然而执行后因为请求是异步的，此时打印datas拿不到在请求中push进去的数组，在设置定时器才能拿到数组。 然而我们无法确定接口的相应时间，用定时器解决显然是存在很大风险的。 那么该如何解决类似的问题呢？可以使用promise.all解决异步。 首先简单且通俗易懂地介绍一下promise.all是什么，具体
使用`Promise.all `结合`map`返回接口中部分成功和部分失败的数据
最新发布
m0_49529959的博客
03-20 310
两个异步并行执行的接口，前端需要获取到并行执行的结果才可以进行下一步操作，但是并行接口不一定都能成功返回，即：部分会成功返回，部分会失败。参考网址：https://juejin.cn/post/7000012794804305928。会根据每次最快的返回的结果做为结果，简单理解为：有次返回结果失败了，则最后返回的是结果是。返回的成功的结果和失败的结果都以map的方式生成一个新数组进行返回，目标结果为。，这样的话，就无法获取到其他成功返回的结果。方式并行获取接口返回的值，但是因为。
Promise.all请求和分类的map方法
若把你比作歌
04-30 547
//获取分类列表 getCategoryList() { wx.showLoading({ title: '玩命加载中', }) let categoryUrl = "/category/all"; let productUrl = "/product/all"; let categoryDate = app.$get(categoryUr...
promise.all中，其中一个promise出错，如何确保执行到最后
qq_42762359的博客
06-07 9438
promise.all中异步请求，如果中间有一个promise出错后，如何确保执行到最后？ 在promise.all队列中，使用map每一个过滤每一个promise任务，其中任意一个报错后，return一个返回值，确保promise能正常执行走到.then中 var p1 = new Promise((resolve, reject) => { resolve('p1'); }); var p2 = new Promise((resolve, reject) => { resolve('p2
Promise.all的使用，处理多个并发请求
业余前端的职业经历
06-11 5369
其实正常的业务中，按理来说 是一个按钮控制一个请求，处理一项业务。 但有的时候还是会出现 一个按钮控制多个并发请求的业务，这几个请求之间还没有关联。 但问题是，你得知道所有的请求处理完成之后，要给用户一个反馈的。 这个时候 如果使用传统的ajax请求的话，好像我们不知道啥时候 所有的并发请求都处理完了，或者是 那个请求出了问题 然后报出对应的错误。 其实通过一个系统的设计还是能用es5的方式处理这些并发请求的 但今天就讲解下 promise.all的用法，让你快速实现呢，promise这个东西出来也好几年了
PROMISE EX8650 BIOS
11-11
总结来说，PROMISE EX8650的1.10.000 BIOS固件升级是一个重要的维护和优化步骤，它不仅提升了设备的性能和稳定性，增强了硬件兼容性和安全性，还通过易用性的改进使得升级过程更为简便。对于任何拥有PROMISE EX8650...
add-promise
03-28
标题“add-promise”可能指的是一个JavaScript库或者项目，它专注于增强或扩展Promise对象的功能。Promise是JavaScript中处理异步操作的重要工具，它允许我们以更优雅的方式组织和管理复杂的异步代码流程。在...
simplified-promise:增强JS Promise的简洁性
05-11
通过将以下静态API添加到开箱即用的Promise中，它增强了JavaScript Promise的简单性： Promise.Create(): Promise Promise.All(): Promise ES6承诺用法 new Promise( /* executor */ function(resolve, reject) {...
Promise.all 方法详解
热门推荐
潮汐未见潮落的博客
06-20 8万+
promise.all 的详细讲解，并包括 promise.all 手写代码
promise
CrystalLee
09-05 660
一、含义 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。 （2）一旦状态改变，就...
谈谈使用promise时候的一些反模式
落第秀才的专栏
01-09 5613
本文翻译自  We have a problem with promises ，同时也为原文题目，翻译时重新起了一个题目并且对原文有删改。  各位JavaScript程序员，是时候承认了，我们在使用promise的时候，会写出许多有问题的promise代码。 当然并不是promise本身的问题，  A+ spec 规范定义的promise非常棒。 在过去的几年中，笔者看到了很多程序员在调
Promise.all()
lovearforever的博客
06-26 1082
1、 Promise.all() 方法用于将多个Promise 实例，包装成一个新的 Promise 实例var getJSON = function(id){  var a = new Promise(function(resolve, reject){   $.ajax({    url: "https://cd.jd.com/yanbao/v3?skuId="+ id +"&amp;cat=...
关于Promise和Array.map()的一些零散知识点
sinat_41897556的博客
02-13 1032
Promise: Promise是异步编程的一种解决方案，它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败 当Promise的状态又pending转变为resolved或rejected时，会执行相应的方法，并且状态一旦改变，就无法再次改变状态，这也是它名字promise-承诺的由来 https://www.jianshu.com/p/c98eb...
es6 Promise.all()方法
歪脖先生的博客
01-27 1万+
Promise.all()方法 Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。 const p = Promise.all([p1, p2, p3]); 上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数
ES6之Promise.all()函数
爱开车的彬哥的CSDN博客
08-31 2159
const arr = [1,2,3,4,5,20,543,623,1234134,656,54325,62463,12412]; let resArr = []; const returnPromise =(number)=&amp;amp;gt;{ return new Promise((resolve,reject)=&amp;amp;gt;{ setTimeout(()=&amp;amp;gt;{ ...
Promise.all 批量获取数据
酱子
04-13 1201
Promise.all 批量获取数据 ： const hdcms = new Promise((resolve, reject) => { setTimeout(() => { // resolve('第一个异步'); reject('第一个异步错误。。。') }, 1000); }).ca...
[RxJSv& Javascript] forkJoin (reactive Promise.all) & Map
weixin_34082789的博客
03-21 205
forkJoin: When all observables complete emit the last value from each. productMap: Map&lt;number, IProduct&gt; ngOnInit() { const cart = this.stockService.getCartItems(); const produ...
使用Promise.all()优化请求
RedColinar的博客
12-16 5340
function fetchBox(param) { return new Promise((resolve, reject) => { setTimeout(() => { let box = {} box[param] = [1, 2, 3] resolve(box) }, 5000); }) }let params = ['apple

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值