Promise 请求基础操作和简单封装

最新推荐文章于 2024-06-10 15:10:52 发布
最新推荐文章于 2024-06-10 15:10:52 发布
阅读量1.5k 收藏 1
点赞数 1
文章标签： es6 javascript html5 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48366131/article/details/109781660
版权

Promise 是什嘛

  • ES6 语法规范中新加的内置类，用来处理 js 中异步编程的，而我们所谓的 Promise 设计模式，就是基于 promise 对异步操作进行管理 ；主要解决回调地狱
  • promose 是一个内置类，所以创建一个 promise：new Promise([executor]): 第一个执行函数必须传递，这里的 executor 是一个回调函数下面简称 exe
  1. new promise 的时候就会把 exe 执行，创建 promise 的一个实例（exe 是 promise 类的一个回调函数，promise 内部会把它执行）
  2. promise 不仅把 exe 执行，而且还给 exe 传递两个参数（两个参数也是函数类型）
    resolve 函数：它执行代表 promise 处理的异步事情是成功的，把 promise 的状态改为 fulfilled
    reject 函数：它执行代表 promise 处理的异步事情是失败的，把 promise 的状态改为 rejected
  3. exe 函数中放的就是当前要处理的异步操作事情
    let promiseExamp = new Promise((resolve, reject) => {这里一般存放的都是我们即将要处理的异步任务，任务成功我们执行 resolve,任务失败我们执行 reject（当然写同步的也可以）}

异步编程中的回调地狱

  • 一个回调函数嵌一个回调函数再嵌一个回调函数再嵌一个回调函数再嵌一个回调函数再嵌一个回调函数再嵌一个回调函数再嵌一个回调函数再嵌一个回调函数再嵌一个回调函数… 就是回调地狱。
  • 一个小例子：
    从服务器获取某个学生的基本信息 （score-id） -> 基于分数的 ID 获取到当前学生各项成绩 -> 基于某一项成绩获取他在学校的排名

promise 三个状态： pending 进行中 fulfilled 成功 rejected 失败

  • 改变状态有两种可能 pending–>fulfilled pending–> rejected ；
    下面展示一些 内联代码片。
 let p = new Promise(function (resolve, reject) {
           // resolve();  // 调用resolve代表执then中的第一个回调，resolve代表的是成功态
            reject(); // // 调用reject ,就代表执行then的的第二个回调；失败态
        }).then(function () {
            console.log(1);
        }, function () {
            console.log(2);
        }).then(function () {

        }, function () {

        })
promise 写法示例
// An highlighted block
let p = new Promise(function(resolve,reject){
            setTimeout(function(){
                console.log("买菜");
                resolve();
            },3000)
        }).then(function(){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("洗菜");
                    resolve()
                },2000)
            })
        }).then(function(){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("做菜");
                    resolve()
                },1000)
            })
        })
        //打印结果是 买菜，洗菜，做菜；

Promise.prototype.then()

  • then : 在Promise的原型上的一个方法; p.then 也会默认返回一个promise实例，而且默认是成功的;如果在then的回调函数中也返回一个promise实例，那么这个promise实例就会覆盖默认返回的实例影响下一个then中的回调函数；
  • 如果return promise的实例那么下面的then就会受实例的影响，在实例执行完后再执行then 如果没有return promise的实例那么下面的then就不受影响，直接执行
  • 示例1
// An highlighted block
<script>
    let p = new Promise(function (resolve, reject) {
        setTimeout(function () {
            if (Math.random() > 0.5) {
                resolve(100);
            } else {
                reject();
            }
        }, 1000)
    })
    p.then(function (a) {
        console.log(a);//上一个返回resolve时执行
        return new Promise(function (resolve, reject) {
            resolve();
        });
    }, function () {
        console.log("不买");//是一个返回reject时执行
    }).then(function () {
        // 第二个then的方法受第一个then返回值影响；
        console.log("成功")
    }, function () {
        console.log("失败")
    })
