文章图片

• 2021/04/10 复习

文章图片

导航 [[深入01] 执行上下文](https://juejin.im/post/684490...
[[深入02] 原型链](https://juejin.im/post/684490...
[[深入03] 继承](https://juejin.im/post/684490...
[[深入04] 事件循环](https://juejin.im/post/684490...
[[深入05] 柯里化 偏函数 函数记忆](https://juejin.im/post/684490...
[[深入06] 隐式转换 和 运算符](https://juejin.im/post/684490...
[[深入07] 浏览器缓存机制（http缓存机制）](https://juejin.im/post/684490...
[[深入08] 前端安全](https://juejin.im/post/684490...
[[深入09] 深浅拷贝](https://juejin.im/post/684490...
[[深入10] Debounce Throttle](https://juejin.im/post/684490...
[[深入11] 前端路由](https://juejin.im/post/684490...
[[深入12] 前端模块化](https://juejin.im/post/684490...
[[深入13] 观察者模式 发布订阅模式 双向数据绑定](https://juejin.im/post/684490...
[[深入14] canvas](https://juejin.im/post/684490...
[[深入15] webSocket](https://juejin.im/post/684490...
[[深入16] webpack](https://juejin.im/post/684490...
[[深入17] http 和 https](https://juejin.im/post/684490...
[[深入18] CSS-interview](https://juejin.im/post/684490...
[[深入19] 手写Promise](https://juejin.im/post/684490...
[[深入20] 手写函数](https://juejin.im/post/684490...
[[react] Hooks](https://juejin.im/post/684490...
[[部署01] Nginx](https://juejin.im/post/684490...
[[部署02] Docker 部署vue项目](https://juejin.im/post/684490...
[[部署03] gitlab-CI](https://juejin.im/post/684490...
[[源码-webpack01-前置知识] AST抽象语法树](https://juejin.im/post/684490...
[[源码-webpack02-前置知识] Tapable](https://juejin.im/post/684490...
[[源码-webpack03] 手写webpack - compiler简单编译流程](https://juejin.im/post/684490...
[[源码] Redux React-Redux01](https://juejin.im/post/684490...
[[源码] axios ](https://juejin.im/post/684490...
[[源码] vuex ](https://juejin.im/post/684490...
[[源码-vue01] data响应式 和 初始化渲染 ](https://juejin.im/post/684490...
[[源码-vue02] computed 响应式 - 初始化，访问，更新过程 ](https://juejin.im/post/684490...
前置知识 一些单词

race：比赛，竞赛 Settled：结束execute：执行 executor：执行者detected：检测

promise复习

• 方法
  
  • promise.then() ---------------------------- 返回新的promise
  • promise.catch() --------------------------- 返回新的promise
  • promise.finally() -------------------------- 不管状态如何都会执行
  • promise.all() ------------------------------ 所有resolve则fulfilled，一个reject则rejected
  • promise.any() ---------------------------- 一个resolve则fulfilled，所有reject则rejected
  • promsie.race() ---------------------------- 第一个resolve则fulfiled，第一个reject则rejected
• 特点
  
  • 对象的状态不受外界影响，只有异步操作的结果才可以决定当前是哪一种状态，任何其他操作都不能改变这个状态
  • 状态一旦改变就不会再变，任何时候都可以得到这个结果
• 缺点
  
  • 无法取消promise，一旦新建就会立即执行，中途无法取消
  • 如果不设置回调，内部抛出的错误，不会反应到外部
  • 当处于pending状态时，无法得知当前进展到哪一个阶段 ( 刚开始?即将结束?)

• Promise的用法
  

  const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } }); promise.then(function(value) { // success }, function(error) { // failure }); 说明： (1) Promise构造函数接受一个 ( 函数 ) 作为参数 (2) ( 参数函数 ) 又接受两个函数作为参数 ( resolve函数 ) 和 ( reject函数 ) (3) resolve() - 函数是在状态由 pending->fulfilled 时，即成功时调用，并将异步操作的结果作为参数传递出去 - resolve()函数的参数，除了是正常的 ( 值 ) 以外，还可以是一个 ( promise实例 ) (4) reject() - 函数是在状态由 pending->rejected时，即失败时调用，并将异步操作报出的错误作为参数传递出去 - reject()函数的参数，通常是 ( Error对象 ) 的实例 (5) then() 方法接受两个函数作为参数 - 第一个参数函数在resolve时被调用 - 第二个参数函数在reject时被调用，参数分别是终值和拒因，第二个参数函数可选

  
  

• 【[深入19]|[深入19] 手写Promise】resolve()
  
  • resolve()和reject()两个函数并不会终止promise，后面的代码还是会执行
  • 通常用 return resolve() return reject() 这样的方式结束promise构造函数代码的运行
  • resolve() 函数的参数是一个promise实例的情况

  let count = 1 setInterval(() => {console.log(count++)}, 1000)const p1 = new Promise(function (resolve, reject) { setTimeout(() => { console.log('p1中的代码开始执行') reject(new Error('fail')) }, 3000) })const p2 = new Promise(function (resolve, reject) { setTimeout(() => { console.log('p2中的代码开始执行'); resolve(p1) }, 1000) })p2 .then(result => console.log(result)) .catch(error => console.log(error))分析： (1) p2的状态在 1s 后改变为成功，resolve(p1)的参数p1还是一个promise，导致p2的状态失效 (2) p2的状态失效，则p2的状态由p1决定 (3) p1的状体在 3s 后改变为失败， reject(new Error('fail'))，所以在 3s 后，p2的状态也变成了失败 (4) p2的失败状态由 p2.catch()捕获

  
  

• then()
  
  • 返回一个新的promise实例，因此可以采用链式写法
  • 如果then()方法链式调用，上一个then()可能返回的是一个promise实例，则后一个then()的回调函数需要等待前一个then()状态改变后才会调用
• catch()
  
  • 返回一个新的promise实例，主要作用是捕获promise过程中的错误
  • catch()方法返回的是一个promise对象，因此.catch()后面可以继续调用.then()
  • catch()是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数
  • 只要是catch()前面的then()和promise内部抛出的错误都能被catch()捕获
  • 注意：
    
    • 一个在then()中只需要添加成功状态后的回调，而失败的状态由catch()来负责捕获
• finally()
  
  • 不管promise对象最后是什么状态，都会执行的操作
  • finally()的回调函数不接受任何参数，因为finally()的回调函数中的操作和状态无关
• all()
  
  • 所有resolve()则fulfilled，一个reject()则rejected
• any()
  
  • 一个resolve()则fulfilled，所有reject()则rejected
    
    • 和all()相反
• race()
  
  • 一个resolve()则fulfilled，一个reject()则rejected
• allSettled()
  
  • 在所有参数的实例都返回结果时，包装实例才会结束
  • 比如等待所有请求完成，无论成功失败，都结束loading动画

手写Promise

class Promise { constructor(executor) { // 参数不是函数，报错 if (typeof executor !== 'function') { throw new TypeError(`Promise resolver ${executor} is not a function`) } this.init() // 初始化值 try { executor(this.resolve, this.reject) } catch (err) { // 使用 try...catch 的目的是为了把executor()中的错误抛出给then的回调去捕获 this.reject(err) } }init = () => { this.value = https://www.it610.com/article/null // 终值 this.reason = null // 拒因 this.state = Promise.PENDING // 状态this.onFulfilledCallbacks = [] // 成功回调, 在then()方法中push，resolve()时执行 this.onRejectedCallbacks = [] // 失败回调，在then()方法中push，reject()时执行 }resolve = (value) => { // 成功后的一系列操作 (状态的改变，成功回调的执行 ) // 状态的改变：pending -> fulfilled// console.log(this.constructor === Promise) // true // this 在箭头函数中，作用域绑定在父级执行上下文，即定义时所在的对象 // 即this相当于父级的this，这里又是在勾走函数中，所以this指向了实例对象 if (this.state === Promise.PENDING) { this.state = Promise.FULFILLED this.value = https://www.it610.com/article/valuethis.onFulfilledCallbacks.forEach(fn => fn(this.value)) // 当promise的参数函数中有异步操作时，then方法会优先于resolve()或者reject()先执行 // 这样就是导致执行then()方法时，状态是pending状态，因为状态的改变是在resolve()或reject()中改变的，而他们因为异步都没执行 // 这是需要用一个数组来存储将来才会执行的onFulfilled函数 // 这里push进onFulfilledCallbacks的函数，将在resolve()函数中去执行 } }reject = (reason) => { // 失败后的一系列操作 (状态的改变，失败回调的执行 ) // 状态的改变：pending -> rejected if (this.state === Promise.PENDING) { this.state = Promise.REJECTED this.reason = reasonthis.onRejectedCallbacks.forEach(fn => fn(this.reason)) } }then = (onFulfilled, onRejected) => { // 参数校验，穿透效果，即then不传任何参数具有穿透效果 if (typeof onFulfilled !== 'function') { onFulfilled = value => value } // 参数校验，穿透效果，即then不传任何参数具有穿透效果 if (typeof onRejected !== 'function') { onRejected = reason => { throw reason } }// then()方法返回的是一个新的 promse 实例 // 因为返回新的promise实例，可以可以实现链式调用 let promise2 = new Promise((resolve2, reject2) => { // 执行onFulfilled函数的条件 if (this.state === Promise.FULFILLED) { setTimeout(() => { // 这里中间的then()方法中的回调 onFulfilled() 函数是有返回值的 // 中间then()参数函数onFulfilled()的返回值，会被当做下一个then回调的参数传入 try { const x = onFulfilled(this.value) Promise.resolvePromise(promise2, x, resolve2, reject2) } catch (err) { reject2(err) }}) } if (this.state === Promise.REJECTED) { setTimeout(() => { try { const x = onRejected(this.reason) Promise.resolvePromise(promise2, x, resolve2, reject2) } catch (err) { reject2(err) }}) } if (this.state === Promise.PENDING) { // 如果状态是 pending // 当promise的参数函数中有异步操作时，then方法会优先于resolve()或者reject()先执行 // 这样就是导致执行then()方法时，状态是pending状态，因为状态的改变是在resolve()或reject()中改变的，而他们因为异步都没执行 // 这时需要用一个数组来存储将来才会执行的onFulfilled函数 // 这里push进onFulfilledCallbacks的函数，将在resolve()函数中去执行 this.onFulfilledCallbacks.push((value) => { // 这里仍然需要使用setTimeout，因为这个函数是在resolve()中执行的，如果resolve()后面任然后同步代码，要保证同步代码先执行 setTimeout(() => { try { const x = onFulfilled(value) Promise.resolvePromise(promise2, x, resolve2, reject2) } catch (err) { reject2(err) } }) }) this.onRejectedCallbacks.push((reason) => { setTimeout(() => { try { const x = onRejected(reason) Promise.resolvePromise(promise2, x, resolve2, reject2) } catch (err) { reject2(err) }}) }) } }) return promise2 } }// 这里使用静态属性，是为了避免 魔法字符串 Promise.PENDING = 'pending' Promise.FULFILLED = 'fulfilled' Promise.REJECTED = 'rejected' Promise.resolvePromise = function (promise2, x, resolve, reject) { // x 与 promise2 相等 if (promise2 === x) { reject(new TypeError('chainning cycle detected for promise')) } // x 是 Promise if ( x instanceof Promise) { x.then(value => { // resolve(value) Promise.resolvePromise(promise2, value, resolve, reject) }, reason => { reject(reason) }) } else if (x !== null && (typeof x === 'object' || typeof x === 'function')) { // x 为对象或函数 try { const then = x.then if (typeof then === 'function') { then.call( x, value => { if (called) return called = true MyPromise.resolvePromise(promise2, value, resolve, reject) }, reason => { if (called) return called = true reject(reason) } ) } else { if (called) return called = true resolve(x) } } catch (e) { if (called) return called = true reject(e) } } else { resolve(x) } }const promise = new Promise((resolve, reject) => { // throw new Error('出错了') console.log(1) setTimeout(() => { console.log(4) resolve(6) console.log(5) }) console.log(2) }) .then( value => { console.log(value, 'value') return new Promise(resolve => { resolve(new Promise(resolve3 => { resolve3(7) })) }) }, reason => { console.log(reason, 'reason') }) .then( value => { console.log(value, 'vvvvvvvvvvvv') }, reason => { console.log(reason) }) console.log(3)// then // then中的两个参数回调函数需要异步，setTimeout解决 // 如果promise参数函数内部抛出错误，需要在then()中捕获 => try ... catch // 如果promise中存在异步，then的回调不会执行 => 因为在执行then方法的时，state === 'pending' 不满足执行then两个回调的任何一个，而当setTimeout中的 resolve() 执行的时，then执行过了就不会再继续执行

new Promise()的参数必须是函数，非函数时会报错

原生： new Promise(1) TypeError: Promise resolver 1 is not a function模拟实现： class Promise { constructor(executor) { if (typeof executor !== 'function') { // 参数必须是函数，不是函数抛出错误 throw new TypeError(`Promise resolver ${executor} is not a function`) } executor(this.resolve, this.reject) } } const promise = new Promise() // TypeError: Promise resolver undefined is not a function

resolve()方法的主要作用

• (1) 把状态 ( status ) 从 ( pending -> fulfilled )
• (2) 把终值 ( value ) 赋值为 resolve()函数传入的 ( 参数 )
• (3) 把 ( onFulfilledCallback数组 ) 中的函数，依此取出执行
  
  • 如果promise中存在异步操作时，then()比resolve()先执行
  • 所以在then()方法中，需要向onFulfilledCallback数组中push进一个将来在resolve()中才会执行的函数
  rejected()方法的主要作用
• (1) 把状态 ( status ) 从 ( pending -> rejected )
• (2) 把拒因 ( value ) 赋值为 reject()函数传入的 ( 参数 )
• (3) 把 ( onRejectedCallback数组 ) 中的函数，依此取出执行
  
  • 如果promise中存在异步操作时，then()比resolve()先执行
  • 所以在then()方法中，需要向onFulfilledCallback数组中push进一个将来在reject()中才会执行的函数

  class Promise { constructor(executor) { if (typeof executor !== 'function') { // 参数必须是函数，不是函数抛出错误 throw new TypeError(`Promise resolver ${executor} is not a function`) } this.init() executor(this.resolve, this.reject) } init = () => { this.value = https://www.it610.com/article/null // 终值，初始化 this.reason = null // 拒因，初始化 this.status = Promise.PENDING // 状态，初始化时pending this.onFulfilledCallbacks = [] // 成功回调, 在then()方法中push，resolve()时执行 this.onRejectedCallbacks = [] // 失败回调，在then()方法中push，reject()时执行 } resolve = (value) => { if (this.status === Promise.PENDING) { this.status = Promise.FULFILLED this.value = https://www.it610.com/article/value this.onFulfilledCallbacks.forEach(fn => fn(value)) } } reject = (reason) => { if (this.status === Promise.PENDING) { this.status === Promise.REJECTED this.reason = reason this.onRejectedCallbacks.forEach(fn => fn(resaon)) } } then = (onFulfilled, onRejected) => { if (this.status === Promise.FULFILLED) { onFulfilled(this.value) } if (this.status === Promise.REJECTED) { onRejected(this.reason) } if (this.status === Promise.PENDING) { this.onFulfilledCallbacks.push((value) => onFulfilled(value)) this.onRejectedCallbacks.push((reason) => onRejected(reason)) } } }Promise.PENDING = 'pending' Promise.FULFILLED = 'fulfilled' Promise.REJECTED = 'rejected'const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(1) }) }).then(value => { console.log(value) }, reason => { console.log(reason) })

  
  

then()方法没有传参时

• 需要重写 onFulfilled函数，返回当前的终值 this.value
• 需要重写 onRejected函数，返回当前的拒因 this.reason，并抛出
  

  then = (onFulfilled, onRejected) => { if (typeof onFulfilled !== this.FUNCTION) { // 没传onFulfilled参数，就重写该函数 // 将调用参数原样返回 // 这里没有直接写 (typeof onFulfilled !== 'function') 防止魔法字符串 onFulfilled = value => value } if (typeof onRejected !== this.FUNCTION) { // 没传onRejected参数，就重写该函数 // 抛出reason onRejected = reason => { throw reason } } if (this.status === this.FULFILLED) { // 是fulfilled状态是，才执行onFulfilled函数，参数是当前的终值 // 即状态改变时为成功时，添加的回调函数 // 这里传参和没有传参都会执行，没传参是执行重写过后的onFulfilled onFulfilled(this.value) } if (this.status === this.REJECTED) { onRejected(this.reason) } }

  
  

then()保证执行顺序1

• then()需要在同步代码执行完后，then()中的回调函数才能执行
  

  console.log(1) const promise = new Promise((resolve, reject) => { console.log(2) resolve(5) console.log(3) }) .then(value => { console.log(value) }, reason => { console.log(reason) }) console.log(4)问题：如何保证执行顺序是12345 解决：then()是异步方法，即then()方法的参数回调需要在resolve()或reject()方法执行后才执行，用 ( 定时器 ) 解决 说明：如果不用定时器执行顺序是 then = (onFulfilled, onRejected) => { if (typeof onFulfilled !== Promise.FUNCTION) { onFulfilled = value => value } if (typeof onRejected !== Promise.FUNCTION) { onRejected = reason => reason } if (this.status === Promise.FULFILLED) { setTimeout(() => { // 用setTimeout()来模拟异步执行onFulfilled，保证同步代码执行后再执行onFulfilled onFulfilled(this.value) }) } if (this.status === Promise.REJECTED) { setTimeout(() => { // 用setTimeout()来模拟异步执行onRejected，保证同步代码执行后再执行onRejected onRejected(this.reason) }) } if (this.status === Promise.PENDING) { this.onFulfilledCallbacks.push((value) => onFulfilled(value)) this.onRejectedCallbacks.push((reason) => onRejected(reason)) } }

  
  

then()保证执行顺序2

• 当promise中有有异步代码时，then()方法会比resolve()先执行，此时statuss='pending'状态
• 而在then方法中并未添加状态是pending状态时的相关操作时，then()中的两个回调都不会执行
  

  console.log(1) new Promise((resolve, reject) => { console.log(2) setTimeout(() => resolve()) // 当这里有异步操作时，上面的代码打印只有 123，注意 4 并未打印 // 原因是then()方法在resolve()方法前执行了，因为resolve是异步的，导致 then() 中的状态还是 pending 状态 // 而在then方法中并为添加状态是pending状态时的相关操作 }).then(() =>console.log(4)) console.log(3)问题：打印出了123，但是并未打印4 分析： 1. 原因是then()方法在resolve()方法前执行了，因为resolve是异步的，导致 then() 中的状态还是 pending 状态 2. 而在then方法中并为添加状态是pending状态时的相关操作 解决： 1. 在then()方法中添加pending状态下的相关判断 - 并向 onFulfilledCallbacks 数组中push一个方方法，该方中去调用 onFulfilled 方法，参数是当前的value - 并向 onRejectedCallbacks 数组中 push 一个方法，该方中去调用 onRejected 方法，参数是当前的reason 2. 在resolve()方法中去循环 onFulfilledCallbacks 数组，并执行里面的函数，实参是 this.value 2. 在reject()方法中去循环 onRejectedCallbacks 数组，并执行里面的函数，实参是 this.reasonthen = (onFulfilled, onRejected) => { ... if (this.status === this.PENDING) { // pending状态push函数到onFulfilledCallbacks数组 this.onFulfilledCallbacks.push(value => onFulfilled(value)) this.onRejectedCallbacks.push(reason => onRejected(reason)) } } resolve = (value) => { if (this.status === this.PENDING) { this.status = this.FULFILLED this.value = https://www.it610.com/article/value this.onFulfilledCallbacks.forEach(fn => fn(this.value)) // 执行数组中的函数，并传入实参 } } reject = (reason) => { if (this.status === this.PENDING) { this.status = this.REJECTED this.reason = reason this.onRejectedCallbacks.forEach(fn => fn(this.reason)) } }

  
  

then()保证执行顺序3

console.log(1) new Promise((resolve, reject) => { console.log(2) setTimeout(() => { resolve() console.log(4) // 要保证4比5先执行，因为4是同步代码 }) }).then(() =>console.log(5)) console.log(3)问题：上面代码输出 12354 ， 而真正的promise应该输出12345 分析：因为resolve()后面还有同步代码，要保证后面的同步代码先执行 解决：在向 onFulfilledCallbacks数组中push方法时，要再用 setTimeout包装，让resolve()后面的代码先执行then = (onFulfilled, onRejected) => { ... if (this.status === this.PENDING) { this.onFulfilledCallbacks.push(value => { setTimeout(() => { // 再用setTimeout包装，保证resolve()后面的代码先于 then的回调函数 执行 onFulfilled(value) }, 0) }) this.onRejectedCallbacks.push(reason => { setTimeout(() => { onRejected(reason) }, 0) }) } }

then() 的链式调用

• then()方法返回的是新的promise实例，注意不是原来的，所以可以链式调用
• 新的promise中参数函数的resolve的是onFufiled函数执行后返回的值
  

  then = (onFulfilled, onRejected) => { // 参数校验，穿透效果，即then不传任何参数具有穿透效果 if (typeof onFulfilled !== Promise.FUNCTION) { onFulfilled = value => value } // 参数校验，穿透效果，即then不传任何参数具有穿透效果 if (typeof onRejected !== Promise.FUNCTION) { onRejected = reason => reason } const promise2 = new Promise((resolve2, reject2) => { if (this.status === Promise.FULFILLED) { setTimeout(() => { const x = onFulfilled(this.value) // 将onFulfilled函数的返回值作为resolve()的参数，传给新的 then() 方法 resolve2(x) }) } if (this.status === Promise.REJECTED) { setTimeout(() => { const x = onRejected(this.reason) reject2(x) }) } if (this.status === Promise.PENDING) { this.onFulfilledCallbacks.push((value) => { setTimeout(() => { const x = onFulfilled(value) resolve2(x) }) }) this.onRejectedCallbacks.push((reason) => { setTimeout(() => { const x = onRejected(reason) reject2(x) }) }) } }) return promise2 }

  
  

  更详细then = (onFulfilled, onRejected) => { if(typeof onFulfilled !== 'function') { onFulfilled = (value) => value } if(typeof onRejected !== 'function') { onRejected = (reason) => { throw reason } } const promise2 = new Promise((resolve, reject) => { if (this.status === Promise.FULFILLED) { setTimeout(() => { try { const x = onFulfilled(this.value) // 将onFulfilled函数的返回值作为resolve()的参数，传给新的 then() 方法 resolve(x) // promise2的resolve的时机 } catch(err) { reject(err) // promise2的reject的时机 } }) } if (this.status === Promise.REJECTED) { setTimeout(() => { try { const x = onRejected(this.reason) resolve(x) } catch (err) { reject(err) } }) } if (this.status === Promise.PENDING) { this.onFulfilledCallbacks.push((value) => { setTimeout(() => { try { const x = onFulfilled(value) resolve(x) } catch(err) { reject(err) } }) })this.onRejectedCallbacks.push((reason) => { setTimeout(() => { try { const x = onRejected(reason) resolve(x) } catch(err) { reject(err) } }) }) } })return promise2 }

  
  

Promise.all()模拟实现

• p = Promsie.all([p1, p2, p3])
• 返回值：Promise.all() 返回一个新的promise实例
• 参数：
  
  • ( 参数 ) 是一个 ( 数组 ) 或者是具有 ( Iterator ) 接口类型的数据，成员都是promsie实例
  • 如果不是promsie实例就会调用Promsie.resolve()转成promsie实例
• 作用：
  
  • 如果所有参数数组成员的状态，都变成了fulfilled，则整个状态变成fulfilled
    
    • 此时 p1,p2,p3中resolve()的返回值，将组成一个数组，传递给p的回调函数
  • 如果有一个参数数组成员的状态变成了rejected，则整个状态变成了rejected
    
    • 此时，第一个被拒绝的reject()的返回值，会传递给p的回调函数
• Promise.all()返回的是一个新的promise，即可以使用then获取resolve和reject的结果
• 参数是一个数组或者具有Iterator接口的数据
• 如果参数数组成员不是promise，就会被Promise.resolve()转成promise对象
• resolve的时机是所有参数成员都变成fulfilled状态时
• reject的时机是只要有一个rejected状态时
  Promise.all = (promises) => {
  // 返回一个新的promise实例
  return new Promise((resolve, reject) => {
  

  const arr = [] let count = 0 // 记录fulfilled状态的promise个数 const promiseArr = Array.from(promises) // 参数除了数组还可以是具有Iterator接口的数据类型 const len = promiseArr.length for (let i = 0; i < len; i++) { Promise.resolve(promiseArr[i]).then(value => { // 如果参数不是promise，会调用Promise.resolve()转成promise count ++ // 进入这里，表示成功的回调，即fulfilled状态 arr[i] = value // 将该成功的promise装进数组 if (count === len) { console.log(count, 'count') resolve(arr) // 如果count和数组总长度相等，说明都是fulfilled状态了 // 所有resolve的时机就是所有都变成fulfilled状态是resolve } }, reject) // 这里写的不完善，请看下面的最新补充 }

  
  })
  }
  const a = Promise.resolve(1)
  const b = Promise.resolve(2)
  const c = new Promise(resolve => {
  setTimeout(() => {
  

  resolve(33)

  
  })
  })
  Promise.all([a, b, c]).then(value => console.log(value, 'value'))
  

2021/4/7修改 Promise.all 模拟实现

Proimse.race()模拟实现

Promise.race = (promises) => { return new Promise((resolve, reject) => { const promiseArr = Array.from(promises) const len = promises.lengthfor(let i = 0; i < len; i++) { Promise.resolve(promiseArr[i]).then(value => { resolve(value) // 直接resolve第一个then是成功时的回调函数接收到的终值 }) } }) }

总结遇到的一些面试题 2021/04/10 (1) promise面试题1

(2) promise面试题2

资料 手写promise https://segmentfault.com/a/11...
手写promise https://juejin.im/post/684490...

推荐阅读

• 

  如今身家320亿元 85岁的梁庆德登上财富榜
• 

  冠心病中药验方有哪些
• 

  matebook e win11升级教程
• 

  抖音关于夸赞女人最经典文案,彩虹屁夸人文案
• 

  小番茄和圣女果是一样的吗 小番茄加乌梅吃了会拉肚子吗
• 

  keysight tdr测试分析
• 

  关于窃读记的资料 窃读记的介绍
• 

  蝟实
• 

  削皮的甘蔗可以冷冻吗
• 

  你们有什么好吃的零食推荐吗？
• 

  Realme Q值不值得买？
• 

  史努比电动车能上路吗 史努比电动车为什么不让上路
• 

  如何做侧手翻 怎么侧手翻
• 

  mongodb增删改查 mongodb 新增列
• 

  危险品资格证怎么办理
• 

  微法水管多少钱一米 水管多少钱一米
• 

  夏天香水可以放冰箱吗 夏天香水要放冰箱吗
• 

  干竹笋烧肉的家常做法 简单好吃的做法
• 

  明日方舟是不是游戏
• 

  打九价疫苗月经会不会推迟

• 深入理解Go之generate
• 【1057快报】深入机关，走下田间，交通普法，共创文明
• 生发知识，带你深入了解
• 深入理解|深入理解 Android 9.0 Crash 机制（二）
• 深入浅出谈一下有关分布式消息技术（Kafka）
• 使用Promise对微信小程序wx.request请求方法进行封装
• 从如何使用到如何实现一个Promise
• mysql|一文深入理解mysql
• Promise详解
• Java并发编程|Java并发编程 - 深入剖析ReentrantLock之非公平锁加锁流程（第1篇）