es6的Promise详解

最新推荐文章于 2023-04-24 21:34:06 发布
最新推荐文章于 2023-04-24 21:34:06 发布
阅读量295 收藏 1
点赞数
文章标签： javascript Promise 异步 回调地狱
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46430338/article/details/120559083
版权

Promise

Promise的含义

Promise是异步编程的一种解决方案，比以前传统的异步操作就是回调函数和事件更强大，使用起来更简便，并且避免了回调地狱的问题（回调地狱就是指多层回调函数嵌套）

Promise是es6新增的引用类型，是一个构造函数，通过和关键字new一起使用来创建Promise实例，需要传递一个执行器函数（这个执行器函数是同步执行的），执行器函数有两个参数且都是函数，这两个参数是js提供的不需要我们手动创建

const p = new Promise((resolve,reject) => {
  console.log('我是一个Promise实例')
})
console.log(p)
// 
我是一个Promise实例
Promise { <pending> }  这里为什么是pending后面会讲到
Promise的三种状态
  • 三种状态：
    • 待定（初始）状态：pending；
    • 成功（解决）状态：fulfilled；
    • 失败（拒绝）状态：rejected
  • 状态转换
    • 两种转换：pending ----> fulfilled；pending -----> rejected；有且仅有这两中转换，并且状态一经变化之后就不会在变了
    • 如何转换：通过new Promise初始化时执行器函数的两个参数函数 resolve（pending ----> fulfilled），reject（pending -----> rejected）；还可以通过静态方法Promise.resolve和Promise.reject来实现状态转换，下面会讲到这两中静态方法；再回到上面那个问题为什么是pending，因为在初始化实例的时候并没有执行resolve和reject这两个当中的任意一个，所以还是处于pending状态

new Promise 转换状态

let p = new Promise((resolve,reject) => {
  resolve('成功')
})
console.log(p)
p = new Promise((resolve,reject) => {
  reject('拒绝')
})
console.log(p)
// 
Promise { '成功' }  // 如果是成功状态则不会在结果里面标出 fulfilled
Promise { <rejected> '拒绝' }
// 下面是 reject 报错
(node:20111) UnhandledPromiseRejectionWarning: 拒绝
(Use `node --trace-warnings ...` to show where the warning was created) ....

静态方法 状态转换 pending —> rejected

let p = new Promise((resolve, reject) => {
})
console.log(p)
p = Promise.reject('fail')
console.log(p)
//
Promise { <pending> }
Promise { <rejected> 'fail' }

pending -----> fulfilled

let p = new Promise((resolve, reject) => {
})
console.log(p)
p = Promise.resolve('fail')
console.log(p)
//
Promise { <pending> }
Promise { 'success' }

状态一经变化后就不会在变了

p = new Promise((resolve, reject) => {
  resolve('success')
  reject('fail')
})
console.log(p)
// 
Promise {'success'}
Promise实例方法

  • Promise.prototype.then

    • 用于给Promise实例添加状态改变时回调函数
    • 最多有两个参数，第一个参数：onResolved处理程序（处理fulfilled状态的回调函数），第二个参数：onRejected处理程序（处理rejected状态的回调函数），由于只能转换一次，所以这两个处理程序是互斥的，只能执行一个
    let fulfilled = new Promise((resolve, reject) => {
  resolve('success')
})
let rejected = new Promise((resolve, reject) => {
  reject('fail')
})
fulfilled.then(res => console.log('res',res), err => console.log('err',err))
rejected.then(res => console.log('res',res), err => console.log('err',err))
// 
res success
err fail
    • 只需要一个参数的写法
    fulfilled.then((res) => console.log('res',res)) // // res success
rejected.then(null, (err)=> console.log('err',err)) // err fail
    • 函数返回值

    函数返回值是一个Promise实例，但是其状态与他的调用者的状态无关，与then方法的 onResolved处理程序，onRejected处理程序的返回值有关，如果处理程序返回普通值、错误对象和 fulfilled 状态实例就会被Promise.resolve包裹成一个 fulfilled 状态的实例，如果返回的是一个 rejected 实例或抛出异常则返回的是一个 rejected 实例

    处理程序返回普通值、错误对象和 fulfilled 状态实例

    处理程序返回 fulfilled 状态实例其实和普通值一样，只不过就是普通值还需要被包裹成一个 fulfilled 状态实例才能调用下一个then

    //  返回一个 fulfilled 状态实例
