美文网首页
Es6 Promise 实现

Es6 Promise 实现

作者: jy789 | 来源:发表于2019-05-30 10:29 被阅读0次
// promise 状态
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

const isFn = fn => typeof fn === 'function';

class Promise {
  constructor(resolver) {
    if (!isFn(resolver)) {
      throw new TypeError('Promise 参数必须是函数');
    }

    //状态和值
    this._status = PENDING;
    this._value;

    //执行队列
    this._fulfilledQueue = [];
    this._rejectedQueue = [];

    //绑定this
    this._resolve = this._resolve.bind(this);
    this._reject = this._reject.bind(this);

    resolver(this._resolve, this._reject);
  }

  _resolve(val) {
    if (this._status !== PENDING) return;
    //因为Promise里面的函数是同步的,then是异步的
    setTimeout(() => {
      this._status = FULFILLED;
      this._value = val;
      let cb;
      while (cb = this._fulfilledQueue.shift()) {
        cb(this._value)
      }
    }, 0);
  }

  _reject(val) {
    if (this._status !== PENDING) return;
    //因为Promise里面的函数是同步的,then是异步的
    setTimeout(() => {
      this._status = REJECTED;
      this._value = val;
      let cb;
      while (cb = this._rejectedQueue.shift()) {
        cb(this._value)
      }
    }, 0);
  }

  // then 参数类型:
  //(1)值 
  //(2)函数, 返回值或者Promise
  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      // 返回一个 resolve 或者 reject 函数
      let runThen = (callback, resolver) => {
        return function (val) {
          try {
            if (!isFn(callback)) { // 判断 onFulfilled、onRejected 是否是一个 function,否的话直接透传value
              resolver(val)
            } else {
              const res = callback(val); // 判断函数返回值是否是一个 Promise
              if (res instanceof Promise) {
                res.then(resolve, reject);
              } else {
                resolver(res)
              }
            }
          } catch (err) {
            reject(err);
          }
        }
      }
      //判断当前的status
      switch (this._status) {
        case FULFILLED:
            runThen(onFulfilled, resolve)(this._value);
          break;
        case REJECTED:
            runThen(onRejected, reject)(this._value);
          break;
        case PENDING: //状态未变,将函数添加到执行队列,等待状态改变后执行
          this._fulfilledQueue.push(runThen(onFulfilled, resolve));
          this._rejectedQueue.push(runThen(onRejected, reject));
          break;
      }
    });
  }

  static resolve(promise) {
    // 判断 promise 是否是一个 promise 对象
    if (promise instanceof Promise) {
      return promise;
    } else {
      return new Promise(resolve => {
        resolve(promise);
      });
    }
  }

  static reject(err){
    return new Promise((resolve, reject) => reject(err));
  }

  catch(onRejected) {
    return this.then(undefined, onRejected);
  }

  finally(callback) {
    return this.then(
      value => Promise.resolve(callback()).then(() => value),
      reason => Promise.resolve(callback()).then(() => { throw reason })
    );
  }

  static race(pmList) {
    return new Promise((resolve, reject) => {
      pmList.forEach(item => {
        // item 可能不是 promise,所以先调用 promise.resolve
        Promise.resolve(item).then(val => {
          resolve(val);
        }, err => {
          reject(err);
        });
      })
    })
  }

  static all(pmList) {
    return new Promise((resolve, reject) => {
      let resolveArr = [];
      let count = 0;
      pmList.forEach((item, index) => {
        // item 可能不是 promise,所以先调用 promise.resolve
        Promise.resolve(item).then(val => {
          resolveArr[index] = val;
          count++;
          if (count === pmList.length) {
            resolve(resolveArr);
          }
        }, err => {
          reject(err);
        });
      })
    })
  }
}

相关文章

  • 实现 Promise/A+ 规范 & ES6 Promise方法

    实现 Promise/A+ 规范 检测通过 实现 ES6 Promise 方法

  • js sleep

    // promise 在ES6的语法中,Promise是sleep方法异步的实现一种方式,借助Promise方法可...

  • JavaScript 再学习:Promise的含义

    Promise 的含义 Promise 在 JavaScript 语言早有实现,ES6 将其写进了语言标准,统一了...

  • VUE多个方法执行完回调

    用Promise.all来实现。Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加th...

  • 前端知识总结——ES6重难点

    Promise实现 promise是ES6新增的语法,解决回调地狱问题 可以把 Promise 看成一个状态机,它...

  • Promise 对象

    一、Promise的含义 Promise在JavaScript语言中早有实现,ES6将其写进了语言标准,统一了用法...

  • Promise的简单实现

    随着ES6的出现,Promise成为标准,平时使用的次数也增加。但是Promise的原理是什么,如何实现链式调用。...

  • 来,用ES6写个Promise吧

    本文采用es6语法实现Promise基本的功能, 适合有javascript和es6基础的读者,如果没有,请阅读 ...

  • Promise的简单实现

    es6版本的 es5版本 promise 友情提醒 promise还有很多特征 这里的实现还缺很多特征

  • ES6 promise——初探

    本文思路 什么是异步 ES5异步实现方案 ES6 promise解决了什么问题 promise应该如何使用 1.异...

网友评论

      本文标题:Es6 Promise 实现

      本文链接:https://www.haomeiwen.com/subject/hokmtctx.html