Promise 相关理解
本文共 37095 字，大约阅读时间需要 123 分钟。
Promise 相关理解
1. Promise 学习准备
1.1 区别实例对象与函数对象
实例对象new函数产生的对象，称为实例对象，简称为对象
函数对象将函数作为对象使用时，简称为函数对象
function Fn() { // Fn 函数}const fn = new Fn(); // Fn 是构造函数 fn 是实例对象(简称为对象)console.log(Fn.prototype); // Fn 是函数对象Fn.bind({ }) // Fn 是函数对象$('#test') // $ 是 jQuery 函数$.get('/test') // $ 是 jQuery 函数对象 1.2 二种类型的回调函数
1.2.1 同步回调
理解立即执行完全执行完了才结束不会放入回调队列中执行
例子数组遍历相关的回调函数- Promise 的
excutor函数
const arr = [1, 3, 5]arr.forEach(item => { // 遍历回调，同步回调函数，不会放入队列，一上来就要执行完 console.log(item);})console.log('forEach()之后'); 1.2.2 异步回调
理解不会立即执行会放入回调队列中执行
例子定时器回调ajax回调Promise 的成功失败回调
setTimeout(() => { // 异步回调函数，会放入队列中将来执行 console.log('timeout callback');}, 0)console.log('setTimeout()之后'); 1.3 JS 的 error 处理
1.3.1 错误的类型
Error— 所有错误的父类型ReferenceError—引用的变量不存在TypeError—数据类型不正确的错误RangeError—数据值不在其所允许的范围内SyntaxError—语法错误
1.3.2 错误处理
捕获错误:try ... catch抛出错误:throw error
1.3.3 error 对象的结构
message属性:错误相关信息stack属性:函数调用栈记录信息
// 1. 常见的异常错误// ReferenceError: 引用的变量不存在console.log(a) // ReferenceError: a is not defined// TypeError: 数据类型不正确的错误let b = nullconsole.log(b.xxx) // TypeError: Cannot read property 'xxx' of null// RangeError: 数据值不在其所允许的范围内function fn() { fn() }fn() // RangeError: Maximun call stack size exceeded// SyntaxError: 语法错误let c = """" // SyntaxError: Unexpected string// 2. 错误处理// 捕获处理: try ... catchtry { let b = null b.xxx()} catch (error) { console.log('出错了:', error.message) console.log('出错了:', error.stack)}console.log('捕获错误后还可以继续向下执行')// 抛出错误: throw errorfunction handle() { if (Date.now()%2===0) { throw new Error('时间为偶数，不能处理逻辑') } else { console.log('时间为奇数，可以处理逻辑') }}try { handle()} catch(error) { // 捕获错误，做相应的提示 alert('执行出错:' + error.message)} 2. Promise 的理解和使用
2.1 Promise 是什么
2.1.1 Promise 理解
抽象表达- Promise 是
JS 中进行异步编程的新的解决方案(旧的是谁?)
- Promise 是
具体表达- 从
语法上来说: Promise 是一个构造函数 - 从
功能上来说: promise 对象用来封装一个异步操作并可以获取其结果
- 从
2.1.2 Promise 状态改变
pending变为resolvedpending变为rejected- 说明: 只有这 2 种，且
一个 promise 对象只能改变一次- 无论变为成功还是失败，都会有一个
结果数据 成功的结果数据一般称为value，失败的结果数据一般称为reason
- 无论变为成功还是失败，都会有一个
2.1.3 Promise 基本流程
2.1.4 Promise 基本使用
// 1. 创建promise对象 const p = new Promise((resolve, reject) => { // 执行器函数 // 2. 执行异步操作 setTimeout(() => { const time = Date.now() // 如果当前时间是偶数代表成功, 奇数代表失败 // 3.1 如果成功了，调用resolve(value) if (time % 2 == 0){ resolve('成功的数据' + time) } else { // 3.2 如果失败了，调用reject(reason) reject('失败数据' + time) } },1000)})// 通过promise的then()指定成功和失败的回调函数p.then( value => { // 接收得到的成功的value数据 onResolved console.log('成功的回调，value:', value) }, reason => { // 接收得到的失败的reason数据 onRejected console.log('失败的回调，reason:', reason) }) 2.2 为什么要用 Promise
2.2.1 指定回调函数的方式更加灵活
- 旧的: 必须在
启动异步任务前指定 - promise:
启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
2.2.2 支持链式调用，可以解决回调地狱问题
- 什么是
回调地狱回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件
- 回调地狱的
缺点不便于阅读不便于异常处理
解决方案promise 链式调用async / await
/* 1. 指定回调函数的方式更加灵活: 旧的: 必须在启动异步任务前指定 promise: 启动异步任务 => 返回 promise 对象 => 给 promise 对象绑定回调函数(甚至可以在异步任务结束后指定) 2. 支持链式调用，可以解决回调地狱问题 什么是回调地狱？回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调函数执行的条件 回调地狱的缺点？不便于阅读 / 不便于异常处理 解决方案？promise 链式调用 终极解决方案？async / await*/// 成功的回调函数function successCallback(result) { console.log("声音文件创建成功:" + result)}// 失败的回调函数function failureCallback(error) { console.log("声音文件创建失败:" + error)}// 1.1 使用纯回调函数createAudioFileAsync(audioSettings, successCallback, failureCallback)// 1.2 使用 Promiseconst promise = createAudioFileAsync(audioSettings);setTimeout(() => { promise.then(successCallback, failureCallback);}, 3000);// 2.1 回调地狱doSomething(function(result) { doSomethingElse(result, function(newResult) { doThirdThing(newResult, function(finalResult) { console.log('Got the final result: ' + finalResult) }, failureCallback) }, failureCallback)}, failureCallback)// 2.2 使用 promise 的链式调用解决回调地狱. 异常传透doSomething().then(function(result) { return doSomethingElse(result)}).then(function(newResult) { return doThirdThing(newResult)}).then(function(finalResult) { console.log('Got the final result: ' + finalResult)}).catch(failureCallback)// 2.3 async/await: 回调地狱的终极解决方案async function request() { try { const result = await doSomething() const newResult = await doSomethingElse(result) const finalResult = await doThirdThing(newResult) console.log('Got the final result: ' + finalResult) } catch (error) { failureCallback(error) }} 2.3 如何使用 Promise
2.3.1 主要API
-
Promise 构造函数— Promise (excutor) {}executor 函数— 执行器 (resolve, reject) => {}resolve 函数— 内部定义成功时调用的函数 value => {}reject 函数— 内部定义失败时调用的函数 reason => {}- 说明（
excutor 会在 Promise 内部立即同步回调，异步操作在执行器中执行）
-
Promise.prototype.then 方法— (onResolved, onRejected) => {}onResolved 函数— 成功的回调函数 (value) => {}onRejected 函数— 失败的回调函数 （reason) => {}- 说明（
指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调返回一个新的 promise 对象）
-
Promise.prototype.catch 方法— (onRejected) => {}onRejected 函数— 失败的回调函数 (reason) => {}- 说明（
then() 的语法糖, 相当于: then(undefined, onRejected)）
-
Promise.resolve 方法— (value) => {}value— 成功的数据或 promise 对象- 说明（
返回一个成功 / 失败的 promise 对象）
-
Promise.reject 方法— (reason) => {}reason— 失败的原因- 说明（
返回一个失败的 promise 对象）
-
Promise.all 方法— (promises) => {}promise— 包含 n 个 promise 的数组- 说明（
返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败）
-
Promise.race 方法— (promises) => {}promise— 包含 n 个 promise 的数组- 说明（
返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态）
-
示例
new Promise((resolve, reject) => { setTimeout(() => { // resolve('成功的数据') reject('失败的数据') },1000)}).then(value => { console.log('onResolved1()', value)}).catch(reason => { console.log('onRejected1()', reason)})// 产生一个成功值为1的promise对象 const p1 = new Promise((resolve, reject) => { resolve(1)})const p2 = Promise.resolve(2) // 语法糖const p3 = Promise.reject(3)p1.then(value => { console.log(value)})p2.then(value => { console.log(value)})p3.then(reason => { console.log(reason)})const pAll = Promise.all([p1, p2, p3])pAll.then( values => { console.log('all 成功了', values)}, reason => { console.log('all 失败了', reason)})const pRace = Promise.race([p3, p1, p2])pRace.then( value => { console.log('race 成功了', value)), reason => { console.log('race 失败了', reason)}) 2.3.2 Promise 几个关键问题
如何改变 promise 的状态?resolve(value)— 如果当前是 pendding 机会变为 resolvedreject(reason)— 如果当前是 pendding 就会变为 rejected抛出异常— 如果当前是 pendding 就会变为 rejected
const p = new Promise((resolve, reject) => { // resolve(1) // promise变为resolved成功状态 // reject(2) // promise变为rejected状态 // throw new Error('出错了') // 抛出异常，promise变为rejected失败状态，reason为抛出的error throw 3 // 抛出异常，promise变为rejected失败状态，reason为抛出的3})p.then( value => { }, reason => { console.log('reason', reason)) 一个 promise 指定多个成功 / 失败回调函数, 都会调用吗?当 promise 改变为对应状态时都会调用
const p = new Promise((resolve, reject) => { // resolve(1) // promise变为resolved成功状态 // reject(2) // promise变为rejected状态 // throw new Error('出错了') // 抛出异常，promise变为rejected失败状态，reason为抛出的error throw 3 // 抛出异常，promise变为rejected失败状态，reason为抛出的3})p.then( value => { }, reason => { console.log('reason', reason))p.then( value => { }, reason1 => { console.log('reason1', reason1)) 改变 promise 状态和指定回调函数谁先谁后?- 都有可能，正常情况下是
先指定回调再改变状态，但也可以先改变状态再指定回调 如何先改状态再指定回调？- 在执行器中
直接调用 resolve() / reject() 延长更长时间才调用 then()
- 在执行器中
什么时候才能得到数据？- 如果
先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据 - 如果
先改变的状态，那当指定回调时，回调函数就会调用，得到数据
- 如果
- 都有可能，正常情况下是
// 常规：先指定回调函数，后改变的状态new Promise((resolve, reject) => { setTimeout(() => { resolve(1) // 后改变的状态(同时指定数据)，异步执行回调函数 }, 1000);}).then( // 先指定回调函数，保存当前指定的回调函数 value => { }, reason => { console.log('reason', reason)})// 如何先改状态，后指定回调函数new Promise((resolve, reject) => { resolve(1) // 先改变的状态(同时指定数据)}).then( // 后指定回调函数，异步执行回调函数 value => { console.log('value2', value)}, reason => { console.log('reason2', reason)})console.log('-------') // 先执行const p = new Promise((resolve, reject) => { setTimeout(() => { resolve(1) // 后改变的状态(同时指定数据)，异步执行回调函数 }, 1000);})setTimeout(() => { p.then( value => { console.log('value3', value)}, reason => { console.log('reason3', reason)} )}, 1100); promise.then() 返回的新 promise 的结果状态由什么决定?简单表达- 由
then() 指定的回调函数执行的结果决定
- 由
详细表达- 如果
抛出异常，新 promise 变为 rejected，reason 为抛出的异常 - 如果
返回的是非 promise 的任意值，新 promise 变为 resolved，value 为返回的值 - 如果
返回的是另一个新 promise，此 promise 的结果就会成为新 promise 的结果
- 如果
new Promise((resolve, reject) => { // resolve(1) reject(1)}).then( value => { console.log('onResolved1()', value) // return 2 // return Promise.resolve(3) // return Promise.reject(4) throw 5 }, reason => { console.log('onRejected1()', reason) }).then( value => { console.log('onResolve2()', value) }, reason => { console.log('onRejected2()', reason) }) promise 如何串连多个操作任务?promise 的 then() 返回一个新的 promise，可以开成 then() 的链式调用通过 then() 的链式调用串连多个同步 / 异步任务
new Promise((resolve, reject) => { setTimeout(() => { console.log('执行任务1(异步)') resolve(1) }, 1000);}).then( value => { console.log('任务1的结果：', value) console.log('执行任务2(同步)') return 2 }).then( value => { console.log('任务2的结果：', value) return new Promise((resolve, reject) => { // 启动任务3(异步) setTimeout(() => { console.log('执行任务3(异步))') resolve(3) }, 1000) }) }).then( value => { console.log('任务3的结果：', value) }) promise 异常穿透?- 当
使用 promise 的 then() 链式调用时，可以在最后指定失败的回调 - 前面任何操作出了
异常，都会传到最后失败的回调中处理
- 当
new Promise((resolve, reject) => { resolve(1)}).then( value => { console.log('onResolved1()', value) return 2 }, reason => { throw reason}).then( value => { console.log('onResolved2()', value) return 3 }, reason => { throw reason}).then( value => { console.log('onResolved3()', value) }, reason => { throw reason}).catch(reason => { console.log('onRejected1()', reason)}) 中断 promise 链？- 当
使用 promise 的 then() 链式调用时，在中间中断，不再调用后面的回调函数 - 办法:
在回调函数中返回一个 pendding 状态的 promise 对象
- 当
new Promise((resolve, reject) => { resolve(1)}).then( value => { console.log('onResolved1()', value) return 2 }, reason => { throw reason}).then( value => { console.log('onResolved2()', value) return 3 }, reason => { throw reason}).then( value => { console.log('onResolved3()', value) }, reason => Promise.reject(reason)).catch(reason => { console.log('onRejected1()', reason) // throw reason // return Promise.reject(reason) return new Promise(() => { }) // 返回一个pending的promise 中断promise链}).then( value => { console.log('onResolved3()', value) }, reason => { console.log('onRejected2()', reason) }) 3. 自定义(手写) Promise
3.1 定义整体结构
// 自定义 Promise 函数模块：IIFE(function (window) { /* Promise 构造函数 excutor: 内部同步执行的执行器函数 (resolve, reject) => {} */ function Promise(excutor) { } /* Promise 原型对象的 then() 为 promise 指定成功 / 失败的回调函数 函数的返回值是一个新的 promise 对象 */ Promise.prototype.then = function (onResolved, onRejected) { } /* Promise 原型对象的 catch() 为 promise 指定失败的回调函数 是 then(null, onRejected)的语法糖 函数的返回值是一个新的 promise 对象 */ Promise.prototype.catch = function (onRejected) { } /* Promise 函数对象的 resolve 方法 返回一个指定了成功 value 的 promise 对象 */ Promise.resolve = function (value) { } /* Promise 函数对象的 reject 方法 返回一个指定了失败 reason 的 promise 对象 */ Promise.reject = function (reason) { } /* Promise 函数对象的 all 方法 返回一个 promise，只有 promises 中所有 promise 都成功时，才最终成功，只要有一个失败就直接失败 */ Promise.all = function (promises) { } /* Promise 函数对象的 race 方法 返回一个 promise，其结果由第一个完成的promise决定 */ Promise.race = function (promise) { } // 向外暴露Promise构造函数 window.Promise = Promise})(window) 3.2 Promise 构造函数的实现
/* Promise 构造函数 excutor: 内部同步执行的函数 (resolve, reject) => {}*/function Promise(excutor) { // 将当前promise对象保存起来 const self = this self.status = 'pending' // 给promise对象指定status属性，初始值为pending，成功了变为 resolved，失败了变为 rejected self.data = undefined // 给promise对象指定一个用于存储结果数据的属性，成功 value 或失败 reason self.callbacks = [] // 每个元素的结构：{ onResolved() {}, onRejected() {}},用来保存所有待调用的包含 onResolved 和 onRejected 回调函数的对象的数组 /* 异步处理成功后应该调用的函数 value: 将交给 onResolve() 的成功数据 */ function resolve(value) { if(self.status !== 'pending') { // 如果当前不是 pending，直接结束 return } // 将状态改为 resolved self.status = 'resolved' // 保存 value 数据 self.data = value // 如果有待执行callback函数，立即异步执行回调函数onResolved if (self.callbacks.length > 0) { setTimeout(() => { // 放入队列中执行所有成功的回调 self.callbacks.forEach(callbacksObj => { callbacksObj.onResolved(value) }) }); } } /* 异步处理失败后应该调用的函数 reason: 将交给 onRejected() 的失败数据 */ function reject(reason) { if(self.status !== 'pending') { // 如果当前不是 pending，直接结束 return } // 立即更新状态，保存数据 self.status = 'rejected' self.data = reason // 如果有待执行callback函数，立即异步执行回调函数onRejected if (self.callbacks.length > 0) { // 异步调用所有待处理的 onRejected 回调函数 setTimeout(() => { // 放入队列中执行所有成功的回调 self.callbacks.forEach(callbacksObj => { callbacksObj.onRejected(reason) }) }) } } try { // 立即同步调用 excutor() 处理 excutor(resolve, reject) } catch (error) { // 如果执行器抛出异常，promise对象变为rejected状态 reject(error) }} 3.3 Promise.then()/catch() 的实现
/* 为 promise 指定成功 / 失败的回调函数 函数的返回值是一个新的 promise 对象*/Promise.prototype.then = function (onResolved, onRejected) { // 如果 onResolved / onRejected 不是函数，可它指定一个默认的函数 onResolved = typeof onResolved === 'function' ? onResolved : value => value // 指定返回的 promise 为一个成功状态，结果值为 value onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason} // 指定返回的 promise 为一个失败状态，结果值为 reason const self = this // 返回一个新的promise对象 return new Promise((resolve, reject) => { // 调用指定的回调函数处理，根据执行结果，改变 return 的 promise 的状态 /* 专门抽取的用来处理 promise 成功 / 失败结果的函数 callback: 成功 / 失败的回调函数 */ function handle(callback) { /* 1. 如果抛出异常，return 的 promise 就会失败，reason 就是 error 2. 如果回调函数返回的不是 promise，return 的 promise 就会成功，value 就是返回的值 3. 如果回调函数返回是 promise, return 的 promise 结果就是这个 promise 的结果 */ try { const result = callback(self.data) if (result instanceof Promise) { // 3. 如果回调函数返回是 promise, return 的 promise 结果就是这个 promise 的结果 result.then( value => { resolve(value) // 当 result 成功时，让 return 的 promise 也成功 }, reason => { reject(reason) // 当 result 失败时，让 return 的 promise 也失败 } ) // 简洁版 // result.then(resolve, reject) } else { // 2. 如果回调函数返回的不是 promise，return 的 promise 就会成功，value 就是返回的值 resolve(result) } } catch (error) { // 1. 如果抛出异常，return 的 promise 就会失败，reason 就是 error reject(error) } } // 当前状态还是 pending 状态，将回调函数保存起来 if (self.status === 'pending') { self.callbacks.push({ onResolved (value) { handle(onResolved) }, onRejected (reason) { handle(onRejected) } }) } else if (self.status === 'resolved') { setTimeout(() => { handle(onResolved) }) } else { // 'rejected' setTimeout(() => { handle(onRejected) }) } })}/* 为 promise 指定失败的回调函数 是 then(null, onRejected) 的语法糖*/Promise.prototype.catch = function (onRejected) { return this.then(undefined, onRejected)} 3.4 Promise.resolve()/reject() 的实现
/* 返回一个指定了成功 value 的 promise 对象 value: 一般数据或 promise*/Promise.resolve = function (value) { // 返回一个成功/失败的 promise return new Promise((resolve, reject) => { // value 是 promise if(value instanceof Promise) { // 使用 value 的结果作为 promise 的结果 value.then(resolve, reject) } else { // value 不是 promise => promise 变为成功，数据是 value resolve(value) } })}/* 返回一个指定了失败 reason 的 promise 对象 reason: 一般数据 / error*/Promise.reject = function (reason) { // 返回一个失败的 promise return new Promise((resolve, reject) => { reject(reason) })} 3.5 Promise.all/race() 的实现
/* 返回一个新的 promise 对象，只有 promise 中所有 promise 都产生成功 value 时，才最终成功， 只要有一个失败就直接失败*/Promise.all = function (promise) { // 用来保存所有成功的 value 的数组 const values = new Array(promises.length) // 用来保存成功的 promise 的数量 let resolvedCount = 0 // 返回一个新的 promise return new Promise((resolve, reject) => { // 遍历 promises 获取每个 promise 的结果 promises.forEach((p, index) => { p.then( value => { resolvedCount++ // 成功的数量加1 // p 成功，将成功的 value 保存 values // values.push(value) 顺序 values[index] = value // 如果全部成功了，将 return 的 promise 改变成功 if (resolvedCount === promises.length) { resolve(values) } }, reason => { // 只要一个失败，return 的 promise 就会失败 reject(reason) } ) }) })}/* 返回一个 promise，一旦某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝*/Promise.race = function (promises) { // 返回新的 promise 对象 return new Promise((resolve, reject) => { // 遍历 promises 获取每个 promise 的结果 promises.forEach((p, index) => { p.then( value => { // 一旦有成功了，将 return 变为成功 resolve(value) }, reason => { // 只要一个失败了，return 的 promise 就失败 reject(reason) } ) }) })} 3.6 Promise.resolveDelay()/rejectDelay() 的实现
/* 返回一个延迟指定时间才确定结果的 promise 对象*/Promise.resolveDelay = function (value, time) { // 返回一个成功/失败的 promise return new Promise((resolve, reject) => { setTimeout(() => { if (value instanceof Promise) { // 如果 value 是一个 promise，取这个 promise 的结果值作为返回的 promise 的结果值 value.then(resolve, reject) // 如果 value 成功，调用 resolve(val)，如果 value 失败了，调用 reject(reason) } else { resolve(value) } }, time); })}/* 返回一个延迟指定时间才失败的 Promise 对象*/Promise.rejectDelay = function (reason, time) { // 返回一个成功/失败的 promise return new Promise((resolve, reject) => { setTimeout(() => { reject(reason) }, time) })} 3.7 ES5 function 完整版本
(function (window) { const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' // Promise 构造函数 function Promise(excutor) { // 将当前promise对象保存起来 const self = this self.status = PENDING // 给promise对象指定status属性，初始值为pending，成功了变为 resolved，失败了变为 rejected self.data = undefined // 给promise对象指定一个用于存储结果数据的属性，成功 value 或失败 reason self.callbacks = [] // 每个元素的结构：{ onResolved() {}, onRejected() {}},用来保存所有待调用的包含 onResolved 和 onRejected 回调函数的对象的数组 function resolve(value) { // 如果当前状态不是 pending，直接结束 if (self.status !== PENDING) { return } // 将状态改为 resolved self.status = RESOLVED // 保存 value 数据 self.data = value // 如果有待执行 callback 函数, 立即异步执行回调函数 onResolved if (self.callbacks.length > 0) { setTimeout(() => { // 放入队列中执行所有成功的回调 self.callbacks.forEach(callbacksObj => { callbacksObj.onResolved(value) }) }) } } function reject(reason) { // 如果当前状态不是 pending，直接结束 if (self.status !== PENDING) { return } // 将状态改为 rejected self.status = REJECTED // 保存 reason 数据 self.data = reason // 如果有待执行 callback 函数, 立即异步执行回调函数 onRejected if (self.callbacks.length > 0) { setTimeout(() => { // 放入队列中执行所有成功的回调 self.callbacks.forEach(callbacksObj => { callbacksObj.onRejected(reason) }) }) } } // 立即同步执行 excutor try { excutor(resolve, reject) } catch (error) { // 如果执行器抛出异常，promise 对象变为 rejected 状态 reject(error) } } // Promise 原型对象 then Promise.prototype.then = function (onResolved, onRejected) { onResolved = typeof onResolved === 'function' ? onResolved : value => value // 向后传递成功的 value // 指定默认的失败的回调(实现错误/异常传透的关键点) onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason } // 向后传递失败的 reason const self = this // 返回一个新的 promise 对象 return new Promise((resolve, reject) => { // 调用指定的回调函数处理，根据执行结果，改变 return 的 promise 的状态 function handle(callback) { /* 1. 如果抛出异常，return 的 promise 就会失败，reason 就是 error 2. 如果回调函数返回的不是 promise，return 的 promise 就会成功，value 就是返回的值 3. 如果回调函数返回是 promise, return 的 promise 结果就是这个 promise 的结果 */ try { const result = callback(self.data) if (result instanceof Promise) { // 3. 如果回调函数返回是 promise, return 的 promise 结果就是这个 promise 的结果 result.then( value => { resolve(value) // 当 result 成功时，让 return 的 promise 也成功 }, reason => { reject(reason) // 当 result 失败时，让 return 的 promise 也失败 } ) // 简洁版 // result.then(resolve, reject) } else { // 2. 如果回调函数返回的不是 promise，return 的 promise 就会成功，value 就是返回的值 resolve(result) } } catch (error) { // 1. 如果抛出异常，return 的 promise 就会失败，reason 就是 error reject(error) } } // 当前状态还是 pending 状态，将回调函数保存起来 if (self.status === PENDING) { self.callbacks.push({ onResolved(value) { handle(onResolved) }, onRejected(reason) { handle(onRejected) } }) } else if (self.status === RESOLVED) { // 如果当前是 resolved 状态，异步执行 onResolve 并改变 return 的 promise 状态 setTimeout(() => { handle(onResolved) }) } else { // // 如果当前是 rejected 状态，异步执行 onResolve 并改变 return 的 promise 状态 setTimeout(() => { handle(onRejected) }) } }) } // Promise 原型对象 catch Promise.prototype.catch = function (onRejected) { return this.then(undefined, onRejected) } // Promise 函数对象 resolve Promise.resolve = function (value) { // 返回一个成功/失败的 promise return new Promise((resolve, reject) => { // value 是 promise if (value instanceof Promise) { // 使用 value 的结果作为 promise 的结果 value.then(resolve, reject) } else { // value 不是 promise => promise 变为成功，数据是 value resolve(value) } }) } // Promise 函数对象 reject Promise.reject = function (reason) { // 返回一个失败的 promise return new Promise((resolve, reject) => { reject(reason) }) } // Promise 函数对象 all Promise.all = function (promises) { // 用来保存所有成功的 value 的数组 const values = new Array(promises.length) // 用来保存成功的 promise 的数量 let resolvedCount = 0 // 返回一个新的 promise 对象 return new Promise((resolve, reject) => { // 遍历 promises 获取每个 promise 的结果 promises.forEach((p, index) => { p.then( value => { resolvedCount++ // 成功的数量加1 // p 成功，将成功的 value 保存 values // values.push(value) 顺序 values[index] = value // 如果全部成功了，将 return 的 promise 改变成功 if (resolvedCount === promises.length) { resolve(values) } }, reason => { // 只要一个失败，return 的 promise 就会失败 reject(reason) } ) }) }) } // Promise 函数对象 race Promise.race = function (promises) { // 返回一个 promise return new Promise((resolve, reject) => { // 遍历 promises 获取每个 promise 的结果 promises.forEach((p, index) => { p.then( value => { // 一旦有成功了，将 return 变为成功 resolve(value) }, reason => { // 只要一个失败了，return 的 promise 就失败 reject(reason) } ) }) }) } /** * 返回一个 promise 对象，它在指定的时间后才确定结果 */ Promise.resolveDelay = function (value, timeout) { // 返回一个成功/失败的 promise return new Promise((resolve, reject) => { setTimeout(() => { // value 是 promise if (value instanceof Promise) { // 使用 value 的结果作为 promise 的结果 value.then(resolve, reject) } else { // value 不是 promise => promise 变为成功，数据为 value resolve(value) } }, time) }) } /** * 返回一个 promise 对象，它在指定的时间后才确定结果 */ Promise.rejectDelay = function (reason, time) { // 返回一个成功/失败的 promise return new Promise((resolve, reject) => { setTimeout(() => { reject(reason) }, time) }) } window.Promise = Promise})(window) 3.8 ES6 class 完整版本
(function (window) { const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' class Promise { /** * Promise 构造函数 * excutor: 执行器函数(同步执行) */ constructor(excutor) { // 将当前promise对象保存起来 const self = this self.status = PENDING // 给promise对象指定status属性，初始值为pending，成功了变为 resolved，失败了变为 rejected self.data = undefined // 给promise对象指定一个用于存储结果数据的属性，成功 value 或失败 reason self.callbacks = [] // 每个元素的结构：{ onResolved() {}, onRejected() {}},用来保存所有待调用的包含 onResolved 和 onRejected 回调函数的对象的数组 function resolve(value) { // 如果当前状态不是 pending，直接结束 if (self.status !== PENDING) { return } // 将状态改为 resolved self.status = RESOLVED // 保存 value 数据 self.data = value // 如果有待执行 callback 函数, 立即异步执行回调函数 onResolved if (self.callbacks.length > 0) { setTimeout(() => { // 放入队列中执行所有成功的回调 self.callbacks.forEach(callbacksObj => { callbacksObj.onResolved(value) }) }) } } function reject(reason) { // 如果当前状态不是 pending，直接结束 if (self.status !== PENDING) { return } // 将状态改为 rejected self.status = REJECTED // 保存 reason 数据 self.data = reason // 如果有待执行 callback 函数, 立即异步执行回调函数 onRejected if (self.callbacks.length > 0) { setTimeout(() => { // 放入队列中执行所有成功的回调 self.callbacks.forEach(callbacksObj => { callbacksObj.onRejected(reason) }) }) } } // 立即同步执行 excutor try { excutor(resolve, reject) } catch (error) { // 如果执行器抛出异常，promise 对象变为 rejected 状态 reject(error) } } // Promise 原型对象 then then(onResolved, onRejected) { onResolved = typeof onResolved === 'function' ? onResolved : value => value // 向后传递成功的 value // 指定默认的失败的回调(实现错误/异常传透的关键点) onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason } // 向后传递失败的 reason const self = this // 返回一个新的 promise 对象 return new Promise((resolve, reject) => { // 调用指定的回调函数处理，根据执行结果，改变 return 的 promise 的状态 function handle(callback) { /* 1. 如果抛出异常，return 的 promise 就会失败，reason 就是 error 2. 如果回调函数返回的不是 promise，return 的 promise 就会成功，value 就是返回的值 3. 如果回调函数返回是 promise, return 的 promise 结果就是这个 promise 的结果 */ try { const result = callback(self.data) if (result instanceof Promise) { // 3. 如果回调函数返回是 promise, return 的 promise 结果就是这个 promise 的结果 result.then( value => { resolve(value) // 当 result 成功时，让 return 的 promise 也成功 }, reason => { reject(reason) // 当 result 失败时，让 return 的 promise 也失败 } ) // 简洁版 // result.then(resolve, reject) } else { // 2. 如果回调函数返回的不是 promise，return 的 promise 就会成功，value 就是返回的值 resolve(result) } } catch (error) { // 1. 如果抛出异常，return 的 promise 就会失败，reason 就是 error reject(error) } } // 当前状态还是 pending 状态，将回调函数保存起来 if (self.status === PENDING) { self.callbacks.push({ onResolved(value) { handle(onResolved) }, onRejected(reason) { handle(onRejected) } }) } else if (self.status === RESOLVED) { // 如果当前是 resolved 状态，异步执行 onResolve 并改变 return 的 promise 状态 setTimeout(() => { handle(onResolved) }) } else { // // 如果当前是 rejected 状态，异步执行 onResolve 并改变 return 的 promise 状态 setTimeout(() => { handle(onRejected) }) } }) } // Promise 原型对象 catch catch (onRejected) { return this.then(undefined, onRejected) } // Promise 函数对象 resolve static resolve = function (value) { // 返回一个成功/失败的 promise return new Promise((resolve, reject) => { // value 是 promise if (value instanceof Promise) { // 使用 value 的结果作为 promise 的结果 value.then(resolve, reject) } else { // value 不是 promise => promise 变为成功，数据是 value resolve(value) } }) } // Promise 函数对象 reject static reject = function (reason) { // 返回一个失败的 promise return new Promise((resolve, reject) => { reject(reason) }) } // Promise 函数对象 all static all = function (promises) { // 用来保存所有成功的 value 的数组 const values = new Array(promises.length) // 用来保存成功的 promise 的数量 let resolvedCount = 0 // 返回一个新的 promise 对象 return new Promise((resolve, reject) => { // 遍历 promises 获取每个 promise 的结果 promises.forEach((p, index) => { p.then( value => { resolvedCount++ // 成功的数量加1 // p 成功，将成功的 value 保存 values // values.push(value) 顺序 values[index] = value // 如果全部成功了，将 return 的 promise 改变成功 if (resolvedCount === promises.length) { resolve(values) } }, reason => { // 只要一个失败，return 的 promise 就会失败 reject(reason) } ) }) }) } // Promise 函数对象 race static race(promises) { // 返回一个 promise return new Promise((resolve, reject) => { // 遍历 promises 获取每个 promise 的结果 promises.forEach((p, index) => { p.then( value => { // 一旦有成功了，将 return 变为成功 resolve(value) }, reason => { // 只要一个失败了，return 的 promise 就失败 reject(reason) } ) }) }) } /** * 返回一个 promise 对象，它在指定的时间后才确定结果 */ static resolveDelay(value, timeout) { // 返回一个成功/失败的 promise return new Promise((resolve, reject) => { setTimeout(() => { // value 是 promise if (value instanceof Promise) { // 使用 value 的结果作为 promise 的结果 value.then(resolve, reject) } else { // value 不是 promise => promise 变为成功，数据为 value resolve(value) } }, time) }) } /** * 返回一个 promise 对象，它在指定的时间后才确定结果 */ static rejectDelay(reason, time) { // 返回一个成功/失败的 promise return new Promise((resolve, reject) => { setTimeout(() => { reject(reason) }, time) }) } } window.Promise = Promise})(window) 4. async 与 await
4.1 MDN 文档
4.2 async 函数
函数的返回值为 promise 对象promise 对象的结果由 async 函数执行的返回值决定
4.3 await 表达式
await 右侧的表达式一般为 promise 对象, 但也可以是其它的值- 如果表达式是
promise 对象，await 返回的是 promise 成功的值 - 如果表达式是
其它值，直接将此值作为 await 的返回值
4.4 注意
await 必须写在 async 函数中, 但 async 函数中可以没有 await如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理
function fn1() { return Promise.resolve(1)}function fn2() { return 2}function fn3() { return Promise.reject(3) // return fn3.test() // 程序运行会抛出异常}function fn4() { return fn3.test() // 程序运行会抛出异常}// 没有使用 await 的 async 函数async function fn5() { return 4}async function fn() { // await 右侧是一个成功的 promise const result = await fn1() // await 右侧是一个非 promise 的数据 // const result = await fn2() // await 右侧是一个失败的 promise // const result = await fn4() console.log('result: ', result) return result+10}async function test() { try { const result2 = await fn() console.log('result2', result2) } catch (error) { console.log('error', error) } const result3 = await fn4() console.log('result4', result3)}// test() 5. JS 异步之宏队列与微队列
5.1 原理图
5.2 说明
- JS 中用来
存储待执行回调函数的队列包含 2 个不同特定的列队 宏列队— 用来保存待执行的宏任务（回调）- 例：
定时器回调DOM 事件回调ajax回调
- 例：
微列队— 用来保存待执行的微任务 ( 回调 )- 例:
promise的回调MutationObserver的回调
- 例:
- JS 执行时会区别这 2 个队列
JS 引擎首先必须先执行所有的初始化同步任务代码每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行
6. Promise 相关面试题
6.1 面试1
setTimeout(() => { // 回调立刻放入宏队列，但不是立刻执行 console.log(1)},0)Promise.resolve().then(() => { // 回调立刻放入微队列 console.log(2)})Promise.resolve().then(() => { // 回调立刻放入微队列 console.log(4)})console.log(3) // 同步代码执行完再执行队列代码，先取微队列，再取宏队列结果：3 2 4 1 6.1 面试2
setTimeout(() => { // 宏队列 console.log(1)},0)new Promise((resolve) => { console.log(2) // 同步执行 resolve()}).then(() => { console.log(3) // 微队列}).then(() => { console.log(4) // 微队列})console.log(5) // 同步执行结果：2 5 3 4 1 6.1 面试3
const first = () => (new Promise((resolve, reject) => { console.log(3) // 同步 let p = new Promise((resolve, reject) => { console.log(7) // 同步 setTimeout(() => { console.log(5) // 宏队列 resolve(6) },0) resolve(1) // 微队列 }) resolve(2) // 微队列 p.then((arg) => { console.log(arg) // 微队列 })}))first().then((arg) => { console.log(arg) // 微队列 })console.log(4) // 同步结果：3 7 4 1 2 5 6.1 面试4
setTimeout(() => { console.log(0) // 宏队列},0)new Promise((resolve, reject) => { console.log(1) // 同步 resolve()}).then(() => { console.log(2) // 微队列 new Promise((resolve, reject) => { console.log(3) // 同步 resolve() }).then(() => { console.log(4) // 微队列 }).then(() => { console.log(5) // 微队列 })}).then(() => { console.log(6) // 微队列})new Promise((resolve, reject) => { console.log(7) // 同步 resolve()}).then(() => { console.log(8) // 微队列})结果：1 7 2 3 8 4 6 5 0 6.1 面试5
手写 Promise
转载地址：http://yjqwi.baihongyu.com/
你可能感兴趣的文章
如何在平台上实现LED灯的效果？如信号灯，来短信/来电时LED动画闪烁
查看>>
restore factory属性的enable和disable
查看>>
Android LOG机制流程图
查看>>
如何在JNI中抛异常
查看>>
Android应用程序的完全退出
查看>>
Task和Activity相关的一些属性
查看>>
JAVA系统属性之user.home
查看>>
Android代码截屏
查看>>
Android中打印代码的调用层次
查看>>
成功者十三个价值连城的习惯
查看>>
特别成功的人会做6件事
查看>>
Android: 用jni 获取MAC地址
查看>>
字符串列表的C语言实现：c_strlist
查看>>
客户沟通的方式：礼貌待客沟通方式，技巧推广沟通方式，个性服务沟通方式
查看>>
用弹性工作制留住员工
查看>>
知识=经验×反思2
查看>>
领导者如何发现关键问题
查看>>
学习无为领导力
查看>>
卓越领导看过程
查看>>
领导力与各种循环挑战
查看>>