前端之Promise

于 2024-10-05 19:15:55 发布
阅读量61 收藏 2
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45153776/article/details/142625984
版权

1.搭建基本结构

是什么？

异步编程的一种解决方案，解决了回调地狱的问题。

为什么要用？

1.支持链式调用，可以解决回调地狱问题。

2.指定回调函数的方式更加灵活

const p = new Promise( (resolve,reject)=>{

} )

p.then(()=>{

},()=>{

})

promise的状态改变

有三个状态：pending，resolved（fulfilled），rejected

状态改变有两种，pending变为resovled或者rejected，状态只能改变一次。

Promise对象的值，PromiseResult

保存着异步任务（成功/失败）的结果。

resolve和reject能访问到这个值并做修改。

流程：

如何改变promise对象的状态：

1.调用resolved函数

2.调用rejected函数

3.抛出错误 throw

promise指定多个成功/失败回调，都会回调吗？

当promise该案对应状态时都会调用。

改变promise状态和指定回调函数谁先谁后？

都有可能，正常情况下都是先指定回调再改变状态，但也可以先改变状态在指定回调。

如何先改变状态在执行回调？

1.在执行器中直接调用resolve/reject函数

2.延迟更长的时间才调用then()

什么时候才能得到数据？

1.如果先指定的回调，那当状态发生改变时，回调函数就会调用得到数据。

2.如果先改变状态，那当指定回调时，回调函数就会调用，得到数据。

promise的异常穿透

当使用promise的then链式调用时，可以在最后指定失败的回调。

前面任何操作出了异常，都会传到最后失败的回调中处理。

中断promise链

 只有返回一个pending状态的promise对象才能中断promise链条

Promise的封装

1.搭建基本结构

function Promise(executor){
}

Promise.prototype.then = function(onreSolvef,onRejected){
}

2.resolve和reject结构

function Promise(executor){
  //resolve函数
  fuction resolve(data){
  }

  //reject函数
  fuction reject(data){
  }
  
  //同步调用exector函数
  exector(resolve，reject)；
}

Promise.prototype.then = function(onreSolvef,onRejected){
}

3.resolve和reject代码

function Promise(executor){

  //添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;

  //保存实例对象的this值
  const self = this；

  //resolve函数
  fuction resolve(data){
    //修改对象的状态
    self.PromiseState = "fulfilled";
    //修改对象的结果值
    self.PromiseResult = data;
  }

  //reject函数
  fuction reject(data){
    //修改对象的状态
    self.PromiseState = "rejected";
    //修改对象的结果值
    self.PromiseResult = data;
  }
  
  //同步调用exector函数
  exector(resolve，reject)；
}

Promise.prototype.then = function(onreSolvef,onRejected){
}

4.throw抛出异常改变状态

function Promise(executor){

  //添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;

  //保存实例对象的this值
  const self = this；

  //resolve函数
  fuction resolve(data){
    //修改对象的状态
    self.PromiseState = "fulfilled";
    //修改对象的结果值
    self.PromiseResult = data;
  }

  //reject函数
  fuction reject(data){
    //修改对象的状态
    self.PromiseState = "rejected";
    //修改对象的结果值
    self.PromiseResult = data;
  }
  try{
    //同步调用exector函数
    exector(resolve，reject)；
  }catch(e){
    reject(e);
  }
}

Promise.prototype.then = function(onreSolvef,onRejected){
}

5.状态只能改变一次

function Promise(executor){

  //添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;

  //保存实例对象的this值
  const self = this；

  //resolve函数
  fuction resolve(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "fulfilled";
    //修改对象的结果值
    self.PromiseResult = data;
  }

  //reject函数
  fuction reject(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "rejected";
    //修改对象的结果值
    self.PromiseResult = data;
  }
  try{
    //同步调用exector函数
    exector(resolve，reject)；
  }catch(e){
    reject(e);
  }
}

Promise.prototype.then = function(onreSolvef,onRejected){
}

6.then方法中执行回调

