首页 > 其他分享 >Promise

Promise

时间:2024-03-14 21:04:48浏览次数:22  
标签:resolve console value promise reject Promise

Promise是什么

1.1 理解

​ 1.抽象表达:

​ 1)promise是一门新的技术(ES6语言规范)

​ 2)promise是js进行异步编程的新解决方案

旧方案是单纯使用回调函数

​ 2.具体表达

​ 1)从语法上来说Promise是一个构造函数,

​ 2) 从功能上来说:promise对象用来封装一个异步操作并可以获取成果 失败的结果值

异步编程:fs文件炒作, 数据库操作,AJAX,定时器

2.2为什么要用Promise

​ 2.2.1指定回调函数的方法更加灵活

​ 1)旧的:必须在指定任务前指定

​ 2)promise:启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数。

​ 2.2.2 支持链式调用可以解决回调地狱问题 1)什么是回调地狱? 回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函数执行的条件

​ 2)回调地狱的缺点? 不便于阅读 / 不便于异常处理 解决方案? promise 链式调用 终极解决方案? async/await

promise的状态:

​ pending: 未定义的

1.3. 如何使用 Promise?1.3.1. API

  1. Promise 构造函数: Promise (excutor) {}(1) executor 函数: 执行器 (resolve, reject) => {}(2) resolve 函数: 内部定义成功时我们调用的函数 value => {}(3) reject 函数: 内部定义失败时我们调用的函数 reason => {}说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

  2. Promise.prototype.then 方法: (onResolved, onRejected) => {}(1) onResolved 函数: 成功的回调函数 (value) => {}(2) onRejected 函数: 失败的回调函数 (reason) => {}说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调返回一个新的 promise 对象

  3. Promise.prototype.catch 方法: (onRejected) => {}(1) onRejected 函数: 失败的回调函数 (reason) => {}

  4. Promise.resolve 方法: (value) => {}(1) value: 成功的数据或 promise 对象说明: 返回一个成功/失败的 promise 对象

    ​ 1.1如果传入为非promise对象 返回的结果为成功的promise对象

      let p2 = Promise.resolve(521)
      console.log(p2);

    1.2如果传入为一个promise对象 ,则参数的结果决定了 resolve的结果

      
          let p3 = Promise.resolve(new Promise((resolve, reject) => {
            // resolve('p3成功')
            reject('p3失败')
          }))
      console.log(p3); //rejected

  5. Promise.reject 方法: (reason) => {}(1) reason: 失败的原因说明: 无论传入的是一个promise对象或者不是返回的都是一个失败的 promise 对象

      //返回一个失败的 promise 对象
      const p4 = Promise.reject(520)
      console.log(p4);//rejected
      ​
      const p5 = Promise.reject(new Promise((resolve,reject)=>{
        resolve('p5成功')
        // reject('p5失败')
      }))
      console.log(p5); //rejected

  6. Promise.all 方法: (promises) => {}(1) promises: 包含 n 个 promise 的数组说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败

      
       const p6 = new Promise((resolve,reject)=>{
        resolve('p6成功')
       })
       const p7 = Promise.resolve('hello cui')
       const p8 = Promise.resolve('hello chen')
      ​
      const result = Promise.all([p6,p7,p8])
      console.log(result); //fulfilled 
      ​

  7. Promise.race 方法: (promises) => {}(1) promises: 包含 n 个 promise 的数组说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

      
      const p9 = new Promise((resolve,reject)=>{
        resolve('p9成功')
      })
      const p10 = Promise.resolve('zhi')
      const p11 = Promise.resolve('zhii')
      const race = Promise.race([p9,p10,p11])
      console.log(race); //fulfilled

