ES6: Promise对象的基础

Promise进阶指南

最新推荐文章于 2021-07-22 20:28:08 发布

原创最新推荐文章于 2021-07-22 20:28:08 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ES6 #Promise

ES6 专栏收录该内容

1 篇文章

订阅专栏

深入探讨Promise对象的三种状态：pending、resolved和rejected，以及如何通过then、catch和finally方法处理这些状态。文章还介绍了Promise构造函数方法如all、race、resolve和reject的使用场景和注意事项。

Promise返回的只有二种状态要么已解决rejected，要么已拒绝rejected

内置属性

[[PromiseStatus]]

Promise 的当前状态
有三种状态[“pending”, “resolved”, “rejected”]
初始状态是"pending"
状态由调用的resolve,reject 回调函数, throw语句抛出，程序异常来决定状态的变化, 只会变化成[‘resolved’, ‘rejected’]
最后的状态如果没有异常或者异常被处理就必定是“resolved”
如果异常没有被处理捕获，状态就是"rejectd" 并抛出异常
Promise无法捕获异步的异常

[[PromiseValue]]:

promise的当前的状态值
初始值undefined
状态值由resolve, reject回调函数, throw语句, 程序异常决定
只要状态值被then或者catch处理过后就重新为undefined
then,catch的回调函数有返回值或有异常的话就是新的状态值

构造函数方法

Promise.all()
Promise.race()
Promise.resolve()
Promise.reject()

构造函数原型方法

Promise.prototype.then
Promise.prototype.catch
Promise.prototype.finally

一、初始状态（pending）

const promise1 = new Promise((resolve, reject) => {})
// [[PromiseStatus]]: "pending"
// [[PromiseValue]]: "undefined"
console.log(promise1) 

const promise2 = new Promise((resolve, reject) => 'resolvedValue')
// [[PromiseStatus]]: "pending"
// [[PromiseValue]]: "undefined"
// Promise构造函数不接收执行函数的返回值，总是返回一个新的Promise对象
console.log(promise2)

二、两种状态（resolved, rejected）

// 1. resolved状态
const promise1 = new Promise((resolve, reject) => {
	resolve('success1')
	resolve('success2') // 多次执行状态值改变无效
	reject('success2') // 执行状态改变无效
})
// [[PromiseStatus]]: "resolved"
// [[PromiseValue]]: "success1"
console.log(promise1)

// 2.1. rejected状态
const promise2 = new Promise((resolve, reject) => {
	reject('failed1')
	reject('failed2') // 多次执行状态值改变无效
	resolve('success2') // 执行状态改变无效
})
// [[PromiseStatus]]: "rejected"
// [[PromiseValue]]: "failed"
// 同时控制台报出错误, 并没有处理异常
console.log(promise2)

// 2.2. rejected状态
const promise3 = new Promise((resolve, reject) => {
	throw 'error' // 主动抛出异常
})
// [[PromiseStatus]]: "rejected"
// [[PromiseValue]]: "error"
// 同时控制台报出错误, 并没有处理异常
console.log(promise3)

// 2.3. rejected状态
const promise4 = new Promise((resolve, reject) => {
	rejected // 程序异常, rejected变量并未声明
})
// [[PromiseStatus]]: "rejected"
// [[PromiseValue]]: "ReferenceError: rejected is not defined"
// 同时控制台报出错误, 并没有处理异常
console.log(promise4)

三、实例方法（then, catch, finally）

then(onFulfilled, onRejected)

返回promise对象, 可链式调用，处理resolved或rejected的状态回调
then回调方法可返回值或返回新的promise对象
如果是返回的新的promise对象，就丢弃当前状态与promise对象

如果rejected被处理过后, then方法不论链式调用多少次都会执行除非当前状态是rejected，

// 状态"resolveed"
const promise = new Promise((resolve, reject) => resolve('success'))
// then promise (resolved, rejected)的状态值接收方法
promise
  // [[PromiseStatus]]: "resolved"
  // [[PromiseValue]]: "success"
  .then(value => {
	// 打印"success"
	console.log(value)
  })
  // [[PromiseStatus]]: "resolved"
  // [[PromiseValue]]: undefined
  .then(value => {
    // 打印undefined
    console.log(value)
    return 'success2' // 返回值给下一个then接收使用
  })
  // [[PromiseStatus]]: "resolved"
  // [[PromiseValue]]: "success2"
  .then(value => {
    // 打印success2
    console.log(value)
  })