</script>
  • 示例2
  let p = new Promise(function(resolve,reject){
            resolve()
        });
        p.then(function(){
            // 如果这里面return一个promise的实例，下一个then中的回调受这个实例的影响；
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log(1);
                    resolve();
                },2000)
            })
            // setTimeout(function(){
            //     console.log(3);
            // },2000)
        },function(){

        }).then(function(){
            console.log(2);
        })
       // return promise 实例时 打印出来时 1，2
      //  定时器 时 打印出来是 2，3 因为 .then里面的console是同步的 ，定时器是异步的

Promise.prototype.catch()

  • 一般来说，不要在then中定义第二个reject函数；一般使用catch；理由是第二种写法可以捕获前面then方法执行中的错误，也更接近同步的写法（try/catch）。
  • 如果在then中抛出错误，就会执行下面的catch 如果then中有一个异常，也会抛出错误只要then链中有一个异常，就会执行最后的catch;只要在then中有失败的回调，就不再执行最后的catch了只要其中一个then的回调失败，就不再执行下面的then中的回调，而是直接走catch
let p = new Promise(function (resolve,reject) {
          resolve();
      })
      p.then(function () {
          console.log(1);
      }).then(function () {
             console.log(3);
      }).then(function () {
             console.log(a);
      }).catch(function () {
          console.log(2);
      })

      //显示 1 3 2

Promise.prototype.finally()

  • promise 的finally 是不管成功还是失败，都会执行的回调
  • 这是会等到promise实例状态改变以后会触发的回调，是一个异步的；
let p = new Promise(function(resolve,reject){
  resolve();
})
p.then(function(){
  console.log(1); 
  console.log(a);
}).catch(function(){
  console.log(55);
}).finally(function(){
  // 这是会等到promise实例状态改变以后会触发的回调，是一个异步的；
  console.log(1000);
})
console.log(999);
//999  55  1000

Promise.all()

  1. Promise.all : 用于多个实例，返回一个新promise实例 全部成功状态才是成功，只要有一个失败状态就是失败
  2. 如果不是Promise 实例，就会先调用下面讲到的Promise.resolve()方法，将参数转为 Promise 实例，再进一步处理。
let p1 = new Promise(function(resolve,reject){
            setTimeout(function(){
                reject(100);
            },3000)
        }) 
        let p2= new Promise(function(resolve,reject){
            setTimeout(function(){
                reject(200);
            },2000)
        }) 
        let p3= new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve(300);
            },4000)
        });
        let p = Promise.all([p1,p2,p3]) //全部执行完才会返回结果
        p.then(function(data){
            // 会将所有成功的数据组装一个新数组，传递给这个回调函数
            console.log(data);
            
        }).catch(function(data){
            // 只要遇到一个失败，就将失败的这个值传递给这个回调
            console.log(data);
        })

Promise.race()

  • Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。
  • Promise.race()方法的参数与Promise.all()方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resolve()方法，将参数转为 Promise 实例，再进一步处理。
 let p1 = new Promise(function(resolve,reject){
            setTimeout(function(){
                reject(100);
            },13000)
        }) 
        let p2= new Promise(function(resolve,reject){
            setTimeout(function(){
                reject(200);
            },12000)
        }) 
        let p3= new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve(300);
            },4000)
        });
        let p = Promise.race([p1,p2,p3])
        
        p.then(function(){
            console.log("成功");
            
        }).catch(function(){
            console.log("失败");
            
        })
  打印结果 是  成功 因为p3先执行完
//谁先执行返回的结果是啥p的结果就是啥
上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

Promise.resolve()

  • Promise.resolve: 将一个对象转成一个promise的实例；返回值可以调用then方法
 Promise.resolve("foo").then(function(){

        })
        new Promise(function(resolve,reject){
            resolve("foo")
        });

        let p  = Promise.resolve();
        p.then(function(){

        })

ajax的串行与解决

  • 只有第一个请求成功才能执行第二个，第二个成功才能执行第三个，最后一个请求成功后拿到了每一次请求的所有数据。 例如：