1.3.2. promise 的几个关键问题

  1. 如何改变 promise 的状态?(1) resolve(value): 如果当前是 pending 就会变为 resolved(2) reject(reason): 如果当前是 pending 就会变为 rejected(3) 抛出异常: 如果当前是 pending 就会变为 rejected

  2. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?当 promise 改变为对应状态时都会调用

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

  4. promise.then()返回的新 promise 的结果状态由什么决定?(1) 简单表达: 由 then()指定的回调函数执行的结果决定(2) 详细表达:① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常

      
      const p12 = new Promise((resolve,reject)=>{
        resolve('okkk')
      })
      const esc = p12.then((value)=>{
        throw '有个问题'
      },(reason)=>{
      ​
      })
      console.log(esc)// rejected

    ② 如果返回的是非promise的任意值, 新promise变为resolved, value为返回的值

      
      const p13 = new Promise((resolve,reject)=>{
        resolve('okkk')
      })
      const number = p13.then((value)=>{
        return 521
      },(reason)=>{
      ​
      })
      console.log(number)// fulfilled

    ③ 如果返回的是另一个新promise, 此promise的结果就会成为新promise的结果

      
      const p14 = new Promise((resolve,reject)=>{
        resolve('okkk')
      })
      const obj = p14.then((value)=>{
        return new Promise((resolve,reject)=>{
          // resolve('obj成功')
          reject('obj失败')
        })
      },(reason)=>{
      ​
      })
      console.log(obj)// rejected

  5. promise 如何串连多个操作任务?(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用(2) 通过 then 的链式调用串连多个同步/异步任务

      
      const p15 = new Promise((resolve, reject) => {
            resolve('p15成功')
          })
          p15.then(value => {
            return new Promise((resolve, reject) => {
              resolve('sucess')
            })
          }).then(value => {
            console.log(value); //sucess
          }).then(value => {
            console.log(value); // undefind  因为前面的then没有return ,就是return undefined
          })

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

      
         const p16 = new Promise((resolve,reject)=>{
            reject('p16成功')
          })
          p16.then(value => {
            console.log(111);
          }).then(value => {
            console.log(222);
          }).then(value => {
            console.log(333);
          }).catch(reason =>{
            console.warn(reason);
          })

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

      
      const p17 = new Promise((resolve,reject)=>{
            // reject('p16失败')
            resolve('p17成功')
          })
          p16.then(value => {
            console.log(111111);
            return new Promise(()=>{})
          }).then(value => {
            console.log(222222);
          }).then(value => {
            console.log(333333);
          }).catch(reason =>{
            console.warn(reason);
          })

promise的状态只能改变一次

  • 3.2. async 函数

  • 函数的返回值为 promise 对象

  • promise 对象的结果由 async 函数执行的返回值决定

  • 3.3. await 表达式

  • await 右侧的表达式一般为 promise 对象, 但也可以是其它的值

  • 如果表达式是 promise 对象, await 返回的是 promise 成功的值

  • 如果表达式是其它值, 直接将此值作为 await 的返回值

  • 3.4. 注意

  • await 必须写在 async 函数中, 但 async 函数中可以没有 await

  • 如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理

标签:resolve,console,value,promise,reject,Promise
From: https://blog.csdn.net/qq_62079814/article/details/136689705

相关文章

  • 【JS】Promise.all实现所有接口加载完成loading关闭
    将每个请求封装成promise对象,当请求到数据后都resolve出去,再调用Promsie.all方法将每个promise对象作为参数传入进去。这样每个api的promise对象状态都resolve“解决后”,就能在Promise.all([p1,p2…p]).then中拿到所有api请求完成的状态,从而实现效果。created(){t......
  • 【Javascript】 Promise 对象(二)
    Promise.all()Promise.all()方法用于将多个Promise实例,包装成一个新的Promise实例。constp=Promise.all([p1,p2,p3]);上面代码中,Promise.all()方法接受一个数组作为参数,p1、p2、p3都是Promise实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为Pr......
  • 简单了解Promise
    回调地狱:回调地狱是指回调函数中嵌套回调函数的情况。回调函数是为了实现代码顺序执行而出现的一种操作,会造成代码可读性差,后期难维护。一、Promise是什么?Promise是最早由社区提出和实现的一种解决异步编程的方案,比其他传统的解决方案(回调函数和事件)更合理更强大。ES6将其写......
  • Promise对象的特点
    Promise对象的特点·:对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)fulfilled(已成功)rejected(已失败)只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。·一旦状态改变,就不会再变,任何时候都可以得到这个结果。......
  • 【Javascript】 Promise 对象(一)
    Promise的含义Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操......
  • Promise用法
    如果你没有使用 async 和 await,但仍然需要处理异步操作,你可以使用 Promise 对象。Promise 对象代表了一个可能现在、将来或永远不可用的值。functionfetchDataWithPromise(){returnnewPromise((resolve,reject)=>{uni.request({url:'https:/......
  • 用promise定义方法时如何避免 自执行/周期影响 多次执行问题:将promise作为方法的回调
    如果你在Promise内部定义了异步操作,并希望避免Promise在创建时自动执行,你可以将这些异步操作封装在一个函数内,并在需要时调用该函数。这样可以确保在适当的时机执行异步操作,而不是在Promise对象创建时或周期更新时(会重新定义变量)立即执行。 以下是一个示例,演示了如何在Promise......
  • Promise.resolve
    Promise.resolve是一个JavaScript方法,用于创建一个以给定值解析的Promise对象。当Promise.resolve方法被调用时,它会返回一个已解析的Promise对象,该对象的状态是已完成(fulfilled)并且其值是传递给Promise.resolve方法的参数。Promise.resolve方法有两种常见用法:传递一个普通值作......
  • 手写Promise
    目录参考资料Promises介绍文档Promises/A+规范Promises的一种实现方式github上2.6k+star的一个Promise实现方式手写Promise测试运行执行结果参考资料Promises介绍文档Promises/A+规范Promises的一种实现方式github上2.6k+star的一个Promise实现方式手写......
  • 什么是 axios?axios与promise区别
    Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中promise是现代javascript中异步编程的基础,是一个由异步函数返回的可以向我们指示当前操作所处的状态的对象使用cdn:<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>//为给定ID的u......