promise专题02-promiseResult，promise的基本流程，promiseAPI（构造函数，then，catch，resolve，reject，all，race），几个关键问题

最新推荐文章于 2024-04-07 16:08:17 发布
最新推荐文章于 2024-04-07 16:08:17 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： promise 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/120769324
版权
1、promise对象值promiseResult

promise对象中的一个属性：[promiseResult]
保存着对象 成功或失败的结果
这个值由resolve和reject函数来操作
在这里插入图片描述

if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              resolve(xhr.response)
            } else {
              reject(xhr.status)
            }
          }

以上代码就是resolve和reject在操作这个promiseResult的值

2、promis的基本流程

在这里插入图片描述

3、promise的使用

1、promise的构造函数：Promise（excutor）{}
在这里插入图片描述
2、Promise.prototype.then：（onResolved，onRejected）{}
在这里插入图片描述
3、Promise.prototype.catch：（onRejected）=>{}
只能指定失败的回调函数
在这里插入图片描述
4、Promise.resolve方法：（value）=>{}
value：成功的数据或promise对象
说明：返回一个成功/失败的promise对象

let promise1=Promise.resolve('成功地执行了promise')
    //如果传入的参数为非promise类型的对象，则返回的结果为成功的promise对象
    console.log(promise1)//打印 成功地执行了promise
    //如果传入的参数为promise对象，则参数的结果决定了resolve的结果
    let promise2=Promise.resolve(new Promise((resolve,reject )=>{
      resolve('成功')
    }))
    console.log(promise2)//打印成功

5、Promise.reject方法：（reason）=>{}
reason：失败的原因
说明：返回一个失败的promise对象

<script>

  $('#send_ajax').click(function(){
    let promise1=Promise.reject('失败地执行了promise')
    //如果传入的参数为非promise类型的对象，则返回的结果为成功的promise对象
    console.log('promise1',promise1)//打印 失败地执行了promise
    //如果传入的参数为promise对象，则参数的结果决定了resolve的结果
    let promise2=Promise.reject(new Promise((resolve,reject )=>{
      reject('失败')
    }))
    console.log('promise2',promise2)//打印成功
    promise1.catch((reason)=>{
      console.log('promise1',reason)
    })
    promise2.catch((reason)=>{
      console.log('promise2',reason)
    })
    let promise3=Promise.reject(new Promise((resolve,reject )=>{
      resolve('成功')
    }))
    console.log('promise3',promise3)//及时传入成功的promise最后也是失败
    promise3.catch((reason)=>{
      console.log('promise3',reason)
    })
  })
</script>

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

  • 如果都成功，则返回的结果是成功的结果值组成的数组
  • 如果有一个失败，则返回的是失败的那个promise的值
<script>

  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      resolve('p1 成功')
    })

    const p2=new Promise((resolve,reject)=>{
      resolve('p2 ok')
    })

    const p3=new Promise((resolve,reject)=>{
      resolve('p3 success')
    })

    const resualt=Promise.all([p1,p2,p3])
    console.log(resualt)

  })
</script>

在这里插入图片描述
如果有一个失败

<script>

  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      resolve('p1 成功')
    })

    const p2=new Promise((resolve,reject)=>{
      reject('p2 失败')
    })

    const p3=new Promise((resolve,reject)=>{
      resolve('p3 success')
    })

    const resualt=Promise.all([p1,p2,p3])
    console.log(resualt)

    p2.catch((err)=>{
      console.log('p2==='+err)
    })
    resualt.catch((err)=>{
      console.log('p**resualt==='+err)
    })

  })
</script>

在这里插入图片描述
如果有一个以上的reject则显示第一个reject的结果，可能是，发现第一个reject了就不再往下计算了

<script>

  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      reject('p1 fail')
    })

    const p2=new Promise((resolve,reject)=>{
      reject('p2 失败')
    })

    const p3=new Promise((resolve,reject)=>{
      resolve('p3 success')
    })

    const resualt=Promise.all([p1,p2,p3])
    console.log(resualt)

    p1.catch((err)=>{
      console.log('p1==='+err)
    })

    p2.catch((err)=>{
      console.log('p2==='+err)
    })
    resualt.catch((err)=>{
      console.log('p**resualt==='+err)
    })

  })
