前端Promise总结笔记_promise前端-CSDN博客

本文链接：https://blog.csdn.net/luo1831251387/article/details/115643059

本文深入解析Promise的原理、用法，实战演示了Promise封装ajax请求、状态转换、链式调用、自定义封装和async/await的结合，助你轻松理解异步编程并解决回调地狱问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.什么是Promise：

Promise 是在 js 中进行异步编程的新解决方案。（以前旧的方案是单纯使用回调函数）
从语法来说，promise是一个构造函数。
从功能来说，promise对象用来封装一个异步操作，并且可以获得成功或失败的返回值。
JS中的常见的异步操作：定时器，AJAX中一般也是异步操作（也可以同步），回调函数可以理解为异步（不是严谨的异步操作）…等。
剩下的都是同步处理

二.为啥使用Promise：

promise使用回调函数更灵活。旧的回调函数必须在启动异步任务前指定。
promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至能在异步任务结束后指定多个）
promise支持链式调用，可以解决回调地狱问题。（回调地狱就是多层回调函数嵌套使用，就是套娃，这样就不利于阅读和异常处理。）

三. promise初体验：

效果：点击一个按钮，有30%概率显示中奖。
实现：点击按钮后得到一个1到100间的随机数，小于等于30输出中奖，否则输出没中。期间用定时器模拟异步操作，在定时器里执行判断。
（1）基础的写法：

<button id="btn">click</button>

    <script>
        var btn = document.querySelector("#btn");
    // 该函数返回一个两数之间的随机整数，包括两个数在内
    function getRandomIntInclusive(min, max) {
   
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
    }
    // 点击事件
     btn.addEventListener('click',function(){
   
         // 1秒的定时器，模拟异步操作
         setTimeout(() => {
   
             // 得到1到100间的一个数
             let n = getRandomIntInclusive(1, 100);
             if (n <= 30) {
   
                 alert('中奖喽');
             } else {
   
                 alert('没中奖');
             }
         }, 1000);
     })
    </script>

在这里插入图片描述
（2）promise写法，在promise里封装一个异步操作。

    <script>
        var btn = document.querySelector("#btn");
    // 得到一个两数之间的随机整数，包括两个数在内
    function getRandomIntInclusive(min, max) {
   
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
    }
    // 点击事件
     btn.addEventListener('click',function(){
   
         // 下面是promise ，resolve表示解决，reject表示拒绝 ，都是函数类型数据。
         const p = new Promise((resolve,reject) => {
   
             setTimeout(()=>{
   
                  let n = getRandomIntInclusive(1, 100);
                  if(n<=30){
   
                      resolve(); //将promise状态设为 “成功”
                  }else{
   
                      reject(); //将promise状态设为 “失败”
                  }
             },1000)
         });
         // 调用then方法
         p.then(()=>{
   
             // “成功”执行这步
            alert('中奖喽');
         },()=>{
   
             // “失败”执行这步
            alert('没中奖');
         })
     })

假如要在上面输出结果后加上选中的号码：
因为.then（）里并不能直接获得 n，所以在resolve与reject里把n当结果值返回。

 // 点击事件
     btn.addEventListener('click',function(){
   
         // 下面是promise ，resolve表示解决，reject表示拒绝 ，都是函数类型数据。
         const p = new Promise((resolve,reject) => {
   
             setTimeout(()=>{
   
                  let n = getRandomIntInclusive(1, 100);
                  if(n<=30){
   
                      resolve(n); //将promise状态设为 “成功”，并把结果值n返回
                  }else{
   
                      reject(n); //将promise状态设为 “失败”，并把结果值n返回
                  }
             },1000)
         });
         // 调用then方法
         // value为值的意思，reason为理由的意思，都是形参
         p.then((value)=>{
   
             // “成功”执行
            alert('中奖喽'+value);
         },(reason)=>{
   
             // “失败”执行
            alert('没中奖'+reason);
         })
     })

在这里插入图片描述

四：promise体验ajax请求：

这是一个开源社区的api文档，有许多api。
效果：点击按钮获得一句名言在控制台输出。
基础写法：

 <script>
        var btn = document.querySelector("#btn");
    // 点击事件
      btn.addEventListener('click',function(){
   
         //创建对象
         const xhr = new XMLHttpRequest();
         //初始化
         xhr.open('GET',"http://poetry.apiopen.top/sentences");
         //发送
         xhr.send();
         //处理响应结果
         xhr.onreadystatechange = function(){
   
             if(xhr.readyState === 4){
   
                 if(xhr.status >=200 && xhr.status < 300){
   
                     //输出响应体
                     console.log(xhr.response);
                 }else{
   
                     //输出响应状态码
                     console.log(xhr.status);
                 }
             }
         }
     })
    </script>

