前端知识整理

Appearance

高频手写 ​

1.Promise相关 ​

1) Promise.resolve ​

核心功能

  • 传参为一个Promise，则直接返回它
  • 传参为一个thenable对象,返回的Promise会跟随这个对象，采用它的最终状态作为自己的状态。
  • 其他情况,直接返回以该值为成功状态的promise对象

实现

js
Promise.resolve = (param) => {
    if(param instanceof Promise) return param
    return new Promise((resolve,reject) => {
        if(param && param.then && typeof param.then === 'function') {
            // param 状态变为成功会调用resolve, 将新Promise的状态变为成功，反之亦然
            param.then(resolve,reject)
        }else{
            return resolve(param)
        }
    })
}

测试

js
const promise1 = Promise.resolve(123);

promise1.then((value) => {
  console.log(value);
  // expected output: 123
});

2) Promise.reject ​

核心功能

  • 返回一个带有拒绝原因的Promise对象

实现

js
Promise.reject = function (reason) {
    return new Promise((resolve,reject) => {
        reject(reason)
    })
}

测试

js
function resolved(result) {
  console.log('Resolved');
}

function rejected(result) {
  console.error(result);
}

Promise.reject(new Error('fail')).then(resolved, rejected);
// expected output: Error: fail

3) Promise.finally ​

核心功能

  • 无论当前 Promise 是成功还是失败，调用finally之后都会执行 finally 中传入的函数，并且将值原封不动的往下传。

实现

js
Promise.prototype.finally = function(callback) {
  this.then(value => {
    return Promise.resolve(callback()).then(() => {
      return value;
    })
  }, error => {
    return Promise.resolve(callback()).then(() => {
      throw error;
    })
  })
}

4) Promise.all ​

核心功能

  • 传入一个空的可迭代对象，则直接进行resolve
  • 如果参数中有一个promise失败，那么Promise.all返回的promise对象失败,且reject的是第一个抛出的错误信息
  • 在任何情况下，Promise.all返回的promise的完成状态的结果都是一个数组,数组返回值顺序与原可迭代对象一一对应
js
Promise.all = function(promises) {
    return new Promise((resolve,reject) => {
        let result = [];
        let resolveCnt = 0;
        let len = promise.length;
        if(len === 0) {
            resolve(result);
            return
        }

        promises.forEach((promise,index)=>{
            // 为什么不是直接promise.then，因为promise可能不是一个promise对象
            Promise.resolve(promise).then(value=>{
                result[index] = value
                resolveCnt++
                if(resolveCnt === len)resolve(result)
            }).catch(reason=>{
                reject(reason)
            })
        })
    })
}

5) Promise.allSettled ​

核心功能

  • 返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果

实现

js
Promise.allSettled =(promises)=>{
  return new Promise((resolve, reject) => {
    let n = promises.length, result=[]
    let settledCount = 0;
    if(n == 0 )resolve([])
    function settle(i, elem) {
      result[i] = elem;
      settledCount++;
      if (settledCount === n) {
        resolve(result);
      }
    }
    
    promises.forEach((promise,index) => {
        promise.then(value => {
            settle(index,{
                status: 'fulfilled',
                value: value
            })
        },reason => {
            settle(index,{
                status: 'reject',
                value: reason
            })
        })
    })
  });
}

测试

js
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result)));
// expected output:
// {status: 'fulfilled', value: 3}
// {status: 'reject', value: 'foo'}

6) Promise.race ​

race的实现很简单，只要有一个promise执行完(不论resolve还是reject)，直接resolve并停止执行

实现

js
Promise.race = function(promises){
    return new Promise((resolve,rejct) => {
        let len = promises.length
        if(len === 0)return

        promises.forEach((promise,index) => {
            promise.then((value)=>{
                resolve(value)
                return
            },(reason)=>{
                reject(reason)
                return
            })
        })
    })
}

7) 手写一个Promise ​

  • 可以把 Promise 看成一个状态机。初始是 pending 状态，可以通过函数 resolve和 reject ，将状态转变为 resolved或者 rejected 状态，状态一旦改变就不能再次变化。
  • then 函数会返回一个 Promise 实例，并且该返回值是一个新的实例而不是之前的实例。因为 Promise 规范规定除了 pending 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 then 调用就失去意义了。
  • 对于 then来说，本质上可以把它看成是 flatMap