function Promise(executor){

  //添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;

  //保存实例对象的this值
  const self = this；

  //resolve函数
  fuction resolve(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "fulfilled";
    //修改对象的结果值
    self.PromiseResult = data;
  }

  //reject函数
  fuction reject(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "rejected";
    //修改对象的结果值
    self.PromiseResult = data;
  }
  try{
    //同步调用exector函数
    exector(resolve，reject)；
  }catch(e){
    reject(e);
  }
}

Promise.prototype.then = function(onResolvef,onRejected){

  //调用回调函数
  if(this.PromiseState === "fulfilled"){
    onResolved(this.PromiseResult);
  }
  if(this.PromiseState === "rejexted"){
    onRejectd(this.PromiseResult);
  }

}

7.异步任务回调的执行

function Promise(executor){

  //添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;

  //
  声明属性
  this.callback = {};
  
  //保存实例对象的this值
  const self = this；

  //resolve函数
  fuction resolve(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "fulfilled";
    //修改对象的结果值
    self.PromiseResult = data;

    //调用成功的回调
    if(self.callback.onResolved)(){
      onResolved(data)
    }
  }

  //reject函数
  fuction reject(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "rejected";
    //修改对象的结果值
    self.PromiseResult = data;

    //调用失败的回调
    if(self.callback.onRejected)(){
      onRejected(data)
    }
  }
  try{
    //同步调用exector函数
    exector(resolve，reject)；
  }catch(e){
    reject(e);
  }
}

Promise.prototype.then = function(onResolved,onRejected){

  //调用回调函数
  if(this.PromiseState === "fulfilled"){
    onResolved(this.PromiseResult);
  }
  if(this.PromiseState === "rejected"){
    onRejectd(this.PromiseResult);
  }
  
  //判断pending状态
  if(this.PromiseState === "pending"){
    //保存回调函数
    this.callback = {
      onResolved,
      onRejected
    }
  }

}

8.指定多个回调的实现

function Promise(executor){

  //添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;

  //
  声明属性
  this.callbacks = [];
  
  //保存实例对象的this值
  const self = this；

  //resolve函数
  fuction resolve(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "fulfilled";
    //修改对象的结果值
    self.PromiseResult = data;

    //调用成功的回调
    self.callbacks.forEach(item => {
      item.onResolved(data);
    })
  }

  //reject函数
  fuction reject(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "rejected";
    //修改对象的结果值
    self.PromiseResult = data;

    //调用失败的回调
    self.callbacks.forEach(item => {
      item.onRejected(data);
    })
  }
  try{
    //同步调用exector函数
    exector(resolve，reject)；
  }catch(e){
    reject(e);
  }
}

Promise.prototype.then = function(onResolved,onRejected){

  //调用回调函数
  if(this.PromiseState === "fulfilled"){
    onResolved(this.PromiseResult);
  }
  if(this.PromiseState === "rejected"){
    onRejectd(this.PromiseResult);
  }
  
  //判断pending状态
  if(this.PromiseState === "pending"){
    //保存回调函数
    this.callbacks.push({
      onResolved,
      onRejected
    }) 
  }

}

9.同步任务then返回结果

then方法的返回结果是由它的回调函数的执行结果决定的。如果返回了一个非Promise类型数据那resolve()返回的结果就是一个成功的结果；如果返回的是一个Promise，那这个Promise就决定着then方法返回的Promise的结果和状态。

function Promise(executor){

  //添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;

  //
  声明属性
  this.callbacks = [];
  
  //保存实例对象的this值
  const self = this；

  //resolve函数
  fuction resolve(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "fulfilled";
    //修改对象的结果值
    self.PromiseResult = data;

    //调用成功的回调
    self.callbacks.forEach(item => {
      item.onResolved(data);
    })
  }

  //reject函数
  fuction reject(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "rejected";
    //修改对象的结果值
    self.PromiseResult = data;

    //调用失败的回调
    self.callbacks.forEach(item => {
      item.onRejected(data);
    })
  }
  try{
    //同步调用exector函数
    exector(resolve，reject)；
  }catch(e){
    reject(e);
  }
}