const resolved = Promise.resolve('resolved')
const p1 = resolved.then(() => Promise.resolve('yes'))
setTimeout(console.log, 0, 'p1',p1) // p1 Promise { 'yes' }

// 返回一个错误对象，会被包裹成一个 fulfilled 状态实例
const p3 = resolved.then(res => Error('error'))
setTimeout(console.log, 0, 'p3',p3)
//p3 Promise {
//   Error: error
//       at /Users/dingjie/practise/js红宝书/Promise/04实例方法then.js:14:33
// }

// 返回普通值
const p5 = resolved.then(() => 'success')
setTimeout(console.log, 0, p5) // Promise { 'success'}

    注意：这里为什么不直接使用 console.log而是使用定时器可以参考这篇文章：js执行机制

    处理程序返回 rejected 状态实例 或 抛出异常

    //  返回一个  rejected 状态实例
const rejected = Promise.reject('rejected')
const p2 = rejected.then(undefined, () => Promise.reject('no'))
setTimeout(console.log, 0, 'p2',p2) // p2 Promise { <rejected> 'no' }

//  抛出一个异常，则返回一个  rejected 状态实例
const p4 = resolved.then(res => {throw 'error'})
setTimeout(console.log, 0, 'p4',p4) // p4 Promise { <rejected> 'error' }
    • 链式调用

    处理程序返回一个普通值会自动包裹成一个 fulfilled 状态实例，自动调用下一个 then，并且将这个普通值作为实参传递给下一个then方法的onResolved处理程序

    返回一个fulfilled 状态实例，自动调用下一个then，并且这个实例的值作为实参传递给下一个then方法的onResolved处理程序

    const p = new Promise((resolve,reject) => {
  resolve('fulfilled')
})
p.then(res => res)
.then((res => 'status：' + res ),(err => console.log('err',err)))
.then(res => console.log('res',res))
// 
res status：fulfilled

  • Promise.prototype.catch

    • 只接受一个参数，onRejected处理程序用于处理rejected状态的回调函数
    const rejected = Promise.reject('rejected')
rejected.catch(res => console.log('res',res))
//
res rejected
    • 返回值

    返回值：受 onRejected处理程序的返回值影响

    const res = Promise.reject()
// 返回普通值
const p1 = res.catch(() => '普通值')
setTimeout(console.log, 0, p1) // Promise { '普通值' }
// 返回 fulfilled 状态实例
const p2 = res.catch(() => Promise.resolve())
setTimeout(console.log, 0, p2) // Promise { undefined }

// 返回 rejected 状态实例
const p3 = res.catch(() => Promise.reject())
setTimeout(console.log, 0, p3) // Promise { <rejected> undefined }

// 抛出错误
const p4 = res.catch(() => {throw  'error'})
setTimeout(console.log, 0, p4) // Promise { <rejected> 'error' }

  • Promise.prototype.finally

    • finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。常用来做清理操作，或者用来执行 fulfilled 状态和rejected 状态都会执行的操作；它不接受任何参数
    let p = new Promise((resolve,reject)=> {
  resolve(10)
})

p.then(res=>console.log('resolve',res))
    .catch(res => console.log('reject',res))
    .finally(() => console.log('finally'))

//
//resolve 10
//finally


p = Promise.reject('100')

p.then(res=>console.log('resolve',res))
    .catch(res => console.log('reject',res))
    .finally(() => console.log('finally'))

// 
//reject 100
//finally
    • 返回值：始终返回原来的值（也可以理解为始终接受来自父（实例对象）的传递），除了这三种情况：返回一个 rejected 状态实例，抛出错误或异常，返回一个 pending 状态实例
    const p1 = Promise.resolve(10).finally(() => 1000)
