promise的两个特征（Promise对象理解方法汇总）

Promise 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，下面我们就来聊聊关于promise的两个特征?接下来我们就一起去了解一下吧!

promise的两个特征

简介

Promise 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果

从语法上说， Promise 是一个对象，从中可以获取异步操作的消息

Promise 对象共有3种状态：

• Pending ：进行中
• Resolved ：又称 Fulfilled ，已完成
• Rejected ：已失败

状态的改变只有两种可能：从 Pending 变为 Resolved 、从 Pending 变为 Rejected

Promise 对象主要有如下几个特点：

• 对象的状态不受外界影响：只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
• 一旦状态改变，就不会再变，任何时候都可以得到这个结果
• 无法取消 Promise ，一旦新建它就会立即执行，无法中途取消
• 如果不设置回调函数， Promise 内部抛出的错误，不会反应到外部
• 当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

基本用法

// 创建Promise示例 var promise = new Promise((resolve, reject) => { // ... if (/* 异步操作成功 */) { resolve(value) } else { reject(error) } }) // 指定Resolved状态和Reject状态的回调函数 promise.then(value => { // success }, error => { // failure })

• resolve 函数：将 Promise 对象的状态从 Pending 变成 Resolved 。在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
• reject 函数：将 Promise 对象的状态从 Pending 变成 Rejected 。在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去
• then 方法：接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 Resolved 时调用，第二个回调函数(可选，不一定要提供)是 Promise 对象的状态变为 Rejected 时调用

// 异步加载图片 function loadImageAsync(url) { return new Promise((resolve, reject) => { var image = new Image() image.onload = () => { resolve(image) } image.onerror = () => { reject(new Error('Could not load image at' url)) } image.src = url }) } // Ajax操作 function getJson(url) { return new Promise((resolve, reject) => { var client = new XMLHttpRequest() client.open('GET', url) client.onreadystatechange = handler client.responseType = 'json' client.setRequestHeader('Accept', 'application/json') client.send() function handler() { if (this.readState !== 4) { return } if (this.status === 200) { resolve(this.response) } else { reject(new Error(this.statusText)) } } }) } getJson('posts.json').then(json => { console.log('Contents: ' json) }, error => { console.error('出错了', error) })

Promise.prototype.then()

then 方法是定义在原型对象 Promise.prototype 上的

为 Promise 实例添加状态改变时的回调函数

第一个参数是 Resolved 状态的回调函数

第二个参数（可选）是 Rejected 状态的回调函数

then 方法返回的是一个新的 Promise 实例

采用链式的 then ，可以指定一组按照次序调用的回调函数

如果前一个回调函数返回的还是一个 Promise 对象（即有异步操作），这时后一个回调函数，就会等待该 Promise 对象的状态发生变化

getJson('post/1.json') .then(post => getJson(post.commentUrl)) .then( comments => console.log('Resolved: ', comments), err => console.error('Rejected: ', err) )

Promise.prototype.catch()

Promise.prototype.catch 方法是 .then(null, rejection) 的别名，用于指定发生错误时的回调函数

Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个 catch 语句捕获

一般来说，不要在 then 方法里面定义 Rejected 状态的回调函数（即 then 的第二个参数），总是使用 catch 方法

catch 方法返回的还是一个 Promise 对象，因此后面还可以接着调用 then 方法