Promise.prototype.then = function(onResolved,onRejected){

  return new Promise((resolve,reject) =>{
    //调用回调函数
    if(this.PromiseState === "fulfilled"){

      try{
        //获取回调函数的执行结果
        let result = onResolved(this.PromiseResult);
        //判断
        if(result instanceof Promise){
          result.then(v => {
            resolve(v);
          },r => {
            reejct(r);
          })
        }esle{
          resolve(result);
        }
      }catch(e){
        reject(e);
      }
    }
    if(this.PromiseState === "rejected"){
      onRejectd(this.PromiseResult);
    }
  
    //判断pending状态
    if(this.PromiseState === "pending"){
      //保存回调函数
      this.callbacks.push({
        onResolved,
        onRejected
      }) 
    }
  })

}

10.异步任务then返回结果

function Promise(executor){

  //添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;

  //
  声明属性
  this.callbacks = [];
  
  //保存实例对象的this值
  const self = this；

  //resolve函数
  fuction resolve(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "fulfilled";
    //修改对象的结果值
    self.PromiseResult = data;

    //调用成功的回调
    self.callbacks.forEach(item => {
      item.onResolved(data);
    })
  }

  //reject函数
  fuction reject(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "rejected";
    //修改对象的结果值
    self.PromiseResult = data;

    //调用失败的回调
    self.callbacks.forEach(item => {
      item.onRejected(data);
    })
  }
  try{
    //同步调用exector函数
    exector(resolve，reject)；
  }catch(e){
    reject(e);
  }
}

Promise.prototype.then = function(onResolved,onRejected){

  const self = this;
  return new Promise((resolve,reject) =>{
    //调用回调函数
    if(this.PromiseState === "fulfilled"){

      try{
        //获取回调函数的执行结果
        let result = onResolved(this.PromiseResult);
        //判断
        if(result instanceof Promise){
          result.then(v => {
            resolve(v);
          },r => {
            reejct(r);
          })
        }esle{
          resolve(result);
        }
      }catch(e){
        reject(e);
      }
    }
    if(this.PromiseState === "rejected"){
      onRejectd(this.PromiseResult);
    }
  
    //判断pending状态
    if(this.PromiseState === "pending"){
      //保存回调函数
      this.callbacks.push({
        onResolved:fuction(){
          try{
            let result = onResolved(self.PromiseResult);
            //判断
            if(result instanceof Promise){
              result.then(v => {
                resolve(v);
              },r => {
                reejct(r);
              })
            }esle{
              resolve(result);
            }
          }catch(e){
            reject(e)
          }
        },
        onRejected:fuction(){
          try{
            let result = onRejected(self.PromiseResult);
            //判断
            if(result instanceof Promise){
              result.then(v => {
                resolve(v);
              },r => {
                reejct(r);
              })
            }esle{
              resolve(result);
            }
          }catch(e){
            reject(e)
          }
        }
        }
      }) 
    }
  })

}

11.代码的补充和完善

function Promise(executor){

  //添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;

  //
  声明属性
  this.callbacks = [];
  
  //保存实例对象的this值
  const self = this；

  //resolve函数
  fuction resolve(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "fulfilled";
    //修改对象的结果值
    self.PromiseResult = data;

    //调用成功的回调
    self.callbacks.forEach(item => {
      item.onResolved(data);
    })
  }

  //reject函数
  fuction reject(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "rejected";
    //修改对象的结果值
    self.PromiseResult = data;

    //调用失败的回调
    self.callbacks.forEach(item => {
      item.onRejected(data);
    })
  }
  try{
    //同步调用exector函数
    exector(resolve，reject)；
  }catch(e){
    reject(e);
  }
}