在这里插入图片描述
promise封装：

 // 点击事件
     btn.addEventListener('click',function(){
   
         const p = new Promise((resolve,reject) => {
   
              //创建对象
         const xhr = new XMLHttpRequest();
             //初始化
             xhr.open('GET', "http://poetry.apiopen.top/sentences");
             //发送
             xhr.send();
             //处理响应结果
             xhr.onreadystatechange = function () {
   
                 if (xhr.readyState === 4) {
   
                     if (xhr.status >= 200 && xhr.status < 300) {
   
                         //输出响应体
                        resolve(xhr.response);
                     } else {
   
                         //输出响应状态码
                         reject(xhr.status);
                     }
                 }
             }
         })
         p.then(value=>{
   
              console.log(value);
         },reason=>{
   
             //控制台输出警告信息
               console.warn(reason);
         })
     })

在这里插入图片描述
若把接口写错：

五：Promise封装ajax请求：

跟上一步差不多。就是把其封装在一个sendAJAX（）的自定义函数里。


function sendAJAX(url) {
   
         return new Promise((resolve, reject) => {
   
                //创建对象
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'json';
                //初始化
                xhr.open('GET', url);
                //发送
                xhr.send();
                //处理响应结果
                xhr.onreadystatechange = function () {
   
                    if (xhr.readyState === 4) {
   
                        if (xhr.status >= 200 && xhr.status < 300) {
   
                            //输出响应体
                            resolve(xhr.response);
                        } else {
   
                            //输出响应状态码
                            reject(xhr.status);
                        }
                    }
                }
            });
     }
      
     sendAJAX("http://poetry.apiopen.top/sentences")
     .then(value=>{
   
              console.log(value);
         },reason=>{
   
             //控制台输出警告信息
               console.warn(reason);
         })

六：promise的状态改变：

promise状态表示实例对象的一个属性【PromiseState】。包括以下值：
（1）pending 未决定的
（2）resolved 或 fullfilled 成功
（3）rejected 失败
Promise对象的值表示实例对象的另一个属性【PromiseResult】。保存着对象【成功/失败】的结果。而其状态改变只有以下两种可能：
（1）pending 变为resolved
（2）pending 变为 rejected
注：一个promise对象只能改变一次，无论成功或失败都会有一个结果数据，成功的称为 value ，失败的称为 reason 。

七：Promise基本流程图：

在这里插入图片描述

八：Promise的API 使用：

1. Promise 的构造函数：Promise（executor）{}

（1）executor 函数：执行器 （resolve，reject）=> {}。
（2）resolve 函数：内部定义成功时调用函数 value => {} 。
（3）reject 函数：内部定义失败时调用函数 reason => {} 。
注意：Promise内部会立同步即调用executor，异步操作在执行器里执行。

2. Promise.prototype.then 方法: (onResolved, onRejected)=> {}

(1) onResolved 函数:成功的回调函数 (value) => {}
(2) onRejected 函数:失败的回调函数 (reason) => {}
注:指定用于得到成功value的成功回调和用于得到失败reason的失败回调是返回一个新的promise对象。

3.Promise.prototype.catch万法: (onRejected) => {}

onRejected.函数: 失败的回调函数**(reason)=> {}**
注：只是失败的调用。then()的语法糖，相当于: then(undefined, onRejected)。

4. Promise.resolve 方法: (value)=> {}

value: 成功的数据或promise对象
注:如果传入的参数为非Promise类型的对象，则返回的结果为成功promise对象，如果传入的参数为Promise 对象，则参数的结果决定了resolve 的结果。

5. Promise.reject 方法: (reason) => {}

reason: 失败的原因
注:无论传入啥只返回一个失败的promise对象。

6. Promise.all 方法: (promises)=> {}

promises: 包含n个promise的数组
注:返回一个新的promise,只有所有的promise都成功才成功,只要有一个失败了就直接失败。失败了返回那个失败值。

7. Promise.race 方法: (promises)=> {}

promises: 包含n个promise的数组
注:返回一个新的promise,第一个完成的promise的结果状态就是最终的结果状态。
来一个例子：

 let p1 = new Promise((resolve,reject)=>{
   
          setTimeout(()=>{
   
              resolve('yes');
          },1000)
      })
      let p2 = Promise.resolve('success');
      let p3 = Promise.resolve('come');

      const result = Promise.race([p1,p2,p3]);
      console.log(result);

在这里插入图片描述

九：使用Promise面临的关键问题：

1.如何改变 promise的状态?