$.ajax({
  url:'/baseInfo',
  method:'GET',
  data:{
    name:'zhanglu'
  },
  success:result => {
    let scoreId = result.scoreId;

    $.ajax({
      url:'/scoreInfo',
      method:'GET',
      data:{
        id:scoreId
      },
      success:result => {
        let chinese = result.chinese;

        $.ajax({
          url:'/paiming',
          method:'GET',
          data:{
            num:chinese
          },
          success:result => {

          }
        });
      }
    });
  }
});
  • promise解决串行的办法
 let p = new Promise(function(resolve,reject){
            resolve()
        });
        p.then(function(){
            // 如果这里面return一个promise的实例，下一个then中的回调受这个实例的影响；
            return new Promise(function(resolve,reject){
              $.ajax({
				  url:'/baseInfo',
				  method:'GET',
				  data:{
				    name:'zhanglu'
				  },
				  success:result => {
				    let scoreId = result.scoreId;
				    resolve(scoreId )
				}
				})
            })
        }).then(function(value){
              return new Promise(function(resolve,reject){
	              $.ajax({
					  url:'/scoreInfo',
					  method:'GET',
					  data:{
					    name:'zhanglu'
					  },
					  success:result => {
					    let scoreId = result.scoreId;
					    resolve(scoreId )
					}
					})
            })
        }).then(res=>{
                 ......
         })

ajax的并行与解决

		let chi = 100,
		    eng = 12,
		    math = 98;
		let chiPai,
		    engPai,
		    mathPai;
		let count = 0;
		function func () {
		  if(count >= 3) {
		    // 处理自己要做的事情
		  }
		}
		
		$.ajax({
		  url:'/pai ? chi = ' + chi,
		  success:result => {
		    chiPai = result;
		    count++;
		    func();
		  }
		});
		$.ajax({
		  url:'/pai ? eng = ' + eng,
		  success:result => {
		    engPai = result;
		    count++;
		    func();
		  }
		});
		$.ajax({
		  url:'/pai ? math = ' + math,
		  success:result => {
		    mathPai = result;
		    count++;
		    func();
		  }
		});
  • promise解决并发的办法
			function ajax1 () {
			    return new Promise (resolve => {
			        $.ajax({
			            url: '/api1',
			            success: resolve
			        });
			    });
			}
			
			function ajax2 () {
			    return new Promise (resolve => {
			        $.ajax({
			            url: '/api2',
			            success: resolve
			        });
			    });
			}
			
			function ajax3 () {
			    return new Promise (resolve => {
			        $.ajax({
			            url: '/api3',
			            success: resolve
			        });
			    });
			}
			let p = Promise.all([ajax1 ,ajax2,ajax3]) //全部执行完才会返回结果
        p.then(function(data){
            // 会将所有成功的数据组装一个新数组，传递给这个回调函数
            console.log(data);
            
        }).catch(function(data){
            // 只要遇到一个失败，就将失败的这个值传递给这个回调
            console.log(data);
        })

自己简单封装一个promise

  • 首先先分析一波
let p = new MyPromise(function (resolve,reject) { //p1
        // resolve形参可以执行；所以该实参一定是个函数
        // resolve，reject : 改变当前实例的状态
           resolve()
    });
  p.then(function () {  //p 是promise的实例 .then可以执行说明then是原型链上的方法
        return new Promise(function (resolve,reject) {   // p2
            resolve();  //  执行p2事件池中的方法；p2事件池中有个p1 的resolve，p1的resolve执行；会把p1成功事件池中的方法执行；
        })
    })
     // 第一个resolve  要执行p这个实例中成功事件池中的方法；这是一个异步的操作；暂时异步事件池中的方法是不执行；

    // 第二个resolve :  执行p2事件池中的方法；p2事件池中有个p1 的resolve，p1的resolve执行；会把p1成功事件池中的方法执行；

    // 第一个then : 把then中的方法放入到p的成功事件池中；并且返回一个p1的promise实例；

    // 第二个then ：p1.调用的then；把then中放到了p1.的成功事件池中；
  • 封装的代码