then(onFulfilled, onRejected)

rejected状态如果被处理过, promise的状态会重新为resolved值为返回值

// 状态"rejected"
const promise = new Promise((resolve, reject) => reject('failed'))
// then promise (resolved, rejected)的状态值接收方法
// 返回promise对象, 可链式调用
promise
  // [[PromiseStatus]]: "rejected"
  // [[PromiseValue]]: "failed"
  .then(value => {
  	// fulfillment
    }, error => {
  	// 打印"failed"
    console.log(error)
    return 'new value'
  })
  // [[PromiseStatus]]: "resolved"
  // [[PromiseValue]]: "new value"
  .then(value => {
  	// 打印 ""new value"
	console.log(value)
  })

catch(onRejected)

返回promise对象, 可链式调用，处理失败的状态回调
也可返回值或promise对象, 并初始化promise状态为resolved
如果是返回的新的promise对象，就丢弃当前状态与promise对象

// 状态"rejected"
const promise = new Promise((resolve, reject) => reject('failed'))
// then promise (resolved, rejected)的状态值接收方法
// 返回promise对象, 可链式调用
promise
  // [[PromiseStatus]]: "rejected"
  // [[PromiseValue]]: "failed"
  .then(value => {
    // resolved时的回调, 因为当前promise的状态是rejetced状态所以此回调并不会执行
    console.log(value)
  })
  // [[PromiseStatus]]: "rejected"
  // [[PromiseValue]]: "failed"
  .catch(error => {
  	// 打印"failed"
    console.log(value)
  })
  // [[PromiseStatus]]: "resolved"
  // [[PromiseValue]]: undefined
  then(value => {
    // 打印undefined
  	console.log(value)
  })

finally(onFinally)

返回promise对象, 可链式调用
onFinally回调函数无论当前状态是resolved或者是rejected都会执行
与try语句的finally一样

const promise = new Promise((resolve, reject) => reject('failed'))
// 返回promise对象, 可链式调用
promise
  // [[PromiseStatus]]: "rejected"
  // [[PromiseValue]]: "failed"
  .catch(error => {
  	// 打印"failed"
  	// 返回新的状态是
  	// [[PromiseStatus]]: "resolved"
  	// [[PromiseValue]]: "resolved value"
    return 'resolved value'
  })
  // [[PromiseStatus]]: "resolved"
  // [[PromiseValue]]: "resolved value"
  // onFinally没有参数
  .finally(() => {
    // 执行一些清尾操作
  	// 改变promise的状态与状态值
  	return Promise.reject('error')
  })
  // [[PromiseStatus]]: "rejected"
  // [[PromiseValue]]: "error"

四、构造函数方法（all, race, resolve, reject）

Promise.all(iterable)

Promise.all(iterable) 方法返回一个 Promise 实例
此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）
如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果
[[PromiseValue]]值是当前的状态对应已解决的array对象值或已拒绝的错误值

参数iterable
— iterable不是可迭代对象

直接返回undefined再异步的返回rejected状态的promise
如果没有用then或者catch回调处理的话就抛出控制台错误

— iterable是可迭代对象

如果可迭代对象是空的就返回完成resolved状态的promise
如果可迭代对象不是Promise对象就返回一个异步的完成resolved状态的promise
其它情况下返回pending这个返回会在之后所有的promise都完成或者有一个失败的时候异步最后变成已拒绝(rejected)或者已解决(resolved)

iterable不是可迭代对象

// 控制台报错直接返回undefined
// 异步的返回rejected状态的promise
var promise = Promise.all(true)  // 不是可迭代对象
// 如果加上catch处理就不会报错
promise.catch(err => {})

iterable是可迭代对象

// 1. 空的可迭代对象
var promise = Promise.all('')  // 字符串也是可迭代的对象
// 直接返回已完成resolved状态的promise(同步)
console.log(promise)

#logs
Promise {<resolved>: Array(0)}

// a. 可迭代对象不是Promise对象就返回一个异步的完成resolved状态的promise
// b. 先返回pending再返回已完成的resolved状态的promise
var promise = Promise.all('abc')
// 先返回pending
console.log(promise)
setTimeout(() => {
  // 再返回resolved状态的promise
  console.log(promise)
})

