zoukankan      html  css  js  c++  java
  • 原生js手写Promise

    ES5写法

    function Promise (executor) {
      this.PromiseState = 'pending'; // Promise状态 只有 pending fulfilled rejected 三种
      this.PromiseResult = null; // 传递结果
      this.callbacks = []; // 回调函数数组
      const self = this;
      function resolve (data) {
        if (self.PromiseState !== 'pending') return; // 状态只能修改一次
        self.PromiseState = 'fulfilled';
        self.PromiseResult = data;
        // 采用异步处理回调
        setTimeout(() => {
          self.callbacks.forEach(element => {
            if (element.onResolved) { // 执行异步回调
              element.onResolved(data)
            }
          });
        });
      }
      function reject (data) {
        if (self.PromiseState !== 'pending') return; // 状态只能修改一次
        self.PromiseState = 'rejected';
        self.PromiseResult = data;
        // 采用异步处理回调
        setTimeout(() => {
          self.callbacks.forEach(element => {
            if (element.onRejected) { // 执行异步回调
              element.onRejected(data)
            }
          }); 
        });
      }
      try {
        executor(resolve, reject);
      } catch (error) {
        reject (error)
      }
    }
    Promise.prototype.then = function (onResolved, onRejected) {
      const self = this;
      // 设置onResolved默认函数,传递值
      if (typeof onResolved !== 'function') {
        onResolved = value => value;
      }
      // 设置onRejected默认函数,抛出错误
      if (typeof onRejected !== 'function') {
        onRejected = reason => {
          throw reason;
        }
      }
      return new Promise((resolve, reject) => {
        // 针对状态改变所共同的处理回调
        function callback (type) {
          try {
            let result = type(self.PromiseResult); // 根据内部处理函数的返回值来确定状态
            if (result instanceof Promise) {
              result.then(v => {
                resolve(v);
              }, r => {
                reject(r);
              })
            } else {
              resolve(result);
            }
          } catch (e) {
            reject(e);
          }
        }
        if (this.PromiseState === 'fulfilled') {
          setTimeout(function () {
            callback(onResolved);
          });
        }
        if (this.PromiseState === 'rejected') {
          setTimeout(function () {
            callback(onRejected);
          });
        }
        if (this.PromiseState === 'pending') {
          // 保存异步回调
          this.callbacks.push({
            onResolved: function () {
              callback(onResolved);
            },
            onRejected: function () {
              callback(onRejected);
            }
          })
        }
      })
    }
    // catch相当于对then执行onRejected回调
    Promise.prototype.catch = function (onRejected) {
      return this.then(undefined, onRejected)
    }
    Promise.resolve = function (value) {
      return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
          value.then(v => {
            resolve(v);
          }, r => {
            reject (r);
          })
        } else {
          resolve(value);
        }
      })
    }
    Promise.reject = function (reason) {
      return new Promise((resolve, reject) => {
        reject(reason);
      })
    }
    Promise.all = function (promises) {
      return new Promise((resolve, reject)=> {
        let count = 0;
        let arr = [];
        for(let i = 0; i < promises.length; i++) {
        if (!(promises[i] instanceof Promise)) {
             promises[i] = Promise.resolve(promises[i]);
          }
          promises[i].then(v => {
            count++;
            arr[i] = v;
            if (count === promises.length) {
              resolve(arr);
            }
          }, r => {
            reject(r);
          })
        }
      })
    }
    Promise.race = function (promises) {
      return new Promise((resolve, reject)=> {
        let count = 0;
        let arr = [];
        for(let i = 0; i < promises.length; i++) {
          promises[i].then(v => {
            resolve(v);
          }, r => {
            reject(r);
          })
        }
      })
    }

    class写法

    class Promise{
      constructor (executor) {
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        this.callbacks = [];
        const self = this;
        function resolve (data) {
          if (self.PromiseState !== 'pending') return; // 状态只能修改一次
          self.PromiseState = 'fulfilled';
          self.PromiseResult = data;
          setTimeout(() => {
            self.callbacks.forEach(element => {
              if (element.onResolved) { // 执行异步回调
                element.onResolved(data)
              }
            });
          });
        }
        function reject (data) {
          if (self.PromiseState !== 'pending') return; // 状态只能修改一次
          self.PromiseState = 'rejected';
          self.PromiseResult = data;
          setTimeout(() => {
            self.callbacks.forEach(element => {
              if (element.onRejected) { // 执行异步回调
                element.onRejected(data)
              }
            }); 
          });
        }
        try {
          executor(resolve, reject);
        } catch (error) {
          reject (error)
        }
      }
      then(onResolved, onRejected) {
        const self = this;
        if (typeof onRejected !== 'function') {
          onRejected = reason => {
            throw reason;
          }
        }
        if (typeof onResolved !== 'function') {
          onResolved = value => value;
        }
        return new Promise((resolve, reject) => {
          function callback (type) {
            try {
              let result = type(self.PromiseResult);
              if (result instanceof Promise) {
                result.then(v => {
                  resolve(v);
                }, r => {
                  reject(r);
                })
              } else {
                resolve(result);
              }
            } catch (e) {
              reject(e);
            }
          }
          if (this.PromiseState === 'fulfilled') {
            setTimeout(function () {
              callback(onResolved);
            });
          }
          if (this.PromiseState === 'rejected') {
            setTimeout(function () {
              callback(onRejected);
            });
          }
          if (this.PromiseState === 'pending') {
            // 保存异步回调
            this.callbacks.push({
              onResolved: function () {
                callback(onResolved);
              },
              onRejected: function () {
                callback(onRejected);
              }
            })
          }
        })
      }
      catch(onRejected) {
        return this.then(undefined, onRejected)
      }
      static resolve(value) {
        return new Promise((resolve, reject) => {
          if (value instanceof Promise) {
            value.then(v => {
              resolve(v);
            }, r => {
              reject (r);
            })
          } else {
            resolve(value);
          }
        })
      }
      static reject(reason) {
        return new Promise((resolve, reject) => {
          reject(reason);
        })
      }
      static all(promises) {
        return new Promise((resolve, reject)=> {
          let count = 0;
          let arr = [];
          for(let i = 0; i < promises.length; i++) {
          if (!(promises[i] instanceof Promise)) {
              promises[i] = Promise.resolve(promises[i]);
            }
            promises[i].then(v => {
              count++;
              arr[i] = v;
              if (count === promises.length) {
                resolve(arr);
              }
            }, r => {
              reject(r);
            })
          }
        })
      }
      static race(promises) {
        return new Promise((resolve, reject)=> {
          let count = 0;
          let arr = [];
          for(let i = 0; i < promises.length; i++) {
            promises[i].then(v => {
              resolve(v);
            }, r => {
              reject(r);
            })
          }
        })
      }
    }
  • 相关阅读:
    测试
    201920201 20199320《Linux内核原理与分析》第四周作业
    201920201 20199320《Linux内核原理与分析》第六周作业
    201920201 20199320《Linux内核原理与分析》第五周作业
    201920201 20199320《Linux内核原理与分析》第七周作业
    201920201 20199320《Linux内核原理与分析》第一周作业
    201920201 20199320《Linux内核原理与分析》第八周作业
    ASP.NET MVC3 Custom FormAuthorize
    堆排序练习题
    面试题:4亿里有多少个1(11算2个)。
  • 原文地址:https://www.cnblogs.com/LeoXnote/p/14294368.html
Copyright © 2011-2022 走看看