Promise学习

最新推荐文章于 2024-07-20 23:55:03 发布
最新推荐文章于 2024-07-20 23:55:03 发布
阅读量187 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47807991/article/details/123822018
版权

一、Promise的介绍和基本使用：

Promise其实是一个构造函数，任何异步操作都可以封装到promise中。
基本使用：
异步函数的普通写法：

 setInterval(() => {
      console.log('hello promise');
      console.log('hello promise');
      console.log('hello promise');
      console.log('hello promise');
      console.log('hello promise');
      console.log('hello promise');
   
      setTimeout(() => {
        console.log('hello vue');
        console.log('hello vue');
        console.log('hello vue');
        console.log('hello vue');
        console.log('hello vue');
        console.log('hello vue');

        setTimeout(() => {
          console.log('hello hels');
          console.log('hello hels');
          console.log('hello hels');
          console.log('hello hels');
          console.log('hello hels');
          console.log('hello hels');

        }, 1000);
      }, 1000);
    }, 1000);

使用Promise封装：
将原本写在resolve()处的代码封装到then()中,实现请求和处理分离

// 任何异步操作都可以封装到promise中
    // 参数 -> 函数（resolve,reject）
    // resolve reject本身又是函数
    // 链式编程
    new Promise((resolve,reject) => {
      // 第一次网络请求的代码
      setTimeout(() => {
        resolve()
      }, 1000);
    }).then(() => {
      // 第一次拿到结果的处理代码
      console.log('hello promise');
      console.log('hello promise');
      console.log('hello promise');
      console.log('hello promise');
      console.log('hello promise');
      console.log('hello promise');

      return new Promise((resolve,reject) => {
      // 第二次网络请求的代码
        setTimeout(() => {
          resolve()
        }, 1000);
      }).then(()=> {
        // 第二次拿到结果的处理代码
        console.log('hello vue');
        console.log('hello vue');
        console.log('hello vue');
        console.log('hello vue');
        console.log('hello vue');
        console.log('hello vue');

        return new Promise((resolve,reject) => {
          // 第三次网络请求的代码
          setTimeout(() => {
            resolve()
          }, 1000);
        }).then(()=>{
          // 第三次拿到结果的处理代码
          console.log('hello hels');
          console.log('hello hels');
          console.log('hello hels');
          console.log('hello hels');
          console.log('hello hels');
          console.log('hello hels');
        })
      })
    })

什么情况下会用到Promise？
一般情况下使用异步操作时，使用Promise对这个异步操作进行封装
成功时调用resolve
失败时调用reject

new Promise((resolve,reject) => {
      setTimeout(() => {
      // 成功时调用resolve
      // 失败时调用reject
      reject('error massage')
      }, 1000);
    }).then(() => {
      console.log(data);
      console.log(data);
      console.log(data);
    }).catch((err) => {
      console.log(err);
    })

二、Promise的三种状态和另外处理方式：

pending :
等待状态,比如正在进行网络请求,或者定时器没有到时间。
fulfill :
满足状态,当我们主动回调了resolve时,就处于该状态,并且会回调.then()
reject :
拒绝状态,当我们主动回调了reject时,就处于该状态,并且会回调.catch()

另外处理方式：

new Promise((resolve,reject)=>{
      setInterval(() => {
        resolve('hello promise')
        reject('erro massage')
      }, 1000);
    }).then(data => {
      console.log(data)
    },err => {
      console.log(err)
    })

三、Promise的链式调用：

这里我们通过模拟网络请求的方式来写三种调用方法：
模拟网络请求：
网络请求aaa -> 自己处理(10行)
处理：aaa111 ->自己处理(10行)
处理：aaa111222 -> 自己处理

第一种写法：

new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000);
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res,'假装是第一层的10行处理代码');

      // 2.对结果进行第一次处理
      return new Promise((resolve,reject) => {
        resolve(res + '111')
      })
   // 注意每一个then都是在上一个then之后
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res,'假装是第二层的10行处理代码');

      // 2.对结果进行第二次处理
      return new Promise((resolve) => {
        resolve(res + '222')
      })
    }).then(res => {
      console.log(res,'假装是第三层的10行处理代码');
    })

在这里插入图片描述
加入reject的写法：

new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000);
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res,'假装是第一层的10行处理代码');

      // 2.对结果进行第一次处理
      return new Promise((resolve,reject) => {
        //resolve(res + '111')
        reject('err')
      })
   // 注意每一个then都是在上一个then之后
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res,'假装是第二层的10行处理代码');

      // 2.对结果进行第二次处理
      return new Promise((resolve) => {
        resolve(res + '222')
      })
    }).then(res => {
      console.log(res,'假装是第三层的10行处理代码');
    }).catch(err => {
      console.log(err)
    })

在这里插入图片描述

第二种写法：对第一种的简写：
new Promise(resolve => resolve(结果))简写
Promise.resolve

new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000);
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res,'假装是第一层的10行处理代码');
      // 2.对结果进行第一次处理
      return Promise.resolve(res + '111')
  
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res,'假装是第二层的10行处理代码');

      // 2.对结果进行第二次处理
      return Promise.resolve(res + '222')
    }).then(res => {
      console.log(res,'假装是第三层的10行处理代码');
    })

加入reject：

new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000);
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res,'假装是第一层的10行处理代码');
      // 2.对结果进行第一次处理
      //return Promise.resolve(res + '111')
  		return Promise.reject('err massage')
  		//或者
      throw 'err massage'
  
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res,'假装是第二层的10行处理代码');

      // 2.对结果进行第二次处理
      return Promise.resolve(res + '222')
    }).then(res => {
      console.log(res,'假装是第三层的10行处理代码');
    }).catch(err => {
      console.log(err)
    })