#logs
Promise {<pending>}
Promise {<resolved>: ['a', 'b', 'c']}

// 先返回pending再返回已完成的resolved状态的promise
var promise = Promise.all([1, 2, Promise.resolve('success')])
console.log(promise)
setTimeout(()=> {
  console.log(promise)
})

#logs
Promise {<pending>}
Promise {<resolved>: [1, 2, "success"]}

// 先返回pending再返回已拒绝的rejected状态的promise
var promise = Promise.all([1, 
  Promise.resolve('success1'), 
  Promise.resolve('success2'), 
  Promise.reject('error')])
console.log(promise)
setTimeout(() => {
  console.log(promise)
})

#logs
Promise {<pending>}
Uncaught (in promise) error
Promise {<rejected>: "error"}

// 先返回pending再返回已拒绝的rejected状态的promise
var promise = Promise.all([ 
  Promise.resolve('success1'), 
  Promise.resolve('success2'), 
  Promise.reject('error')])
  
console.log(promise)
promise
  .then(value => console.log(value))
  .catch(e => console.log(e))

#logs
Promise {<pending>}
error

Promise.race(iterable)

Promise.racel(iterable) 方法返回一个 Promise 实例
一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。
与all方法不同在处在于如果iterable是空的迭代对象就永远返回pending状态的promise
只要有一个已完成（resolved）或已拒绝（rejected）就直接返回完成或拒绝状态的promise

iterable空的可迭代对象

// 1. 空的可迭代对象
var promise = Promise.race('')  // 字符串也是可迭代的对象
// 永远返回已完成pending状态的promise(同步)
console.log(promise)

#logs
Promise {<pending>}

iterable不全是promise对象

var promise = Promise.race([1, 2, Promise.reject('error')])  // 字符串也是可迭代的对象
// 永远返回已完成pending状态的promise(同步)
console.log(promise)

#logs
Promise {<pending>}
Promise {<resolved>: 1}

race比速度

var p1 = new Promise((resolve, reject) => {
	setTimeout(resolve, 2000, 'resolved p1')
})
var p2 = new Promise((resolve, reject) => {
	setTimeout(resolve, 1000, 'resolved p2')
})
var p3 = new Promise((resolve, reject) => {
	setTimeout(reject, 800, 'rejected p3')
})
var promise = Promise.race([p1, p2, p3])  
console.log(promise)
console.log('macro')
promise
  .then(val => console.log(val))
  .catch(err => console.log(err))

#logs
Promise {<pending>}
macro
rejected p3

Promise.resolve(value)

返回一个以给定值解析后的resolved状态的Promise 对象
如果value是一个thenable对象（即带有then方法）返回值会根据这个then方法内部的状态而异步的采用它的最终状态
如果value是一个promise对象就直接返回value这个promise对象

平常的value值

—非thenable对象与promise对象

// 平常的value值
const promise = Promise.resolve([1, 2, 3])
// resolved状态的promise
console.log(promise)
promise.then(val => {
  // 打印[1, 2, 3]
  console.log(val)
})

#log
Promise {<resolved>: [1, 2, 3]}
[1, 2, 3]

value是thenable对象

// promise对象的value值, 异步的resolved状态
const thenable = {
  then(resolve, reject) {
    // resolved 状态
    resolve('resolve value')
    throw 'error' // 丢弃这个状态, 多次执行状态值改变无效
  }
}
const promise = Promise.resolve(thenable)
// pending
console.log(promise)
promise.then(val => {
  // resolved 状态
  console.log(promise)
  // 打印[1, 2, 3]
  console.log(val)
})

#log
Promise {<pending>}
Promise {<resolved>: "resolve value"}
resolve value

value是promise对象

// promise对象的value值
const promise = Promise.resolve(promise.reject('error'))
// rejected 状态
console.log(promise)
promise.catch(err => {
	console.log(err)
})

#log
Promise {<rejected>: "error"}
error

Promise.reject(reason)

返回一个带有拒绝原因reason参数的Promise对象
没有thenable, 与resolve方法不同
会原封不动的把reason拒绝的理由传递给catch处理

const promise = Promise.reject(new Error('error message'))
// rejected状态的promise
console.log(promise)
promise
  .then(val => {
    // 不会执行
    console.log(val)
  })
  .catch(err => {
  	// 打印错误信息
    console.log(err)
  })

#log
Promise {<rejected>: Error: error message}
Error: error message