Promise.prototype.then = function(onResolved,onRejected){

  const self = this;
  return new Promise((resolve,reject) =>{
    //调用回调函数
    if(this.PromiseState === "fulfilled"){

      try{
        //获取回调函数的执行结果
        let result = onResolved(this.PromiseResult);
        //判断
        if(result instanceof Promise){
          result.then(v => {
            resolve(v);
          },r => {
            reejct(r);
          })
        }esle{
          resolve(result);
        }
      }catch(e){
        reject(e);
      }
    }
    if(this.PromiseState === "rejected"){
      
       try{
        //获取回调函数的执行结果
        let result = onRejectd(this.PromiseResult);
        //判断
        if(result instanceof Promise){
          result.then(v => {
            resolve(v);
          },r => {
            reejct(r);
          })
        }esle{
          resolve(result);
        }
      }catch(e){
        reject(e);
      }
    }
  
    //判断pending状态
    if(this.PromiseState === "pending"){
      //保存回调函数
      this.callbacks.push({
        onResolved:fuction(){
          try{
            let result = onResolved(self.PromiseResult);
            //判断
            if(result instanceof Promise){
              result.then(v => {
                resolve(v);
              },r => {
                reejct(r);
              })
            }esle{
              resolve(result);
            }
          }catch(e){
            reject(e)
          }
        },
        onRejected:fuction(){
          try{
            let result = onRejected(self.PromiseResult);
            //判断
            if(result instanceof Promise){
              result.then(v => {
                resolve(v);
              },r => {
                reejct(r);
              })
            }esle{
              resolve(result);
            }
          }catch(e){
            reject(e)
          }
        }
        }
      }) 
    }
  })

}

对重复性代码进行封装

function Promise(executor){

  //添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;

  //
  声明属性
  this.callbacks = [];
  
  //保存实例对象的this值
  const self = this；

  //resolve函数
  fuction resolve(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "fulfilled";
    //修改对象的结果值
    self.PromiseResult = data;

    //调用成功的回调
    self.callbacks.forEach(item => {
      item.onResolved(data);
    })
  }

  //reject函数
  fuction reject(data){

    //判断状态
    if(PromiseState !== "pending") return;
    //修改对象的状态
    self.PromiseState = "rejected";
    //修改对象的结果值
    self.PromiseResult = data;

    //调用失败的回调
    self.callbacks.forEach(item => {
      item.onRejected(data);
    })
  }
  try{
    //同步调用exector函数
    exector(resolve，reject)；
  }catch(e){
    reject(e);
  }
}

Promise.prototype.then = function(onResolved,onRejected){

  const self = this;
  return new Promise((resolve,reject) =>{

    //封装
    function callback(type){
      try{
        //获取回调函数的执行结果
        let result = type(self.PromiseResult);
        //判断
        if(result instanceof Promise){
          result.then(v => {
            resolve(v);
          },r => {
            reejct(r);
          })
        }esle{
          resolve(result);
        }
      }catch(e){
        reject(e);
      }
    }
    //调用回调函数
    if(this.PromiseState === "fulfilled"){
      callback(onResolved);
    }
    if(this.PromiseState === "rejected"){
       callback(onRejectd)
    }
  
    //判断pending状态
    if(this.PromiseState === "pending"){
      //保存回调函数
      this.callbacks.push({
        onResolved:callbback(onResolved),
        onRejected:callbback(onRejected)
      }) 
    }
  })

}

11.catch方法和异常穿透

