温馨提示: 豌豆仅提供国内节点,不提供境外节点,不能用于任何非法用途,不能访问境外网站及跨境联网。

免费领取1万IP!

谈谈你对Promise的理解

发布时间:

背景

Promise是为了解决Javascript回调嵌套过多导致回调地狱(callbackhell)而产生的。目前已被纳入了es2015规范,主流浏览器都支持Promise。为了在工作中更好的运用Promise,我们需要理解Promise规范与内部实现机制,下面我们来手动实现一个Promise。

Promise/A+规范

在写代码之前让我们先了解下 Promise/A+规范。
一个promise有三种状态:

  • pending:表示初始状态,可以转移到 fullfilled 或者 rejected 状态
  • fulfilled:表示操作成功,不可转移状态
  • rejected:表示操作失败,不可转移状态
  • 必须有一个 then 异步执行方法,then 接受两个参数且必须返回一个promise:

借用这张来自MDN的流程图我们可以清晰的看到 Promise 状态的流转过程。

简单版

下面我们来实现一个简单版的 Promise:

function Promise1(executor){
  let self = this;
	self.status = 'pending';
  self.value = undefined;
  self.reason = undefined;
  
  function resolve(value) {
  	if(self.status==='pending'){
    	self.status = 'fullfilled';
      self.value = value;
    }
  }
  function reject(reason) {
  	if(self.status==='pending') {
    	self.status = 'rejected';
      self.reason = reason;
    }
  }
  
  try{
  	executor(resolve,reject);
  }catch(e) {
  	reject(e);
  }
}

Promise1.prototype.then = function(onFullfilled,onRejected) {
	if(this.status==='fullfilled') {
  	onFullfilled(this.value);
  }
  if(this.status==='rejected') {
  	onRejected(this.reason);
  }
}
//测试
let p= new Promise1(function(resolve,reject){resolve(1)});
p.then(function(x){console.log(x)})
//输出1
复制代码

支持异步

现在,我们实现了最简单的 Promise。以上版本的Promise是存在很多问题的。为什么呢?最大的问题是它不支持异步,然而在现实中,Promise绝大多数使用场景都是异步。让我们来为 Promise 加入异步功能。

const PENDING = 'pending';
const FULFILLED = 'fullfilled';
const REJECTED = 'rejected';
function Promise1(executor){
  let self = this;
	self.status = PENDING;
  self.value = undefined;
  self.reason = undefined;
  self.fullfilledCallbacks = [];
  self.rejectedCallbacks = [];

  function resolve(value) {
    if(value instanceof Promise) {
    	value.then(resolve,reject);
    }
  	setTimeout(function(){
    	if(self.status===PENDING){
        self.status = FULFILLED;
        self.value = value;
        self.fullfilledCallbacks.forEach(function(cb){
        	cb(self.value)
        })
      }
    })
  }
  function reject(reason) {
  	setTimeout(function(){
    	if(self.status===PENDING) {
        self.status = REJECTED;
        self.reason = reason;
        self.rejectedCallbacks.forEach(function(cb){
        	cb(self.reason);
        })
      }
    })
  }

  try{
  	executor(resolve,reject);
  }catch(e) {
  	reject(e);
  }
}

Promise1.prototype.then = function(onFulfilled,onRejected) {
  let self = this;
  return new Promise1(function(resolve,reject){
  		function success(value) {
        let _value = (typeof onFulfilled === 'function' && onFulfilled(value)) || value;
        resolve(_value)
      }
      function error(reason) {
        let _reason = (typeof onRejected === 'function' && onRejected(reason)) || reason;
        reject(_reason);
      }
    	if(self.status==PENDING) {
      	self.fullfilledCallbacks.push(success);
        self.rejectedCallbacks.push(error);
      } else if(self.status==FULLFILLED){
      	success.call(this,this.value)
      } else if(self.status==REJECTED) {
      	error.call(this,this.reason);
      }
  })
}

复制代码

以上代码中,我们做了如下更改:

  1. 将 Promise 三个状态定义为常量,方便维护
  2. 对于 Promise resolve和reject 函数执行加入异步处理
  3. 在Promise.then中返回新的Promise对象,使Promise可以支持链式调用

错误处理以及静态方法

下面让我们来为Promise 添加错误处理以及静态方法:

//错误处理
Promise1.prototype.catch = function(onRejected) {
    return this.then(null, onRejected);
}

//返回fullfilled Promise对象
Promise1.resolve = function (value) {
    return new Promise1(resolve => {
        resolve(value);
    });
}
//返回 rejected Promise 对象
Promise1.reject = function (reason) {
    return new Promise1((resolve, reject) => {
        reject(reason);
    });
}
//Promise.all方法
Promise1.all = function(promises) {
    function gen(length, resolve) {
        let count = 0;
        let values = [];
        return function(i, value) {
            values[i] = value;
            if (++count === length) {
                resolve(values);
            }
        }
    }
    return new Promise1((resolve, reject) => {
        let done = gen(promises.length, resolve);
        promises.forEach((promise, index) => {
            promise.then((value) => {
                done(index, value)
            }, reject)
        })
    })
}
//Promise.race方法
Promise1.race = function(promises) {
    return new Promise1((resolve, reject) => {
        promises.forEach((promise, index) => {
           promise.then(resolve, reject);
        });
    });
}

复制代码

这里有个问题,就是在当我们console.log(Promise1.resolve('a'))的时候,我发现打印出来的状态竟然是 pending状态,我猜想原因是应该是resolve中函数异步执行,在当我们console的时候setTimeout中代码未执行,所以我给出的解决方法是将状态变化与赋值移到setTimeout外面,这样就不会产生刚才的问题了,更改后代码长这样:

function resolve(value) {
    if(value instanceof Promise) {
    	value.then(resolve,reject);
    }
  	self.status = FULFILLED;
  	self.value = value;
  	setTimeout(function(){
    	if(self.status===PENDING){
        self.fullfilledCallbacks.forEach(function(cb){
        	cb(self.value)
        })
      }
    })
  }

function reject(reason) {
    self.status = REJECTED;
    self.reason = reason;
  	setTimeout(function(){
    	if(self.status===PENDING) {
        self.rejectedCallbacks.forEach(function(cb){
        	cb(self.reason);
        })
      }
    })
  }
复制代码

总结

经过以上实践,我们成功的手写了一个功能完备的 Promise。这里给我的最大启发是如果我们想学习一个东西,必须深入到它的底层,了解它的运行原理与具体实现方法,并且可以造一个简单的轮子,这样才算我们掌握了该知识点。从前的我对于这一点没有关注的太多,导致在用某个知识点时只是掌握的它的表层用法,在高级一点的使用场景时完全不会运用。以后我会更加注重源码方面的学习,弥补我这方面的不足。

相关文章


demo10 关于JS Tree Shaking 使用expect实现自动2步登录 《Spark The Definitive Guide》Chapter 4:结构化API预览 Flutter——UI布局 每日一道面试题(第3期)---一般什么情况下会导致内存泄漏问题 使用Gradle插件生成资源ID映射文件 Android开发 -- Retrofit + Rxjava + Kotlin => Request 彻底弄懂 Nginx location 匹配

上一篇:JavaScript 发布-订阅模式
下一篇:[架构基本功]Parcelable序列化

咨询·合作