<script>
    class MyPromise{
        constructor(excutor){
            this.state = "pending";// 当前实例有个state,默认值是pending；
            // 当初始化promise实例时，新增两个事件池；一个成功一个失败；
            this.fulfilledEvent = [];
            this.rejectedEvent=[];
            // resolve : 1. 改变状态；2.让成功事件池中的方法都执行；
            let resolve=(result)=>{
                // 如果不是pending状态，那么promise状态已经发生了改变，不需要再执行；
                if(this.state!=="pending")return;
                this.state="fulfilled";
                clearTimeout(this.timer);
                this.timer = setTimeout(()=>{
                    // 事件池中的方法执行是一个异步的；
                    this.fulfilledEvent.forEach(item=>{
                        if(typeof item==="function"){
                            item(result)
                        }
                    })
                },0)
            };
            let reject = (result)=>{
                if(this.state!=="pending")return;
                this.state="rejected";
                clearTimeout(this.timer);
                this.timer = setTimeout(()=>{
                    this.rejectedEvent.forEach(item=>{
                        if(typeof item==="function"){
                            item(result)
                        }
                    })
                },0)
            };
           try{
               excutor(resolve,reject)
           }catch(e){
               reject(e);
           }
        }
        // 订阅方法；
        then(resolveFn,rejectFn){
            //如果then不传参数；给函数赋默认的匿名函数；
            if(resolveFn===undefined){
                resolveFn=()=>{};
            }
            if(rejectFn===undefined){
                rejectFn=()=>{
                    throw new Error();
                }
            }
            return new MyPromise((resolve,reject)=>{// p1  p1中的resolve--> this指向p1;
                // 必须验证resolveFn是否是一个promise的实例
                this.fulfilledEvent.push((result)=>{
                    try{
                        let x = resolveFn(result);
                        // x===p2 resolve 存储到了p2的事件池中；
                        x instanceof MyPromise?x.then(resolve,reject):resolve();
                    }catch(e){
                        reject(e);
                    }
                });
                this.rejectedEvent.push((result)=>{
                  try{
                      let x = rejectFn(result);
                      // x===p2 resolve 存储到了p2的事件池中；
                      x instanceof MyPromise?x.then(resolve,reject):resolve();
                  }catch(e){
                      reject(e)
                  }
                });
            })
        }
    }

    let  p  = new MyPromise(function (resolve,reject) {
       setTimeout(function () {
          resolve(1)
       },2000)
    })
    p.then(function (val) {

        /*return new MyPromise(function (resolve,reject) {
            setTimeout(function () {
                resolve(2);
            },2000)
        })*/
    },function () {
        
    }).then(
        function () {
            
        }
    )  