const p2 = Promise.resolve(10).finally(() => '10')
const p3 = Promise.resolve(10).finally(() => undefined)
const p4 = Promise.resolve(10).finally(() => null)
const p5 = Promise.resolve(10).finally(() => Promise.resolve(1000))
const p6 = Promise.resolve(10).finally(() => false)
const p7 = Promise.resolve(10).finally(() => Error('erroe'))

setTimeout(console.log, 0 , 'p1',p1)
setTimeout(console.log, 0 , 'p2',p2)
setTimeout(console.log, 0 , 'p3',p3)
setTimeout(console.log, 0 , 'p4',p4)
setTimeout(console.log, 0 , 'p5',p5)
setTimeout(console.log, 0 , 'p6',p6)
setTimeout(console.log, 0 , 'p7',p7)

// 
/**
p1 Promise { 10 }
p2 Promise { 10 }
p3 Promise { 10 }
p4 Promise { 10 }
p5 Promise { 10 }
p6 Promise { 10 }
p7 Promise { 10 }
*/

const p8 = Promise.resolve(10).finally(() => Promise.reject('error'))
const p9 = Promise.resolve(10).finally(() => {throw 'error'})
const p10 = Promise.resolve(10).finally(() => new Promise((resolve,reject) => {}))

setTimeout(console.log, 0 , 'p8',p8) // p8 Promise { <rejected> 'error' }
setTimeout(console.log, 0, 'p9',p9) // p9 Promise { <rejected> 'error' }
setTimeout(console.log, 0, 'p10',p10) // p10 Promise { <pending> }
Promise静态方法

  • Promise.resolve

    • 将一个值变成一个 fulfilled 状态的实例

    • 有一个参数，可选

      • 参数是一个Promise实例：原封不动的返回，可以理解为浅拷贝
      const p = Promise.resolve(10)
const f = Promise.reject('error')
let fulfilled = Promise.resolve(p)
console.log('fulfilled',fulfilled, fulfilled === p) // fulfilled Promise { 10 } true
fulfilled=Promise.resolve(f)
console.log('fulfilled',fulfilled, fulfilled === f) // fulfilled Promise { <rejected> 'error' } true
      • 参数是一个普通值：Promise.resolve将这个普通值包成一个 fulfilled 状态实例
      let p = Promise.resolve('10')
console.log(p) // Promise { '10' }
 p = Promise.resolve(10)
console.log(p)  // Promise { 10 }
      • 无参数：将 undefined 包成一个 fulfilled 状态实例
      console.log(Promise.resolve()) // Promise { undefined }
      • 参数是一个thenable对象：thenable是指具有 then方法的对象；将这个 thenable对象转换成Promise对象，并且会立即调用这个 then 方法，所以此时这个Promise对象的状态就由 then 方法说了算，先调用 resolve 那么就是 fulfilled 状态实例，先调用 reject 那么就是 fulfilled 状态实例，哪个都不调用就是 pending 状态实例
      let thenable = {
  then(resolve,reject) {
    console.log('这是 thenable的then方法')
    resolve('success')
  }
}
let p = Promise.resolve(thenable)
setTimeout(console.log, 0, p)

//
这是 thenable的then方法
Promise { 'success' }

  • Promise.reject

    • 将一个值变成一个 rejected 状态的实例

      • 参数是一个Promise实例：将这个 Promise 实例包裹成一个 rejected 状态实例
      const r = Promise.reject('error')
const f = Promise.resolve('success')
console.log(Promise.reject(r))
console.log(Promise.reject(f))
//
Promise { <rejected> Promise { <rejected> 'error' } }
Promise { <rejected> Promise { 'success' } }
      • 参数是一个普通值：Promise.reject将这个普通值包成一个 rejected 状态实例
      console.log(Promise.reject('10'))
console.log(Promise.reject(10))
//
Promise { <rejected> '10' }
Promise { <rejected> 10 }
      • 无参数：将 undefined 包成一个 rejected 状态实例
      console.log(Promise.reject())
Promise { <rejected> undefined }
      • 参数是一个thenable对象，同 Promise.resolve

  • Promise.all

Promise.all将一组Promise实例（注意：Promise.all()方法接受一个数组作为参数，数组里面每一项都应该是 Promise实例，如果不是则会自动转换成 Promise实例，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。）包装成一个新的实例，待这一组Promise实例对象状态全部变成 fulfilled 状态，就会返回一个新的 fulfilled 状态实例，这个新的 fulfilled 状态实例存放了这一组Promise实例的结果；