</script>

在这里插入图片描述

7、Promise.race方法：（promises）=>{}
promises是包含n个promise的数组
说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态

<script>

  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      resolve('p1 成功')
    })

    const p2=new Promise((resolve,reject)=>{
      reject('p2 失败')
    })

    const p3=new Promise((resolve,reject)=>{
      resolve('p3 success')
    })

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


  })
</script>

在这里插入图片描述

4、promise的几个关键问题

1、promise的状态如何改变
promise状态是pending
使用resolve改变为fulfilled也就是成功
使用reject改变为reject
使用throw也可以改变为reject

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

3、改变promise状态和指定回调函数谁先谁后
1、都有可能，正常是先指定回调再改变状态，但也有可能先改变状态，再指定回调
2、如何先改状态再指定回调
a，在执行器中直接调用resolve（）/reject（）//resovle里是同步任务这线改变了状态

<script>
  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      resolve('p1 成功')//先改变状态
    })

    p1.then(value=>{ //然后再指定回调
      console.log(value)
    })
  })
</script>

b、延迟更长时间才调用then（）//一般是使用了settimeout等异步操作或者耗时操作

<script>

  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve('成功')
      },1000)
    })

    p1.then(value=>{ //然后再指定回调
      console.log(value)
    })
  })
</script>

3、什么时候才能得到数据（回调函数声明时候执行）
a、如果先指定回调，那么当状态发生改变时，回调函数就会调用，得到数据
b、如果先改变状态，那当指定回调是，回到函数就会调用，得到数据。

4、promise.then（）返回的新promise的结果状态由声明决定
a、由then（）指定的回调函数执行的结果决定
b-1：如果抛出异常，新promise变为rejected，reason为抛出的异常

<script>

  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      throw '出错了'
    })

    const result=p1.then(value=>{ //然后再指定回调
      console.log(value)
    })

    console.log(result)

  })
</script>

在这里插入图片描述

b-2：如果返回的是非promise的任意值，新promise变为resolve，value为返回值

<script>

  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      resolve('成功')
    })

    const result=p1.then(value=>{ //然后再指定回调
      return '返回一个非promise内容'
    })

    console.log(result)//result的值就是then里面返回的结果

  })
</script>

在这里插入图片描述

b-3：如果返回的事另一个新promise，此promise的结果就会变成新promise的结果

<script>

  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      resolve('成功')
    })

    const result=p1.then(value=>{ //然后再指定回调
      return p2=new Promise((resolve,reject)=>{
        resolve('ok')
      })
    })

    console.log(result)//result的值就是then里面返回的结果
    result.then((value)=>{
      console.log('上一个promise返回的值是'+value)
    },()=>{})

  })
</script>

在这里插入图片描述
这位链式调用then（）埋下了伏笔

5、promise如何串联多个操作任务
如果promise的then（）返回一个新的promise，可以进行then（）的链式调用
通过then的链式调用串联起多个同步/异步任务

<script>

  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve('ok')
      },1000)
    })


    p1.then((value)=>{
     return new Promise((resolve,reject)=>{
       resolve('成功')
     })

    })
    .then((value)=>{
      console.log(value)//成功
    })
    .then((value)=>{
      console.log(value)//undefined
    })
  })
</script>

6、promise的异常穿透
1、当使用promise的then链式调用时，可以在最后指定失败的问题
2、前面任何操作除了异常，都会传到最后失败的回调中

<script>

  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve('ok')
      },1000)
    })


    p1.then((value)=>{
     return new Promise((resolve,reject)=>{
       reject('失败')
     })

    })
    .then((value)=>{
      console.log(value)//成功
    })
    .then((value)=>{
      console.log(value)//undefined
    }).catch(err=>{ //也可以使用then
      console.log(err)//失败
    })
  })
