Promise

已于 2022-04-16 19:55:08 修改
阅读量537 收藏
点赞数
分类专栏： ES6 文章标签： javascript
于 2022-04-02 14:13:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46273011/article/details/123907292
版权

目录

基本格式：状态和方法

promise实例使用then方法后任然是一个promise，可以继续调用then

 catch处理错误的，reject

promise对象的简写

promise.resolve()

promise.reject()

管理多个promise对象

promise.all()

promise.race()

promise.allSettle()

注意事项

传入的参数，要是可以迭代的对象，如果不是promise，会自动转化为promise对象

管理多个promise对象，出现错误

promise的产生是为了解决回调地狱的问题。promise是一个对象，有属性和方法。

基本格式：状态和方法

一个promise实例有三个状态：pending(等待)，resolve（成功解决），resolved（成功解决后）。

或者pending（等待），reject（失败），rejected（失败后）。

promise有then方法，可以通过resolve和reject传给then数据，resolve和reject里面存放数据。

<script>
        // promise书写的格式，一个promise要经历三个状态，pending ,resolve ,reject
        const a =new Promise((resolve,reject)=>{
            // 执行resove后就是resolved状态
            resolve("传给then");
            // 执行reject后就是rejected状态
            // reject();
        });
        // 返回的也是一个promise对象，因此也可以继续调用then方法
        a.then(
            // 当是resolve（）执行的时候，就显示secucess

            (data)=>{
                console.log("secucess",data);
            },
            ()=>{
                console.log("error");
            },

        )
    </script>

promise实例使用then方法后任然是一个promise，可以继续调用then

上一个then控制下一个then，默认下一个then执行成功

    <script>
        // promise书写的格式，一个promise要经历三个状态，pending resolve ,reject
        const a =new Promise((resolve,reject)=>{
            // 执行resove后就是resoved状态
           resolve("传给then");
            // 执行reject后就是rejected状态
            // reject();
        });
        // 返回的也是一个promise对象，因此也可以继续调用then方法
        a.then(
            // 当是resove（）执行的时候，就显示secucess

            (data)=>{
                console.log("secucess",data);
                // 默认
                // return undefined;
                // 等价于 ,前面一定要加new
                return new Promise(reject=>{
                    // resove();
                    reject();

                })
            },
            ()=>{
                console.log("error");
            },

        ).then(

        //箭头函数的参数只有一个的时候可以去掉括号
            data=>{
                // 调用哪一个程序是由上一个then控制的，默认是成功
                console.log("secucess2");
            },
            error=>{
                console.log("error2");
            }
        )
    </script>

 catch处理错误的，reject

catch是then的特里专门处理失败

第一个promise是失败，紧接这是成功，那么会跳过成功，去执行下面的catch函数。

    <script>
        const a = new Promise(
            (resolve ,reject)=>{
                // revose();
                reject();
            }
        )
        a.then(
            data=>{
                console.log("yes1")
            }
        ).catch(err=>{ 
            console.log("no1");

        }   
        )
    </script>

promise对象的简写

promise.resolve()

 promise.resolve() 前面不要加new

      const a =new Promise( resolve=>{
            resove();
        })
        // 可以简写为一下形式，如果只有成功
        Promise.resolve();

promise.resolve()的应用

当使用setinterval定时器的时候，应该是循环定时发送数据（实现的时候没有循环发送），如果是延迟发送应该使用延迟器？

     //一般参数
    Promise.resolve("hello").then(data=>console.log("yes",data))
    // 非一般参数
    // Promise.resolve("hello").then
    const p1 = new Promise(resolve=>{
        setInterval(()=>{
            resolve("hello")
        },1000)
    })
    
    p1.then(
        data=>{
            console.log(data);
        }
    )

promise.reject()

管理多个promise对象

promise.all()

       管理多个promise对象， const  p = Promise.all([p1,p2]);

 <script>
        const delay=(ms)=>{
            return new Promise(
                resolve=>{
                    setTimeout(resolve,ms);
                }
            );
        };
        //then才开始调用promise对象
        const p1 =delay(1000).then(()=>{
            console.log("p1完成");
            return "p3";
        });
        const p2 =delay(2000).then(()=>{
            console.log("p2完成");
            return "p2";

        });
      const  p = Promise.all([p1,p2]);
      p.then(
          data=>{
              //接受的参数是组会成的promise中then中return后的对象
              console.log(data,"yes");//(2) ["p3", "p2"] "yes"
          },
          err=>{
              console.log(err);
          }
      )
    </script>

