Promise理解
// Promise承受的参数是函数模式的// resolve(解决) 函数类型的参数 // reject(回绝) 函数类型的参数const p = new Promise((resolve,reject) => { let num = Math.round((Math.random() * 100)) if(num > 50) { resolve(num) // 能够将Promise对象（下面的 p）的状态设置为胜利 }else { reject(num) // 能够将Promise对象（下面的 p）的状态设置为失败 }})p.then((num) => { console.log('胜利了',num) // 如何中断Peomise // return new Promise(() => {)},(num) => { console.log('失败了',num)})// console.log(p) 会有一个Promise实例，下面有两个属性PromiseState1. pending 未决定的2. rejected 失败3. resolve/fulfilled 胜利PromiseResult保留着对象胜利或者失败的后果只有以下两个能够操作这个后果1. resolve2. reject
手写Promise代码
function Promise(excutor) { // 增加两个默认属性 this.PromiseState = 'pending' this.PromiseResult = null // 定义一个回调应用 this.callbacks = [] // 函数外面的this指向window，所以保留下 const that = this; // resolve函数 function resolve(data) { // PromiseState只能批改一次，不是pending状态间接retrun if(that.PromiseState !== 'pending') return // 1.批改对象的状态（PromiseState） that.PromiseState = 'fulfilled' // 2.批改对象后果值（PromiseResult） that.PromiseResult = data // 调用胜利函数 // 这个定时器为了体现异步 setTimeout(() => { that.callbacks.forEach(element => { element.onResolved(data) }); }) } // reject函数 function reject(data) { // PromiseState只能批改一次，不是pending状态间接retrun if(that.PromiseState !== 'pending') return // 1.批改对象的状态（PromiseState） that.PromiseState = 'rejected' // 2.批改对象后果值（PromiseResult） that.PromiseResult = data // 调用胜利函数 // 这个定时器为了体现异步 setTimeout(() => { that.callbacks.forEach(element => { element.onRejected(data) }); }) } // 兼容 throw 抛出异样 try { // 同步调用 《执行器函数》 excutor(resolve,reject) }catch(err) { reject(err) }}// 增加then办法Promise.prototype.then = function (onResolved,onRejected) { const that = this if(typeof onRejected !== 'function') { onRejected = error => { throw error } } if(typeof onResolved !== 'function') { onResolved = value => value } return new Promise((resolve,reject) => { // 封装函数 function callback(type) { try{ // 获取回调函数的执行后果 let result = type(that.PromiseResult) // 判断以后数据是不是一个Promise if(result instanceof Promise) { // 如果是，那必定能够调用then办法 result.then((val) => { resolve(val) },(err) => { reject(err) }) }else { // 如果不是，间接返回后果即可 resolve(result) } }catch(err){ reject(err) } } if(this.PromiseState === 'fulfilled') { // 这个定时器为了体现异步 setTimeout(() => { callback(onResolved) }) } if(this.PromiseState === 'rejected') { // 这个定时器为了体现异步 setTimeout(() => { callback(onRejected) }) } if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved: function() { callback(onResolved) }, onRejected: function() { callback(onRejected) } }) } })}Promise.prototype.catch = function(onRejected) { return this.then(undefined,onRejected)}Promise.resolve = function(value) { return new Promise((resolve,reject) => { if(value instanceof Promise) { // 如果是，那必定能够调用then办法 value.then((val) => { resolve(val) },(err) => { reject(err) }) }else { // 如果不是，间接返回后果即可 resolve(value) } })}Promise.reject = function(error) { return new Promise((resolve,reject) => { reject(error) })}Promise.all = function(promises) { return new Promise((resolve,reject) => { // 申明一个变量来判断数组中是不是都执行胜利了 let count = 0 let arr = [] for(let i = 0;i < promises.length;i++) { promises[i].then(val => { count++; arr[i] = val // 当所有都执行成了，就返回胜利 if(count === promises.length){ resolve(arr) } },err => { reject(err) }) } })}Promise.race = function(promises) { return new Promise((resolve,reject) => { // 申明一个变量来判断数组中是不是都执行胜利了 for(let i = 0;i < promises.length;i++) { promises[i].then(val => { resolve(val) },err => { reject(err) }) } })}
手写Promise代码-Class版本
class Promise { // 构造方法 constructor(excutor) { // 增加两个默认属性 this.PromiseState = 'pending' this.PromiseResult = null // 定义一个回调应用 this.callbacks = [] // 函数外面的this指向window，所以保留下 const that = this; // resolve函数 function resolve(data) { // PromiseState只能批改一次，不是pending状态间接retrun if(that.PromiseState !== 'pending') return // 1.批改对象的状态（PromiseState） that.PromiseState = 'fulfilled' // 2.批改对象后果值（PromiseResult） that.PromiseResult = data // 调用胜利函数 // 这个定时器为了体现异步 setTimeout(() => { that.callbacks.forEach(element => { element.onResolved(data) }); }) } // reject函数 function reject(data) { // PromiseState只能批改一次，不是pending状态间接retrun if(that.PromiseState !== 'pending') return // 1.批改对象的状态（PromiseState） that.PromiseState = 'rejected' // 2.批改对象后果值（PromiseResult） that.PromiseResult = data // 调用胜利函数 // 这个定时器为了体现异步 setTimeout(() => { that.callbacks.forEach(element => { element.onRejected(data) }); }) } // 兼容 throw 抛出异样 try { // 同步调用 《执行器函数》 excutor(resolve,reject) }catch(err) { reject(err) } } then(onResolved,onRejected) { const that = this if(typeof onRejected !== 'function') { onRejected = error => { throw error } } if(typeof onResolved !== 'function') { onResolved = value => value } return new Promise((resolve,reject) => { // 封装函数 function callback(type) { try{ // 获取回调函数的执行后果 let result = type(that.PromiseResult) // 判断以后数据是不是一个Promise if(result instanceof Promise) { // 如果是，那必定能够调用then办法 result.then((val) => { resolve(val) },(err) => { reject(err) }) }else { // 如果不是，间接返回后果即可 resolve(result) } }catch(err){ reject(err) } } if(this.PromiseState === 'fulfilled') { // 这个定时器为了体现异步 setTimeout(() => { callback(onResolved) }) } if(this.PromiseState === 'rejected') { // 这个定时器为了体现异步 setTimeout(() => { callback(onRejected) }) } if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved: function() { callback(onResolved) }, onRejected: function() { callback(onRejected) } }) } }) } catch(onResolved,onRejected) { return this.then(undefined,onRejected) } static resolve = function(value) { return new Promise((resolve,reject) => { if(value instanceof Promise) { // 如果是，那必定能够调用then办法 value.then((val) => { resolve(val) },(err) => { reject(err) }) }else { // 如果不是，间接返回后果即可 resolve(value) } }) } static reject (error) { return new Promise((resolve,reject) => { reject(error) }) } static all (promises) { return new Promise((resolve,reject) => { // 申明一个变量来判断数组中是不是都执行胜利了 let count = 0 let arr = [] for(let i = 0;i < promises.length;i++) { promises[i].then(val => { count++; arr[i] = val // 当所有都执行成了，就返回胜利 if(count === promises.length){ resolve(arr) } },err => { reject(err) }) } }) } static race (promises) { return new Promise((resolve,reject) => { // 申明一个变量来判断数组中是不是都执行胜利了 for(let i = 0;i < promises.length;i++) { promises[i].then(val => { resolve(val) },err => { reject(err) }) } }) }}