在这里插入图片描述
第三种写法：对第二种的再简写：
省略掉Promise.resolve

new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000);
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res,'假装是第一层的10行处理代码');

      // 2.对结果进行第一次处理
      return res + '111'

    }).then(res => {
      // 1.自己处理10行代码
      console.log(res,'假装是第二层的10行处理代码');

      // 2.对结果进行第二次处理
      return res + '222'
    }).then(res => {
      console.log(res,'假装是第三层的10行处理代码');
    })

四、Promise的all方法：

// 这样写就会等两个请求的数据同时拿到之后放在results数组里再进行下一步操作

    Promise.all([
      new Promise((resolve,reject) => {
        $ajax({
          url: 'url1',
          success: function (data) {
           resolve(data)
          }
        })
      }),
      new Promise((resolve,reject) => {
        $ajax({
          url: 'url2',
          success: function (data) {
           resolve(data)
          }
        })
      })
    ]).then(results => {
      console.log(results)
    })
小何同学－
关注
学习Promise,这些知识点就够了
前端三疯的博客
07-28 314
用法 promise对象是通过new Promise(arg) 而来，对于传递的arg参数是由要求的，arg是处理器函数，这个处理器函数有接受两个函数作为参数–resolve和reject,通过调用resolve函数将promise的状态变为fulfilled,通过调用reject函数将状态变为rejected。 let promise = new Promise((resolve, reject)=>{ resolve(10); // reject(new Error("promsie erro
Promise学习笔记
丑小鸭变黑天鹅的博客
05-18 139
Promise学习笔记一、promise是什么？二、为什么要用Promise？三、Promise初体验1、抽奖案例2、读取文件案例3、AJAX案例4、封装fs模块5、util.promisify方法6、封装AJAX操作四、Promise的API1、then和catch2、resolve3、reject4、all5、race五、关键问题1、如何修改promise对象状态2、能否执行多个回调3、Promise 改变状态与指定回调的顺序问题4、Promise then方法的返回结果特点5、如何串联多个任务6、异常
Promise 详解（原理篇）
最新发布
When you can't win by being better, you can win by being different.
07-20 2180
Promise 是一种异步编程的解决方案。在异步操作中，callback 会导致回调地狱的问题，Promise 解决了这个问题。一个 Promise对象有以下三种状态:pending：初始状态，既不是成功，也不是失败状态。：意味着操作成功完成。rejected：意味着操作失败。当 new Promise() 被实例化后，即表示 Promise 进入 pending 初始化状态，准备就绪，等待运行。
Promise的学习
xiaotangyu7dong的博客
08-14 333
*** 手写Promise} //添加 then 方法 Promise . prototype . then = function(onResolved , onRejected) {}
Promise 学习笔记
01-08
Promise 底层实现 ：Promise实现原理（附源码） （本文学习并参考的一篇博客，推荐直接阅读） 其他推荐：Promise简单实现 （一）Promise 基本结构 Promise 是一种抽象异步处理对象，其核心概念为 “确保一件事做完...
javascript异步编程代码书写规范Promise学习笔记
10-24
通过学习Promise，开发者能够更好地管理JavaScript中的异步流程，提高代码质量。在现代JavaScript中，Promise已经成为ES6标准的一部分，而不再仅仅依赖于jQuery或其他库。了解并掌握Promise，对于任何JavaScript...
【JS】promise学习
weixin_43349627的博客
12-01 174
Promise 介绍与基本使用，自定义promise
Promise的相关介绍
Serena_tz的博客
04-27 231
二种类型的回调函数 同步回调 理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中 例子: 数组遍历相关的回调函数 / Promise 的 excutor 函数 异步回调 理解: 不会立即执行, 会放入回调队列中将来执行 例子: 定时器回调 / ajax 回调 / Promise 的成功|失败的回调 JS的error处理 错误的类型 Error: 所有错误的父类型 ReferenceError: 引用的变量不存在 TypeError: 数据类型不正确的错误 RangeError: 数据值不
Promise入门学习
十九万里的博客
06-22 237
1、promise概述 Promise是ES6中原生的一个方法 代表着未来要发生的某件事情，在javascript中来说就是异步操作，所以在js中promise就是异步操作常见的一种方法， 异步操作常见方法： 1、callback回调函数 2、事件监听 3、promise 4、发布/订阅模式 5、async/await 6、generator链式调用 这里我们主要学习Promise Promise主要的优点在于能把异步操作通过同步操作的流程表示出来，避免了异步的嵌套回调。产生回调地狱。 2、promis
Promise学习（一）：Promise的理解与简单使用
激洪的博客
04-18 501
Promise的理解与简单使用
【Promise学习】Promise的理解
qiaoyangla的博客
04-28 547
1、Promise 是什么? 抽象表达: （1） Promise 是一门新的技术(ES6 规范) （2）Promise 是 JS 中进行异步编程的新解决方案 备注：旧方案是单纯使用回调函数 具体表达: （1）从语法上来说: Promise 是一个构造函数 （2）从功能上来说: Promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果值 异步编程：fs文件操作，数据库操作，ajax，定时器等 2、为什么要用 Promise? 指定回调函数的方式更加灵活 1. 旧的: 必.
js中Promise学习
01-26
JS中的Promise是一种用于处理异步操作的对象。它可以将异步操作封装成一个Promise实例，并通过链式调用的方式处理异步操作的结果。下面是关于Promise的两个例子： 1. 异常穿透： ```javascript let p = new Promise...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值