不想做菜鸟了
关注
前端基础之Promise
HXL009的博客
04-05 1679
Promise 在我们写函数的时候通常会使用回调函数，当多个函数相互嵌套调用时就可能会产生回调地狱，为了解决这个问题，promise诞生生了，promise可以说是当前最好用的解决回调地狱的方案了。 Promise简介 promise，中文翻译为承诺，有三种状态pending，fulfilled，rejected，初始时状态为pending，成功时状态为fulfilled，失败时状态为rejected，且状态变化不可逆，只能有pending到fulfilled或pending到rejected。 Promi
Web前端Promise
guai_guai_guai的博客
07-18 1040
说明：只有这两种，且一个promise对象只能改变一次，无论变为成功还是失败，都会有一个结果数据，成功的结果数据一般称为value，失败的结果数据一般称为reason。说明：返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败了就直接失败。说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态。如果传入的参数为非promise类型的对象，则返回的结果为成功promise对象。无论传入什么样的数值，结果均为失败的promise对象。
前端Promise
热门推荐
yin_ping1101的博客
05-05 1万+
一、Promise的理解与使用 抽象表达: Promise是ES6新增的一种语法，是异步编程的一种解决方案。（旧方案是单纯的使用回调函数） 异步编程：fs文件操作、数据库操作、Ajax、定时器。 具体表达： （1）从语法上说，promise是一种构造函数 （2）从功能上说，promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值。 1. Promise的状态 三种状态： pending（初始状态) f......
前端面试题之Promise
枫ゞ的博客
02-15 4672
1. Promise有几种状态? 首先 Promise 有三种状态 pending（初始） resolve (成功) reject (失败) 为什么呢？请看下面代码： pending状态 const promise1=new Promise((resolve,reject)=>{}) console.log(promise1) 当我们实例化一个对象之后，由下面图片可知，此promise1此时的状态为pending，因为我们还没有执行Promise中的resolve或reject ..
前端知识之promise
qq_37169866的博客
02-25 3964
什么是promise？ promise 是 ES6 中提供的原生对象 promise主要用于异步计算，将异步操作队列化，按照期望的顺序执行以返回符合预期的结果 promise的作用 咱们先了解什么是同步，什么是异步 举个形象的例子： 同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。 异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。 还有个简单的例子 打电话是同步 发消息是异步 异步操作的常见语法（ajax） /
前端知识点之promise
weixin_45362626的博客
07-14 848
Promise 是异步编程的一种更优雅的解决方案，比传统的解决方案——回调函数——更合理和更强大
前端promise理解
zzyzzylalala的博客
09-20 2997
promise学习
前端Promise总结笔记
m0_67391870的博客
03-09 2598
目录 一.什么是Promise： 二.为啥使用Promise： 三. promise初体验： 四：promise体验ajax请求： 五：Promise封装ajax请求： 六：promise的状态改变： 七：Promise基本流程图： 八：Promise的API 使用： 1. Promise 的构造函数：Promise（executor）{} 2. Promise.prototype.then 方法: (onResolved, onRejected)=> {} 3.Promise.
前端 JS 经典：Promise 详解
weixin_64684095的博客
06-10 5847
在以前我们实现异步是用的回调函数，当一个异步请求需要依赖上一个异步请求返回的结果的时候，就会形成如下这种的调用结构。这种结构看着很杂乱且不易维护，被我们亲切的叫做。为了解决回调地狱的问题，Promise 就诞生了。。
前端异步技术之Promise
08-10
在实际项目中，Promise常与Ajax请求、定时器、文件操作等结合使用，是现代前端开发不可或缺的一部分。对于想要提升JavaScript异步编程能力的开发者来说，掌握Promise的使用至关重要。通过深入学习和实践，可以更好地...
前端-JavaScrip-Promise-手写Promise
07-25
手写Promise源码 遵循Pormise/A+规范 适合学习Promise源码的同学
前端Promise的理解的面试题
04-25
有关前端中的promise的理解和相关面试题，推荐要实习、就业的人在面试之前看看，提高自己的面试通过率，当然高手也可以看看来查缺补漏，有否新的感悟。 promise（承诺）是异步编程的一种解决方案； Promise 它是一...
前端开源库-es6-promise-pool
08-29
**前端开源库——ES6 Promise Pool** 在现代前端开发中，异步操作是不可或缺的一部分，Promise作为JavaScript中处理异步操作的重要工具，极大地改善了代码的可读性和可维护性。然而，当需要同时处理大量异步任务时...
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 597
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 373
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 5840
Webpack 打包后文件过大，如何优化？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1174
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
第十一章 【前端】调用接口（11.1）——Vite 环境变量
qdbest的专栏
09-29 135
Vite。
前端promise什么意思
09-24
前端Promise是一种处理异步操作的对象模型，由浏览器原生支持，用于解决JavaScript回调地狱的问题。它代表了一个可能会返回值（成功）或失败（错误）的结果，并提供了一种链式调用的方式来组织异步代码，使得代码更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值