let p1 = Promise.resolve(1)
let p2 = Promise.resolve(10)
let p3 = Promise.resolve(100)
let results = Promise.all([p1,p2,p3])
setTimeout(console.log,0, results)
//
Promise { [ 1, 10, 100 ] }

如果其中有任意一个 rejected 时立即结束，并返回这个 rejected 状态实例

适合彼此相互依赖或者在其中任何一个reject时立即结束。

p1 = Promise.reject('error')
 results = Promise.all([p1,p2,p3])
setTimeout(console.log,0, results)
//
Promise { <rejected> 'error' }

注意，如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法，而是调用自己的 catch 方法

p1 = new Promise((resolve, reject) => {
  resolve('resolve')
}).then(res =>
    res
).catch(err => err)

p2 = new Promise((resolve, reject) => {
  reject('reject')
})
    .then(res => res)
    .catch(err => err)
result = Promise.all([p1, p2]).then(res => console.log('res-result', res)).catch(err => console.log('err-result', err))
//
res-result [ 'resolve', 'reject' ]

注意，由于p2调用来自己的 catch 方法，所以最后 p2也会变成 fulfilled 状态实例，所以Promise.all()方法参数里面的两个实例都会fulfilled，因此会调用then方法指定的回调函数，而不会调用catch方法指定的回调函数。

  • Promise.race

将多个Promise实例包装成一个Promise实例，只要其中一个状态改变了(不论是rejected还是fulfilled)，那么这个方法就会返回这个状态改变的Promise实例

const p1 = new Promise((resolve,reject) => {
  setTimeout(() => resolve('success'), 1000)
})
const p2 = new Promise((resolve,reject) => {
  setTimeout(() => reject('error'), 0)
})
const result = Promise.race([p1,p2])
setTimeout(console.log, 1500, 'result',result) // result Promise { <rejected> 'error' }

注意：如果Promise.race的参数是一个空数组，那么最后返回的结果是一个 pending 实例

const res = Promise.race([])
setTimeout(console.log, 0, 'res',res) // res Promise { <pending> }
  • Promise.allSettled

Promise.allSettled()方法接受一个数组作为参数，数组的每个成员都是一个 Promise 对象，并返回一个新的 Promise 对象。只有等到参数数组的所有 Promise 对象都发生状态变更（不管是fulfilled还是rejected），返回的 Promise 对象才会发生状态变更。

当有多个彼此不依赖的异步任务成功完成时，或者总是想知道每个promise的结果时，通常使用它。

const p1 = Promise.resolve('resolve')
const p2 = Promise.resolve('reject')

let result = Promise.allSettled([p1,p2])
setTimeout(console.log, 0, result)
//
Promise {
  [
    { status: 'fulfilled', value: 'resolve' },
    { status: 'fulfilled', value: 'reject' }
  ]
}

这个方法就返回一个新的Promise实例，并且这个实例附带了这一组Promise实例的结果，并带有一个对象数组，每个对象表示对应的promise结果。

  • Promise.any（待补充）