</script>

穿透

<script>

  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve('ok')
      },1000)
    })


    p1.then((value)=>{
     return new Promise((resolve,reject)=>{
       resolve('成功')
     })

    })
    .then((value)=>{
      console.log(value)//成功
    })
    .then(()=>{
      throw '失败啦++++'
    })
    .then((value)=>{
      console.log(value)//undefined
    })
      .catch(err=>{ //也可以使用then
      console.log(err)//失败啦++++
    })
  })
</script>

7、中断promise链
1、当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
2、办法(唯一方法)：在回调函数中返回一个pendding状态的promise对象（pending是初始化状态，如果返回的事pending状态，说明状态没有改变，后续的promise状态改变都不起作用）

<script>

  $('#send_ajax').click(function(){
    const p1=new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve('ok')
      },1000)
    })


    p1.then((value)=>{
     return new Promise((resolve,reject)=>{
       resolve('成功')
     })

    })
    .then((value)=>{
      console.log(value)//成功
    })
    .then(()=>{
      console.log('111111')
      return new Promise(()=>{
        //啥也不执行，pending初始状态不改变，因此，后续的promi都不执行
      })
    })
    .then((value)=>{
      console.log(value)//undefined
    })
      .catch(err=>{ //也可以使用then
      console.log(err)//失败啦++++
    })
  })
