promise其实没那么难！基于promise a+规范手写promise

一、promise解决了哪些问题？

异步并发待所有异步任务结束之后再执行我们的业务逻辑。
回调嵌套

二、promise特点1. 每个promise都有三个状态，pending等待状态 fulfilled成功态 rejected失败态2. 状态不可逆（若状态变成了成功态，则会一直维持这个状态）3. 每个promise都有一个then方法传入两个参数一个是成功回调（参数是resolve执行时传的值）一个是失败回调（参数是reject执行时传的值）4. new Promise是同步执行的5. 抛出异常的话也会变成失败状态走失败的回调三、简单示例new Promise((resolve,reject) => {// 1.状态从pending改为fulfilled成功态，执行成功的回调resolve('success')// 2.状态从pending改为rejected失败态，执行失败的回调// reject('fail')// throw new Error('fail')}).then((data) => {console.log('success', data);}, (err) => {console.log('fail', err);})四、手写实现0.0.1版
const PENDING = 'pending';const FULFILLED = 'fulfilled';const REJECTED = 'rejected';class MyPromise {constructor(executor) {// 初始状态为pending等待状态this.status = PENDING;const resolve = (value) => {// 执行resolve状态变为成功态this.status = FULFILLED;};const reject = (reason) => {// 执行reject状态变为失败态this.status = REJECTED;};try {// 执行传入的回调函数executor(resolve, reject);} catch (e) {// 回调函数执行出错，也会执行rejectreject(e);}}}由于promise的状态一旦转成了成功态或者失败态，就不能再改变状态了，所以我们需要加个判断，只有当状态为pending等待态的时候，才能将状态改为成功或失败，所以当状态变为了成功，再去调用resolve的话，无法满足判断条件，就不会继续执行了。
0.0.2版
const PENDING = 'pending';const FULFILLED = 'fulfilled';const REJECTED = 'rejected';class MyPromise {constructor(executor) {// 初始状态为pending等待状态this.status = PENDING;const resolve = (value) => {// 执行resolve状态变为成功态if (this.status === PENDING) {this.status = FULFILLED;}};const reject = (reason) => {// 执行reject状态变为失败态if (this.status === PENDING) {this.status = REJECTED;}};try {// 执行传入的回调函数executor(resolve, reject);} catch (e) {// 回调函数执行出错，也会执行rejectreject(e);}}}这样调用的话，状态改变之后就不会再改了
let p = new MyPromise((resolve,reject) => {resolve('success')reject('success')})console.log('p: ', p);接下来我们实现一下promise实例的then方法，then方法的特点在上面有提到哦
0.0.3版
class MyPromise {constructor(executor) {// 赋值到this上是为了方便在then方法中调用// 初始状态为pending等待状态this.status = PENDING;// 成功回调的参数this.value = https://tazarkount.com/read/undefined;// 失败回调的参数this.reason = undefined;const resolve = (value) => {// 执行resolve状态变为成功态保存用户传入的参数if (this.status === PENDING) {this.status = FULFILLED;this.value = value;}};const reject = (reason) => {// 执行reject状态变为失败态保存用户传入的参数if (this.status === PENDING) {this.status = REJECTED;this.reason = reason;}};try {// 执行传入的回调函数executor(resolve, reject);} catch (e) {// 回调函数执行出错，也会执行rejectreject(e);}}// 接收两个函数作为参数，参数是用户传的，传的第一个回调就代表成功的回调，传的第二个回调就代表失败的回调then(onFulfilled, onRejected) {// 根据当前的状态，执行对应的回调。回调的参数为用户调用resolve或者reject传入的数据if (this.status === FULFILLED) {onFulfilled(this.value);}if (this.status === REJECTED) {onRejected(this.reason);}}}调用时
let p = new MyPromise((resolve,reject) => {resolve('success')})p.then((value) => {console.log(value);// success}, (reason) => {console.log(reason);}) 但是如果是在异步代码里面调用resolve方法，就不会执行成功回调了，例如：
let p = new MyPromise((resolve,reject) => {setTimeout(() => {resolve('success')}, 300);})p.then((value) => {console.log(value);// success}, (reason) => {console.log(reason);})这是因为代码执行到settimeout，会将回调放入宏任务队列，而不是立即执行，所以会先执行then方法，这个时候settimeout并未执行，所以resolve也未执行，此时的status = 'pending'，then方法的两个回调都不会执行。
因此，我们想要执行异步代码里的resolve或者reject函数的话，需要在执行then方法的时候，先把成功回调或失败回调先存起来，直到异步代码执行到resolve，再依次执行回调。实现方式就是采用发布订阅模式，借助两个数组，一个是成功回调的数组，一个是失败回调的数组，在调用then时，若status = pending，就把回调存入对应的数组，之后在resolve（reject）函数中依次调用成功（失败）回调的数组的回调。
【promise其实没那么难！基于promise a+规范手写promise】0.0.4版
const PENDING = 'pending';const FULFILLED = 'fulfilled';const REJECTED = 'rejected';class MyPromise {constructor(executor) {// 初始状态为pending等待状态this.status = PENDING;// 成功回调的参数this.value = https://tazarkount.com/read/undefined;// 失败回调的参数this.reason = undefined;this.onFulFilledCallbacks = []; // 存放成功的回调this.onRejectedCallbacks = []; // 存放失败的回调const resolve = (value) => {// 执行resolve状态变为成功态保存用户传入的参数if (this.status === PENDING) {this.status = FULFILLED;this.value = value;this.onFulFilledCallbacks.forEach((fn) => fn()); // 依次执行成功回调队列的回调}};const reject = (reason) => {// 执行reject状态变为失败态保存用户传入的参数if (this.status === PENDING) {this.status = REJECTED;this.reason = reason;this.onRejectedCallbacks.forEach((fn) => fn()); // 依次执行失败回调队列的回调}};try {// 执行传入的回调函数executor(resolve, reject);} catch (e) {// 回调函数执行出错，也会执行rejectreject(e);}}// 接收两个函数作为参数，参数是用户传的，传的第一个回调就代表成功的回调，传的第二个回调就代表失败的回调then(onFulfilled, onRejected) {// 根据当前的状态，执行对应的回调。回调的参数为用户调用resolve或者reject传入的数据if (this.status === FULFILLED) {onFulfilled(this.value);}if (this.status === REJECTED) {onRejected(this.reason);}// 状态为pending时将用户传的回调存放到各自的队列中（若用户没有调用resolve或reject，则不会执行队列中的回调）if (this.status === PENDING) {this.onFulFilledCallbacks.push(() => {onFulfilled(this.value);});this.onRejectedCallbacks.push(() => {onRejected(this.reason);});}}}调用时
let p = new MyPromise((resolve,reject) => {setTimeout(() => {resolve('success')}, 300);})p.then((value) => {console.log(value, 1);// success 1}, (reason) => {console.log(reason);})p.then((value) => {console.log(value, 2);// success 2}, (reason) => {console.log(reason);})接下来我们来分析then链式调用的规则
(1)如果then方法中成功回调或失败回调返回的是一个非promise值，则将这个值传递给外层下一次then的成功回调参数
(2)如果then方法中成功回调或失败回调的执行报错了，则将错误信息传递给外层下一次then的失败回调参数
let pp = new Promise((resolve,reject) => {resolve(1)}).then((data) => {console.log('第一次 success', data);//第一次 success 1return 100;// throw new Error('error')}, (err) => {console.log('第一次 fail', err);}).then((data) => {console.log('第二次 success', data);//第二次 success 100}, (err) => {console.log('第二次 fail', err);})(3)如果then方法中成功回调返回的是一个promise值，

若在返回的这个promise内部调用了resolve函数，则将传入resolve的参数传递给外层下一次then的成功回调参数；
若在返回的这个promise内部调用了reject函数，则将传入reject的参数，传递给外层下一次then的失败回调参数；

promise其实没那么难！ 基于promise a+规范手写promise

promise其实没那么难！基于promise a+规范手写promise