(1) resolve(value): 如果当前是pending就会变为resolved。
(2) reject(reason): 如果当前是pending就会变为rejected。
(3)抛出异常 throw :如果当前是pending就会变为rejected。

 let p1 = new Promise((resolve,reject)=>{
   
           //  resolve('success');
         //    reject('error');
          //   throw 'error';
      })

2.一个 promise指定多个成功/失败回调函数,都会调用吗?

当promise改变为对应状态时都会调用。

 let p = new Promise((resolve,reject)=>{
   
            resolve('success');
      })
      // 第一次回调
      p.then(value=>{
   
          console.log("yes");
      })
      // 第二次回调
      p.then(value=>{
   
          console.log("oh yes");
      })

在这里插入图片描述
3.改变 promiseT状态和指定回调函数谁先谁后?

(1)都有可能，正常情况下是先指定回调再改变状态,但也可以先改状态再指定回调
(2)如何先改状态再指定回调?
①在执行器中直接调用resolve(/reject()；
②延迟更长时间才调用then()；
(3)什么时候才能得到数据?
①如果先指定的回调，那当状态发生改变时,回调函数就会调用,得到数据
②如果先改变的状态, 那当指定回调时,回调函数就会调用,得到数据

4. promise.then（）返回的新promise的结果状态由什么决定?

(1)简单表达: then（）指定的回调函数执行的结果决定。
(2)详细表达:
*如果抛出异常，新promise变为rejected, reaon为抛出的异常。
*如果返回的是非prormise的任意值,新promise变为resolved, value为返回的值。
*如果返回的是另一个新promise,此promise的结果就会成为新promise的结果。

随笔：

let p = new Promise((resolve,reject) => {
   
            // resolve('success'); 
           // reject('No'); 
          //  throw 'oh no';
      });    
      let result = p.then(value => {
   
           console.log(value);
      }, reason => {
   
           console.warn(reason);   
      });     
      console.log(result);

5. promise 如何串连多个操作任务?

(1) promise 的then()返回一个新的promise,可以开成then(）的链式调用。
(2)通过then的链式调用串连多个同步/异步任务。

 let p =new Promise((resolve,reject) => {
   
          resolve("yes");
     })
     p.then(value => {
   
          return new Promise((resolve,reject)=>{
   
              resolve("oh yes~");
          });
     }).then(value => {
   
          console.log(value);
     })

输出结果：
oh yes~

 let p =new Promise((resolve,reject) => {
   
          resolve("yes");
     })
     p.then(value => {
   
          return new Promise((resolve,reject)=>{
   
              resolve("oh yes~");
          });
     }).then(value => {
   
          console.log(value);
     }).then(value => {
   
          console.log(value);
     })

输出结果：
oh yes~
undefined

6. promise 的异常穿透。

(1)当使用promise的then链式调用时,可以在最后指定失败的回调。
(2)前面任何操作出了异常,都会传到最后失败的回调中处理。

 let p =new Promise((resolve,reject) => {
   
         setTimeout(()=>{
   
            resolve("yes");
         },1000);
     })
     p.then(value => {
   
          throw 'oh No';
     }).then(value => {
   
          console.log("123");
     }).then(value => {
   
          console.log("456");
     }).catch(reason=>{
   
         console.warn(reason);
     })

输出结果：
oh No

7.中断 promise链。

(1)当使用promise的then链式调用时,在中间中断,不再调用后面的回调函数。
(2)办法:在回调函数中返回一个pendding状态的promise对象。

未中断：

 let p =new Promise((resolve,reject) => {
   
         setTimeout(()=>{
   
            resolve("yes");
         },1000);
     })
     p.then(value => {
   
          console.log("789");
     }).then(value => {
   
          console.log("123");
     }).then(value => {
   
          console.log("456");
     }).catch(reason=>{
   
         console.warn(reason);
     })

输出结果：
789
123
456

中断：

 let p =new Promise((resolve,reject) => {
   
         setTimeout(()=>{
   
            resolve("yes");
         },1000);
     })
     p.then(value => {
   
          console.log("789");
          return new Promise(()=>{
   });
     }).then(value => {
   
          console.log("123");
     }).then(value => {
   
          console.log("456");
     }).catch(reason=>{
   
         console.warn(reason);
     })

输出结果：
789

十：Promise的自定义封装：

1.初始化结构搭建：

 // 自定义函数 Promise
     function Promise(executor){
   

     }
     // 添加then方法
     Promise.prototype.then = function(onResolved,onRejected){
   
         
     }

注：prototype 属性使您有能力向对象添加属性和方法。

2. 搭建resolve与reject结构：

 // 自定义函数Promise
     function Promise(executor){
   
          //自定义resolve函数,名字不一定用resolve
          function resolve(data){
   

          }
          //自定义reject函数
          function reject(data){
   

          }
          //同步调用【执行器函数】
          executor(resol