只有管理的多个状态在执行resolve后，状态为resolved，promise.all(）对象才执行成功，如果管理的子promise对象有个状态是rejected那么立刻执行失败。

    <script>
        const delay=(ms)=>{
            return new Promise(
                resolve=>{
                    setTimeout(resolve,ms);
                }
            );
        };
        //then才开始调用promise对象
        const p1 =delay(1000).then(()=>{
            console.log("p1完成");
            // return "p3";
            return Promise.reject("失败1")
        });
        const p2 =delay(2000).then(()=>{
            console.log("p2完成");
            return "p2";

        });
      const  p = Promise.all([p1,p2]);
      p.then(
          data=>{
              //接受的参数是组会成的promise中then中return后的对象
              console.log(data,"yes");//(2) ["p3", "p2"] "yes"
          },
          err=>{
              console.log(err,"no");//失败1 no
          }
      )
    </script>

promise.race()

第一个子promise 成功则父promise成功，第一个失败则失败

promise.allSettle()

then里面只有函数反应子promise 的成功和失败，不管成功还是失败都记录

    <script>
        const delay=(ms)=>{
            return new Promise(
                resolve=>{
                    setTimeout(resolve,ms);
                }
            );
        };
        //then才开始调用promise对象
        const p1 =delay(1000).then(()=>{
            console.log("p1完成");
            // return "p3";
            return Promise.reject("失败1")
        });
        const p2 =delay(2000).then(()=>{
            console.log("p2完成");
            return "p2";

        });
        // 管理多个promise对象
      const  p = Promise.allSettled([p1,p2]);
      p.then(
          //只有一个记录，不管子promise失败还是成功都记录
          data=>{
              //接受的参数是组会成的promise中then中return后的对象
              console.log(data,"yes");//(2) ["p3", "p2"] "yes"
          },
      )
    </script>

注意事项

传入的参数，要是可以迭代的对象，如果不是promise，会自动转化为promise对象

    <script>
        // 会将其自动转化为promise对象
        Promise.all([1,2,3]).then(
            data=>{
                console.log(data);//(3) [1, 2, 3]
            }
        )
        // 等价于
    //   promise.resolve() 前面不要加new
        const a =  Promise.resolve(1);
        const b =Promise.resolve(2);
        const c =  Promise.resolve(3);
        Promise.all([a,b,c]).then(
            data=>{console.log(data);}  //(3) [1, 2, 3]
        )
    </script>

管理多个promise对象，出现错误

可以单个处理，也可以在父promise对象处处理，使用catch（）方法。

好好睡觉好好学习好好吃饭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
promise:Python 中的超高性能 Promise 实现
05-30
承诺 这是 Python 中 Promise 的一个实现。 它是 Promises/A+ 的超级集，旨在拥有可读、高性能的代码，并仅提供在 Python 中使用 Promise 绝对必要的扩展。 它与完全兼容 安装 $ pip install promise 用法 下面的示例显示了如何加载 Promise 库。 然后它演示了从头开始创建一个 promise。 您只需调用Promise(fn) 。 在有一个关于这个方法返回什么的完整规范。 from promise import Promise promise = Promise ( lambda resolve , reject : resolve ( 'RESOLVED!' ) ) 应用程序接口 在所有示例之前，您将需要： from promise import Promise 承诺（解析器） 这将创建并返回一个新的
promise.md
06-03
promise.md记载了promise的规范 它是一套异步操作处理机制， [Promise A+](https://promisesaplus.com/) 是规范，jQuery、ES2015、q的promise都是对该规范的一种实现.
promise.pdf
05-30
promise学习笔记
Promise 基本使用
Celine921的博客
03-25 1465
promise 基本使用
Promise的两种写法
qq_45200669的博客
10-29 2802
第一种 //参数 -> 函数(resolve, reject) //resolve, reject本身也是函数 new Promise(resolve => { setTimeout(() => { resolve("aaa") }, 3000) }).then(res => { console.log(res, '第一次请求的结果') return new Promise(resolve => { .
Promise基本使用
hongzaoxin的博客
06-03 282
第一种写法 //Promise基础使用 创建Promise对象 //()=>{}箭头函数 例如function(){} //创建resolve,reject函数 //Promise 简化ajax
Promise的多种写法
qq_52242662的博客
03-18 1711
Promise的简化写法，以及all函数的介绍
Promise 中的三兄弟 .all(), .race(), .allSettled()
憨憨的大熊的博客
09-28 768
1.概述 Promise.all(promises: Iterable<Promise>): Promise<Array> Promise.all(iterable)方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise.
Promise.all、Promise.allSettled、Promise.any、Promise.race
m0_68324632的博客
08-23 5404
Promise的实例方法拓展 Promise.all() ：方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。 Promise.allSettled()：用来确定一组异步操作是否都结束了（不管成功或失败）。所以，它的名字叫做”Settled“，包含了”fulfilled“和”rejected“两种情况。 Promise.any()：ES2021 引入了Promise.any()方法。该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。 Promi
Promise.allSettled() 使用
酱子
04-13 4597
Promise.allSettled() 不管什么状态 都会收集起来 ： <script> // 不管什么状态 都会收集起来 const p1 = new Promise((resolve, reject) => { reject("第一个错"); }); const p2 = new Promise((resolve, r...
Promise用法
01-08
promise是个构造函数对象，解决了回调问题，它有三种状态，pending(等待态)，fulfiled(成功态)，rejected(失败态)，常用到的方法则有 then，catch，all，race promise是用来解决两个问题的： 回调地狱，代码难以维护...
手写简单的promise
梁婉玲krysliang的博客
02-15 288
const PENDING = 'pending'; const RESOLVED = 'resolved'; const REJECTED = 'rejected'; function newPromise(fn){ const _that = this; _that.state = PENDING; _that.value = null; _that.resolvedCa..
Promise的基本语法,三种状态,静态方法
m0_72962890的博客
11-19 560
promise的一些tips
深入理解Promise之一步步教你手写Promise构造函数
zxdznyy的博客
01-27 1924
Promise是前端面试中笔记走重要的一个考点。如何真正的了解promise？我们不如自己动手，写一个可以拿来用的Promise.js。下面是循序递进的写法教学，本文的最后也有完整写法的代码可以借鉴，希望能够帮助大家！后面如果有机会会写一篇详解promise的博客，欢迎关注！
Promise的使用详解
酒客的博客
12-23 1472
Promise内容详解–知识点整理 异步任务的处理 ​ 在ES6出来之后，有很多关于Promise的讲解、文章，也有很多经典的书籍讲解Promise。虽然等你学会Promise之后，会觉得Promise不过如此，但是在初次接触的时候都会觉得这个东西不好理解； 那么这里我从一个实际的例子来作为切入点： 我们调用一个函数，这个函数中发送网络请求（我们可以用定时器来模拟）； 如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去； 如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息
ES6 Promise（承诺）看这一篇就够了
^_^
08-03 8924
一、什么是promise 我们通常都会去 new 一个Promise，什么东西可以new啊? 是不是构造函数可以new， 通过控制台dir一下Promise 通过上面的输出，你可以知道promise是一个构造函数，而上面常见的几个方法，resolve、reject、catch、resolve 你不需要立即知道它是干嘛的，接下来 听鹅说 Promise是Es6新增的构造器，用来提优化异步代码的写法，Promise中文意为承诺，承诺它一段时间后返回给你最终的结果。 首先了解三个状态，用...
Promise的简写
qinqinde123的博客
10-06 646
一. 原始写法 new Promise((resolve, reject) => { resolve("aaa") }) .then((res) => { return new Promise((resolve, reject) => { resolve(res + "111") }) }) .then((res) => { return new Promise((resolve, reject) => { resolve(res + "222") }) }
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 114
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
promise 嵌套
04-17
Promise嵌套是指在使用Promise时，一个Promise的回调函数中又返回了一个新的Promise，形成了嵌套的结构。这种嵌套的结构可以用来处理多个异步操作的依赖关系，使得代码更加清晰和可读。 在Promise嵌套中，可以通过链式调用的方式来处理多个异步操作。具体来说，可以在一个Promise的回调函数中返回一个新的Promise对象，然后继续在新的Promise对象上添加回调函数。这样就可以形成一个Promise链，每个Promise的回调函数都可以处理前一个Promise的结果，并返回一个新的Promise对象。 下面是一个简单的示例，展示了Promise嵌套的用法： ```javascript function asyncOperation1() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Operation 1 completed'); }, 1000); }); } function asyncOperation2() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Operation 2 completed'); }, 2000); }); } function asyncOperation3() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Operation 3 completed'); }, 1500); }); } asyncOperation1() .then(result1 => { console.log(result1); return asyncOperation2(); }) .then(result2 => { console.log(result2); return asyncOperation3(); }) .then(result3 => { console.log(result3); }) .catch(error => { console.error(error); }); ``` 在上面的示例中，asyncOperation1、asyncOperation2和asyncOperation3分别表示三个异步操作。通过Promise的then方法，可以依次处理这三个异步操作的结果，并在控制台输出。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值