花满樱❀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6——Promise
Honey的博客
11-29 226
promise是异步编程的新的解决方案（ ES6 规范），它是一个构造函数。可以实例化对象，封装异步操作，获取成功和失败的结果。优点：支持链式调用，可以解决地狱回调问题，执行的方式更为灵活。promise初体验——抽奖。
ES6 Promise详解
m0_56069948的博客
08-19 582
本文主要是对Promise本身的用法做一个全面解析而非它的原理实现，如果你对Promise的用法还不是很熟悉或者想加深你对Promise的理解，我相信这篇文章一定会帮到你。首先让我们先了解一下JavaScript为什么会引入PromisePromise是现代异步编程的基础,在Promise返回给我们的时候操作其实还没有完成，但Promise对象可以让我们操作最终完成时对其进行处理，无论成功还是失败。
ES6 Promise
weixin_33885253的博客
12-29 109
1、概述 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的...
ES6-Promise
Maha
09-23 786
ES6-Promise
ES6-promise
weixin_34018202的博客
06-07 299
异步编程简述： 无论是在浏览器环境中还是在node环境中，我们都会使用JavaScript 完成各种异步操作，如在浏览器环境中的定时器、事件、ajax等或是node环 境中的文件读取、事件等。伴随着异步编程的就是回调机制（复习jQuery）。 明确一点异步编程避免不了回调。 let obj = {}; let fs = require('fs'); fs.readFile('./dat...
es6---Promise
muzidigbig的博客
10-20 4899
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大 回调函数 回调地狱 Promise.then()参数 Promise.all() Promise.allSettled() Promise.race() Promise.any() Promise.withPesolvers() Promise链中断方法 async/await Promise 高级用途的技巧
ES6的Promise详解
程序员柒的博客
11-08 5747
本篇文章主要介绍了ES6语法中的Promise对象的使用详解,promise对象是JS进阶学习中的重要知识点，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力，先赞后看养成习惯。以下是本篇文章正文内容。
详解ES6 Promise的生命周期和创建
10-16
**ES6 Promise** 是JavaScript中处理异步操作的重要机制，它的出现解决了回调地狱的问题，使得异步编程更加清晰和易于管理。Promise的中文意为“承诺”，代表着将来某个时刻会发生的事件结果。在编程中，Promise是...
详解ES6 Promise对象then方法链式调用
10-17
ES6中的Promise是一个用于处理异步操作的对象。它允许我们以同步的方式编写异步代码，使得代码更加简洁、易读，也易于维护。ES6的Promise对象有一个非常重要的方法：then()，这个方法是Promise对象处理异步操作的...
【Es6中的promise】
YcintaL0203的博客
08-03 203
文章简单的介绍了es6中的promise是什么，用什么作用，怎么使用的以及它的三种状态，和它的all和race的方法，最后简单的概括了Promise与async/await有什么区别提示：以下是本篇文章正文内容，下面案例可供参考。...
es6 promise
weixin_40918145的博客
12-16 259
在 JavaScript 中，所有代码都是单线程的，也就是同步执行的。而 Promise 就为异步 1 基本概念 名称： 译为“承诺”，这也就表达了将来会执行的操作，代表异步操作； 状态： 一共有三种状态，分别为pending（进行中）、fulfilled（已成功）和rejected（已失败）。 特点： (1)只有异步操作可以决定当前处于的状态，并且任何其他操作无法改变这个状态； (2)一旦状态改变，就不会在变。状态改变的过程只可能是：从pending变为fulfilled和从pending
es6 Promise
alonia的博客
12-17 92
1. promise 对象是一个构造函数，用来生成promise实例 var promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } }); Promise实例生成以后，可以用then方法分别指定...
ES6新技术——promise
rain19982016的博客
03-06 491
ES6新技术——promise实现异步编程
es6-Promise
boss2967的博客
01-25 784
1.Promise对象的简单介绍 function want() { console.log('这是你想要执行的代码'); } function fn(want) { console.log('这里表示执行了一大堆各种代码'); // 返回Promise对象 return new Promise(function(resolve, reject) { ...
ES6之Promise
Zerone_1的博客
01-12 270
简单介绍Promise用法和案例
Es6之promise
最新发布
zhqi9277的博客
04-24 160
首先，js是一门单线程语言，所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。如果一个任务耗时过长，那么后面的任务就必须一直等待下去，会拖延整个程序，常见浏览器无反应，可能就是一段代码死循环，造成程序卡住在这个位置，无法继续。因此，js为了解决这个问题就出现了同步和异步概念。简单来说，"同步模式"就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；
ES6中的Promise
weixin_45662100的博客
05-16 92
ES6 Promise 定义：是异步编程的一种解决方案。 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise 的状态特点： 1.Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。 2.除了异步操作的结果，任何其他操作都无法改变这个状态。 3.Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和
ES6 Promise详解：状态与方法深度解析
本文将深入解析ES6中的Promise用法，带你了解Promise这一强大的异步编程工具。Promise是JavaScript在处理异步操作时引入的一种解决方案，旨在提高代码的可读性和组织性，避免回调地狱的问题。Promise有三种核心状态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值