Promsie 代码
(function (window) { //首先写一个自调用函数const PENDING = 'pending'const onREJECT = 'onReject'const onRESOLVE = 'onResolve'function Promise(executor) {this.status = PENDING // 存状态this.data = undefined // 存储结果值this.callbacks = [] // 存储回调函数const _this = this // 这个this 指向Promise function resolve(value) { // 可以用箭头函数if (_this.status != PENDING) {// 状态只能有一次 不是pending直接结束return}_this.status = onRESOLVE //状态_this.data = value // 传过来的 valueif (_this.callbacks.length > 0) { // 有函数就执行setTimeout(() => {_this.callbacks.forEach(element => {element.resolve(value)});})}}function reject(reason) {if (_this.status != PENDING) {// 状态只能有一次 不是pending直接结束return}_this.status = onREJECT //状态_this.data = reason // 传过来的 valueif (_this.callbacks.length > 0) { // 有函数就执行setTimeout(() => {_this.callbacks.forEach(element => {element.reject(reason)});})}}try {executor(resolve, reject)} catch (error) { // 如果promise 有异常就变成rejectreject(error)}} // promise 的 resolve 和 reject Promise.prototype.then = function (resolve, reject) {resolve = typeof resolve === 'function' ? resolve : value => value //向后传成功的valuereject = typeof reject === 'function' ? reject : reason => {throw reason} // 指定默认的失败回调（实现错误/异常传透关键点） const self = thisreturn new Promise((resolves, rejects) => {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) {result.then(value => {resolves(value) // 当result 成功的时候 让return 的promise 也成功},reason => {rejects(reason) // 当result 失败的时候 让return 的promise 也失败})// result.then(value, reason) // 简写} else {// 若果回调函数返回的不是promise，return 的promise 就会成功，value 就是返回的值resolves(result)}} catch (error) {rejects(error)// 传入错误}}// 返回一个新的promise 对象if (this.status == PENDING) {// 假设当前pending时候将回调存起来this.callbacks.push({resolve() {handle(resolve)},reject() {handle(reject)}})} else if (this.status == onRESOLVE) { // 若果当前是onRESOLVE状态 ， 异步执行onRESOLVE 并改变return 的promise 状态setTimeout(() => {handle(resolve)})} else { // onRejectsetTimeout(() => { // 若果当前是onRESOLVE状态 异步执行onRESOLVE，并改变return 的promise 状态handle(reject)})}})}Promise.prototype.catch = function (reject) {return this.then(undefined, reject)}Promise.reject = function (reason) {return new Promise((resolve, reject) => {reject(reason)})}Promise.resolve = function (value) {return new Promise((resolve, reject) => {if (value instanceof Promise) {value.then(resolve, reject)} else {resolve(value)}})}Promise.all = function (promise) {}Promise.race = function (promise) {}window.Promise = Promise // 让全局的Promise = Promise 这里很重要
})(window)
测试代码
?
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>封装promise 测试用的</title>
</head><body></body>
<script src="../promise/promise.js"></script>
<script>// const p = new Promise((resolve, reject) => {// setTimeout(() => {// // resolve(1)// reject(2)// });// }).then(// value => {// console.log(value);// },// reason => {// console.log(reason)// // return new Promise((resolve, reject) => {// // reject(55)// // })// throw 55// }// ).then(// value => {// console.log(value);// },// reason => {// console.log(reason);// throw 5// }// ).catch((reason) => {// console.log(reason);// // return new Promise(() => { }) // 组知下面代码执行链式调用 终止promise链// }).then(// value => {// console.log(value);// },// reason => {// console.log(reason);// }// )// let p = Promise.reject(1)let p = Promise.reject(1)p.then(value => {console.log(value);}, reason => {console.log(reason);})
</script></html>?