</script>
Fluoxetine^.^
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
promise理解和封装
xiaomingzi_12345的博客
06-28 741
Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8），但是它们是基于promise的)，从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果。
promise 核心封装
Altaird的博客
12-13 748
promise，在项目开发应该大家都不陌生吧，今天我们来看下promise是怎么实现，自己手写一个promise。 首先我们来看封装一个promise需要什么条件 let promise = new Promise((resolve,reject) => {}) console.log(promise) 由上可知，我们看到promise身上有状态，返回值，__proto__上有一些方法，所以我们可以采用class的方式来创建。 // 手写promise class XG { // .
promise 请求封装方法
Nightze的博客
09-08 868
promise把请求封装成一个方法，使用封装好的这个方法去请求json数据。
前端 JS 经典：Promise 详解
最新发布
weixin_64684095的博客
06-10 2166
在以前我们实现异步是用的回调函数，当一个异步请求需要依赖上一个异步请求返回的结果的时候，就会形成如下这种的调用结构。这种结构看着很杂乱且不易维护，被我们亲切的叫做。为了解决回调地狱的问题，Promise 就诞生了。。
Promise的使用和简易封装
Amour01的博客
05-10 189
Promise的使用和简易封装（后续更新Promise.all等） 使用场景：Promise在前端中主要处理网络请求 Promise是一个构造函数。 Promise有三种状态 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。 已兑现（fulfilled）: 意味着操作成功完成。 已拒绝（rejected）: 意味着操作失败。 使用方式 const promise = new Promise((resolve, reject) => { // 发送网络请求等异步操作
Promise异步请求以及同步请求使用
Cdlg_Fans的博客
11-07 2148
1、三个请求顺序没关系,a/b/c可以同时请求，只需要在最后获取他们三个返回结果；2、需要先完成a请求，将a请求的返回结果作为b请求的入参，然后c请求的入参需要b请求结束后返回的结果3、a/b可以同时执行，最后执行c。
封装 axios+promise通用请求函数操作
10-14
在本文中，我们将深入探讨如何封装一个基于axios和Promise的通用请求函数，这对于任何Web应用程序的后端数据交互都是至关重要的。axios是一个流行的JavaScript库，用于处理HTTP请求，而Promise则是处理异步操作的一...
Vue Promise的axios请求封装详解
01-21
为了实现向ios中block封装请求的异步的效果，我采用JavaScript中promise这个对象。 var p1 = New promise((resolve,reject)=>{ var timeOut = Math.random() * 2; log('set timeout to: ' + timeOut + ' seconds...
详解React Native网络请求fetch简单封装
08-29
fetch 请求封装的必要性 在前端开发中，一般使用 fetch 进行网络请求。其实对于开发来说，系统提供的 fetch 已经够用了，但是为了代码的整体结构，建议对 fetch 进行简单的 Get/Post 封装。若不封装，我们看一下...
用promise写http请求
weixin_58073806的博客
02-02 366
用promise写http请求
vue + axios + promise：进行接口请求。post请求提交数据的三种方式
учёба
05-31 2454
这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆pending: 等待中，或者进行中，表示还没有得到结果resolved: 已经完成，表示得到了我们想要的结果，可以继续往下执行rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执(用catch捕获异常)不管是then或者catch返回的都是一个新的Promise实例！
promise封装request请求，async/await格式
qq_58081244的博客
07-11 392
注：在进行调用方法时，请根据自己的需要获取数据，并且在重复调用request函数时加上await。
ES6 Promise 详解
Cyan_RA9的博客
10-21 1213
ES6新特性 Promise详解。
Promise.all方法同步发送请求
weixin_59559908的博客
02-19 368
下面是获取数据的时候让这几个方法同步发送请求，就是他们在相同的时间同步发请求，等到他们每一个都发送完毕才会执行下边的代码，发送的时候让骨架屏显示，请求完毕以后就让骨架屏隐藏，让页面结构出来。同步发送异步请求，优化响应速度，不需要等待第一个发完以后第二个才发送请求，节约时间。Promise.all([ 里面放异步方法 ])
es6--promise发起ajax请求
别浪
11-21 3705
promise 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 感觉跟java的Future类很像啊，有木有！ 我们可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步...
手撕代码彻底理解Promise
到得还来别无事，庐山烟雨浙江潮。
11-10 940
手写Promise实现原理，理解其基本使用和使用场景。
关于Promise请求的一些处理
qq_42534303的博客
07-20 294
关于Promise请求的一些处理 建议使用for 或 for of 来代替.map方法来处理如下类似的请求 map,forEach,reduce,filter本意上都是用来处理同步函数的，如果需要处理异步函数，最好用for 会造成的问题： const getTreeData = async () => { const { data: companys } = await getCompanyList({}); for (const com of companys) { //
promise请求数据用法
keji_123的博客
01-09 5541
Promise简介 Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。ES6将其写进了语言标准，统一了语法，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息，代码十分简洁易读没有复杂的花括号嵌套，把异步代码写成同步的感觉。 &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;h...
Promise的基本用法，基于Promise处理ajax请求
背心的博客
10-22 4097
Promise的基本用法
promise封装post请求嵌套
09-09
Promise封装POST请求嵌套的过程如下： 1. 创建一个Promise对象，...以300字进行回答可能有点不够详细，但是以上是Promise封装POST请求嵌套的基本步骤。在实际的开发中，可以根据具体的情况进行进一步的扩展和优化。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值