</script>
心湖中的石子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
promise
Y_zzh202的博客
09-16 715
Promise学习路线： 1：应用： 1) promise 是什么？ 2) 解决了什么问题？ 3) promise中的两大痛点 4) 特点是什么？ 5) 有哪些内容？ 3个特殊属性 6) 原型api有哪些？ 7) 静态api有哪些？ 8) 在什么时候使用？ 2：promise A+ 1) 制定promise的规范。 3：总结
promise专题01-初体验，promise传值到then中，封装文件操作，封装ajax，用一个函数封装promise，util.promisify，promise对象状态改变
weixin_43745804的博客
10-14 822
1、promise初体验 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/jquery.js"></script> <title>Title</title> </head> <body> <button id="awards">抽奖</button&g
2.promise传值
weixin_43939111的博客
01-20 1446
promise的状态可以一直传递下去，但是值只能接收一次，效果如下 new Promise((resolve,reject)=>{ console.log("第一层") resolve("数据a") }).then(suc=>{ console.log(suc)}, //数据a _=>{ console.log("then1") }).then(suc=>{console
Promise详解&Promise.all()的使用
H524268015wsw的博客
08-16 3179
一个Promise对象代表一个在这个 promise 被创建出来时不一定已知值的代理。它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个promise，以便在未来某个时候把值交给使用者。...
promise（7）——使用await获取Promise对象的PromiseResult
木子 旭的博客
03-08 1万+
1.await必须在async定义的方法中使用 let e = await 78910; console.log(e); 2.当await右边为一个PromiseState为fulfilled的Promise对象时，则返回其PromiseResult值 async function main() { let p = new Promise((resolve, reject) => { resolve(156); }); let result = await p; conso
js代码-promise resolve reject
07-16
`resolve` 和 `reject` 是 Promise 构造函数中传入的两个函数，它们用于改变Promise实例的状态。当我们调用 `resolve` 时，Promise的状态会从 pending 变为 fulfilled，而调用 `reject` 时，则会从 pending 变为 ...
es6-promise@4.1.1.zip
06-18
创建Promise通常使用`new Promise()`构造函数，传入一个执行器函数，该函数接收两个参数，分别是`resolve`和`reject`，这两个函数用于改变Promise的状态。 ```javascript const myPromise = new Promise((resolve, ...
promise::lion:逐步建立Promise Class和PromisePromise A +
05-18
1. 只有一个then方法，没有race，all等方法，甚至没有构造函数 Promise标准中仅指定了Promise对象的then方法的行为，其它一切我们常见的方法/函数都并没有指定，包括catch，race，all等常用方法，甚至也没有指定该...
es6中Promise 对象基本功能与用法实例分析
10-15
Promise构造函数接收一个函数作为参数，这个函数接受两个参数，`resolve`和`reject`，它们都是函数，用于改变Promise的状态。当异步操作成功时，调用`resolve`函数，将Promise状态由pending（等待中）变为fulfilled...
ES6之Promise解决回调地狱
01-20
为了解决回调地狱的问题，ES6引入了Promise，这是一个构造函数，用于创建Promise实例，以更优雅地处理异步操作。Promise有三种状态： 1. **Pending**（进行中）：异步任务正在执行。 2. **Fulfilled**（已完成）：...
promise（3）——Promise对象的两个属性：”PromiseState、PromiseResult；两个回调函数参数：resolve、reject；四个方法
木子 旭的博客
03-07 1万+
1.promise状态改变 Promise一共有三种状态： 未决定的：pending 成功：resolved、fulfilled 失败：rejected Promise一共有两种状态变化： （1）从pending变成resolved/fulfilled （2）从pending变成reject Promise有一个属性对应其状态：PromiseState 2.Promise的resolve和reject两个回调函数参数 当new一个Promise对象的时候，该Promise对象的PromiseSta
关于js promise中如何取到[[PromiseResult]]
weixin_45782529的博客
11-04 1万+
1、当返回值validate 为一个Promise对象时 letvalidate=that.selectValidEvent(); console.log( validate); 2、 这种情况下如何获取promise对象的值PromiseResult，话不多说上代码： validate.then((result)=>{ console.log("result",result); } 输出结果： 3、...
Promise对象中[[PromiseResult]]的取值
AdamShyly的博客
10-23 1万+
我在axios中return参数的时候在另一个JS中接收到了一个promise对象，为了获取其中的[[PromiseResult]]的内容，可使用then()函数。 示例如下： 通过传入箭头函数作为参数，即可在res变量接收到[[PromiseResult]]的值。 ...
Promise.then函数返回值类型与参数传递
weixin_41728198的博客
12-08 1万+
JavaScript语言没有类型，我更喜欢使用TypeScript，它本质上也是运行JavaScript的代码。 在TypeScript中使用Promise的时候，Promise.then()函数的返回值类型有时需要考虑。 我们都知道，Promise.then和Promise.catch这两个函数都是可以链式调用的，说明他们返回的类型也是一个Promise类型的对象。每一个then或catch...
Promise笔记
dihuaooo的博客
04-04 769
Promise笔记
JS Promise实例 then()方法
cxu123321的博客
03-30 2094
JS Promise实例 then()方法 JS Promise实例 then()方法 内容已更新，可百度搜索: EC前端 Promise.then() 描述： then()方法用于指定当前实例状态发生改变时的回调函数。它返回一个新的Promise实例。 语法： Promise.prototype.then(onFulfilled, onRejected); 参数： 参数 描...
js promise中如何取到[[PromiseResult]]
最新发布
2401_83036723的博客
04-07 2316
用了async声明方法为异步那个方法 that.selectValidEvent();返回的就是promise对象，promise对象的值PromiseResult获取只能通过 .then() 方法获取。
promise获取[[PromiseResult]]数据
热门推荐
OnTheway
04-26 2万+
问题描述 promise catch中获取相应的数据（或许别人的catch中不需要获取数据 但是我需要QAQ） js中获取 promise [[PromiseResult]] 数据 promise catch 中获取响应内容 异步请求错误情况下获取相应数据 实验情况 请求成功走then这个路线 数据直接就是回调函数的参数，但是异常或者失败后走catch路线参数却不是相应的内容。 在使用umi-request 请求后得到的一个400响应，虽然400了但是还是想拿到返回的数据，catch是ca.
深入理解JavaScript Promise：迷你书中文版
1. 创建Promise - 通常通过`new Promise`构造函数来创建，传入一个执行器函数，该函数接受两个参数，即resolve和reject，用于改变Promise的状态。 2. 编写Promise代码 - 在执行器函数内部，我们可以进行异步操作，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值