getJson('/posts.json').then(posts => { // ... }).catch(error => { // 处理 getJson 和 前一个回调函数运行时发生的错误 console.error('发生错误！', error) }) // bad promise.then(data => { // success }, err => { // error }) // good // 可以捕获前面 then 方法执行中的错误 // 也更接近同步的写法（try/catch） // 建议总是使用 catch 方法，而不使用 then 方法的第二个参数 promise.then(data => { // success }).catch(err => { // error })

Promise.prototype.finally()

finally 方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。

该方法是 ES2018 引入标准的

promise .then(res => console.log(res)) .catch(err => console.error(err)) .finally(() => { console.log('finally的执行与状态无关') })

Promise.resolve()

将现有对象转为 Promise 对象

Promise.resolve('foo') // 等价于 new Promise(resolve => resolve('foo'))

参数是一个Promise实例

Promise.resolve 将不做任何修改、原封不动地返回这个实例

参数是一个thenable对象

Promise.resolve 方法会将这个对象转为 Promise 对象，然后就立即执行 thenable 对象的 then 方法

const thenable = { then: function(resolve, reject) { resolve(42) } } const p1 = Promise.resolve(thenable) p1.then(function(value) { console.log(value) // 42 }) // thenable 对象的 then 方法执行后，对象 p1 的状态就变为 resolved // 从而立即执行最后那个 then 方法指定的回调函数，输出42

参数不是具有then方法的对象，或根本就不是对象

参数是一个原始值，或者是一个不具有 then 方法的对象，则 Promise.resolve 方法返回一个新的 Promise 对象，状态为 Resolved

const p = Promise.resolve('Hello') p.then(function (s){ console.log(s) // Hello }) // 由于字符串 Hello 不属于异步操作（判断方法是它不是具有then方法的对象） // 返回 Promise 实例的状态从一生成就是 Resolved // 所以回调函数会立即执行

不带有任何参数

直接返回一个 Resolved 状态的 Promise 对象

Promise.reject()

返回一个新的 Promise 实例，该实例的状态为 rejected

let p = Promise.reject('出错了') // 等同于 let p = new Promise((resolve, reject) => reject('出错了')) p.then(null, s => { console.log(s) // 出错了 }) // 生成一个 Promise 对象的实例 p，状态为 rejected // 回调函数会立即执行

Promise.all()

Promise.all(iterable) 方法返回一个 Promise 实例

iterable 参数是一个可迭代的对象，如 Array 或者 String

在 iterable 参数内所有的 promise 都 resolved 或参数中不包含 promise 时回调完成（resolve）

Promise.all 返回的 promise 的完成状态的结果是一个数组，它包含所有的传入迭代参数对象的值（也包括非 promise 值）

如果参数中 promise 只要有一个 rejected，此实例回调失败（ reject ）。而不管其它 promise 是否完成

失败原因的是第一个失败 promise 的结果

// Promise.all()的一个简版实现。模拟实现 function all(iterable) { return new Promise((resolve, reject) => { let index = 0 let elementCount = 0 let anErrorOccurred = false const result = new Array(iterable.length) for (const promise of iterable) { // Capture the current value of 'index' const currentIndex = index; promise.then(value => { if (anErrorOccurred) return result[currentIndex] = value elementCount if (elementCount == result.length) { resolve(result) } }, err => { if (anErrorOccurred) return anErrorOccurred = true reject(err) }) index } if (index === 0) { resolve([]) return } }) }

// 使用示例 Promise.all([getJson('/posts.json'), getJson('/post/1.json')]).then(values => { // posts.json 和 post/1.json 都请求回来后，进入到这里 // 请求回来的数据存储在 values 里面，顺序跟请求的一样 [ posts.json的结果, post/1.json的结果 ] console.log(values) }).catch(err => { console.error(err) })

Promise.race()

race是赛跑的意思

Promise.race(iterable) 方法返回一个 promise

一旦迭代器中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝

// Promise.race() 的一个简版实现。模拟实现 function race(iterable) { return new Promise((resolve, reject) => { let settlementOccurred = false for (const promise of iterable) { promise.then(value => { if (settlementOccurred) return settlementOccurred = true resolve(value) }, err => { if (settlementOccurred) return settlementOccurred = true reject(err) }) } }) }

// 使用示例 Promise.race([getJson('/posts.json'), getJson('/post/1.json')]).then(value => { // posts.json 和 post/1.json 只要有一个返回了，就进入到这里 // 请求回来的数据存储在 value 里面，是首先返回的那个数据 // 有可能是 posts.json的结果，也有可能是 post/1.json的结果 console.log(value) }).catch(err => { // 在没有返回的时候 先报错了 console.error(err) })

Promise.allSettled()

Promise.allSettled() 方法返回一个 promise

该 promise 在所有给定的 promise 已被解析或被拒绝后解析

并且每个对象都描述每个 promise 的结果

该方法是 ES2020 引入标准的。使用的时候需要在代码中先查看是否已有

// Promise.allSettled() 的简化实现。模拟实现 function allSettled(iterable) { return new Promise((resolve, reject) => { function addElementToResult(i, elem) { result[i] = elem elementCount if (elementCount === result.length) { resolve(result) } } let index = 0 let elementCount = 0 const result = new Array(iterable.length) for(const promise of iterable) { // Capture the current value of 'index' const currentIndex = index promise.then(value => { addElementToResult(currentIndex, { status: 'fulfilled', value }) }, reason => { addElementToResult(currentIndex, { status: 'rejected', reason }) }) index } if (index === 0) { resolve([]) return } }) }

// 使用示例 // 首先需要实现一个allSettled if (typeof Promise.allSettled !== 'function') { Promise.allSettled = function(promises) { return new Promise((resolve, reject) => { if (!Array.isArray(promises)) { return reject(new TypeError('arguments must be an array')) } let counter = 0 const len = promises.length const result = new Array(len) promises.forEach((promise, index) => { promise.then(value => { addElementToResult(index, { status: 'fulfilled', value }) }, reason => { addElementToResult(index, { status: 'rejected', reason }) }) }) function addElementToResult(i, elem) { result[i] = elem counter if (counter === len) { resolve(result) } } }) } } Promise.allSettled([getJson('/posts.json'), getJson('/post/1.json')]).then(values => { // posts.json 和 post/1.json 都请求回来后，进入到这里 // 请求回来的数据存储在 values 里面，顺序跟请求的一样 [ posts.json的结果, post/1.json的结果 ] console.log(values) })

异常捕获相关

语法错误

const func1 = () => { return new Promise((resolve, reject) => { // reject('this is error') // try { aa resolve(1) // } catch(err) { // console.log(err) // reject(err) // } }).catch(err => { // aa会报语法性错误，这里可以捕捉到； // 捕捉到错误后，通过 return 往后传 console.log(1, err) return Promise.reject(err) }) } // 这里会打印出来错误信息 ReferenceError: aa is not defined func1().then(res => { console.log(res) }).catch(err => { console.log(err) })

内部使用 try/catch

const func2 = () => { return new Promise(async (resolve, reject) => { // 使用 try catch 的方式，捕捉promise的reject，然后往后传 try { const res = await func1() resolve(res ' --- 2') } catch(err) { console.log(err, '----') reject(err) } }) // .catch(err => { // // 这里的 catch 是捕捉不到错误的 // // await func1() 返回的是reject，只是不执行后面的语句而已，不会报错 // // 如果想捕捉错误往后传，可以像上面几行代码那样，使用 try catch 捕捉 // console.log(2, err) // return Promise.reject(err) // }) } func2().then(res => { console.log(res) }).catch(err => { console.log('执行-', err) })

,