js
// 三种状态
const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";
// promise 接收一个函数参数，该函数会立即执行
function MyPromise(fn) {
  let _this = this;
  _this.currentState = PENDING;
  _this.value = undefined;
  // 用于保存 then 中的回调，只有当 promise
  // 状态为 pending 时才会缓存，并且每个实例至多缓存一个
  _this.resolvedCallbacks = [];
  _this.rejectedCallbacks = [];

  _this.resolve = function (value) {
    if (value instanceof MyPromise) {
      // 如果 value 是个 Promise，递归执行
      return value.then(_this.resolve, _this.reject)
    }
    setTimeout(() => { // 异步执行，保证执行顺序
      if (_this.currentState === PENDING) {
        _this.currentState = RESOLVED;
        _this.value = value;
        _this.resolvedCallbacks.forEach(cb => cb());
      }
    })
  };

  _this.reject = function (reason) {
    setTimeout(() => { // 异步执行，保证执行顺序
      if (_this.currentState === PENDING) {
        _this.currentState = REJECTED;
        _this.value = reason;
        _this.rejectedCallbacks.forEach(cb => cb());
      }
    })
  }
  // 用于解决以下问题
  // new Promise(() => throw Error('error))
  try {
    fn(_this.resolve, _this.reject);
  } catch (e) {
    _this.reject(e);
  }
}

MyPromise.prototype.then = function (onResolved, onRejected) {
  var self = this;
  // 规范 2.2.7，then 必须返回一个新的 promise
  var promise2;
  // 规范 2.2.onResolved 和 onRejected 都为可选参数
  // 如果类型不是函数需要忽略，同时也实现了透传
  // Promise.resolve(4).then().then((value) => console.log(value))
  onResolved = typeof onResolved === 'function' ? onResolved : v => v;
  onRejected = typeof onRejected === 'function' ? onRejected : r => throw r;

  if (self.currentState === RESOLVED) {
    return (promise2 = new MyPromise(function (resolve, reject) {
      // 规范 2.2.4，保证 onFulfilled，onRjected 异步执行
      // 所以用了 setTimeout 包裹下
      setTimeout(function () {
        try {
          var x = onResolved(self.value);
          resolutionProcedure(promise2, x, resolve, reject);
        } catch (reason) {
          reject(reason);
        }
      });
    }));
  }

  if (self.currentState === REJECTED) {
    return (promise2 = new MyPromise(function (resolve, reject) {
      setTimeout(function () {
        // 异步执行onRejected
        try {
          var x = onRejected(self.value);
          resolutionProcedure(promise2, x, resolve, reject);
        } catch (reason) {
          reject(reason);
        }
      });
    }));
  }

  if (self.currentState === PENDING) {
    return (promise2 = new MyPromise(function (resolve, reject) {
      self.resolvedCallbacks.push(function () {
        // 考虑到可能会有报错，所以使用 try/catch 包裹
        try {
          var x = onResolved(self.value);
          resolutionProcedure(promise2, x, resolve, reject);
        } catch (r) {
          reject(r);
        }
      });

      self.rejectedCallbacks.push(function () {
        try {
          var x = onRejected(self.value);
          resolutionProcedure(promise2, x, resolve, reject);
        } catch (r) {
          reject(r);
        }
      });
    }));
  }
};
// 规范 2.3
function resolutionProcedure(promise2, x, resolve, reject) {
  // 规范 2.3.1，x 不能和 promise2 相同，避免循环引用
  if (promise2 === x) {
    return reject(new TypeError("Error"));
  }
  // 规范 2.3.2
  // 如果 x 为 Promise，状态为 pending 需要继续等待否则执行
  if (x instanceof MyPromise) {
    if (x.currentState === PENDING) {
      x.then(function (value) {
        // 再次调用该函数是为了确认 x resolve 的
        // 参数是什么类型，如果是基本类型就再次 resolve
        // 把值传给下个 then
        resolutionProcedure(promise2, value, resolve, reject);
      }, reject);
    } else {
      x.then(resolve, reject);
    }
    return;
  }
  // 规范 2.3.3.3.3
  // reject 或者 resolve 其中一个执行过得话，忽略其他的
  let called = false;
  // 规范 2.3.3，判断 x 是否为对象或者函数
  if (x !== null && (typeof x === "object" || typeof x === "function")) {
    // 规范 2.3.3.2，如果不能取出 then，就 reject
    try {
      // 规范 2.3.3.1
      let then = x.then;
      // 如果 then 是函数，调用 x.then
      if (typeof then === "function") {
        // 规范 2.3.3.3
        then.call(
          x,
          y => {
            if (called) return;
            called = true;
            // 规范 2.3.3.3.1
            resolutionProcedure(promise2, y, resolve, reject);
          },
          e => {
            if (called) return;
            called = true;
            reject(e);
          }
        );
      } else {
        // 规范 2.3.3.4
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else {
    // 规范 2.3.4，x 为基本类型
    resolve(x);
  }
}

MIT Licensed

Copyright © 2021-present Leinaldo