Promise的理解-JavaScript

Posted 2021-06-08 恒哥的爸爸

1 为什么要使用Promise

防止回调黑洞
      例如，正常的ajax调用，程序员既要定义业务逻辑函数，还要控制这些业务逻辑执行的顺序，一旦异步调用嵌套太深，整个代码可读性和可维护度都会下降。

      例如，实际项目中有如下需求 0.登录 1.查用户配置，2.通过配置权限，查询可以浏览的数据，以上三步肯定是顺序执行的。如下就是直接采用回调方式来实现的代码，而且这里的代码，没有处理错误和异常。估计没几个人愿意看这么多括号的一大组逻辑。

function generalQuery(){
	this.localVal = "hengebb";
  let param = {
      name:'hege',
      key:'001'
  }
  var xhr = new XMLHttpRequest()  
  xhr.open('post', 'http://127.0.0.1:8080/ris/qcTest/lgin.api',JSON.stringify(param))
  xhr.send(null)
  xhr.onreadystatechange = ()=>{
      if (xhr.readyState == 4 && xhr.status == 200) {
      		console.log("@2 local val ="+this.localVal)
          let ret = xhr.responseText
          let retObject = JSON.parse(ret);
          if(retObject.token == '0001'){
              let param = {
                  token:'0001',
              }
              var yhr = new XMLHttpRequest()
              yhr.open('post','http://127.0.0.1:8080/ris/qcTest/config.api', JSON.stringify(param))
              yhr.send(null)
              yhr.onreadystatechange = function(){
              	console.log("@3 local val ="+this.localVal)
                if(yhr.readyState == 4 && yhr.status == 200){
                  let ret = yhr.responseText
                  let retObject = JSON.parse(ret);
                  if(retObject.config == 0){
                      let param =  {
                          token:"0001",
                          config:1
                      }
                      let zhr = new XMLHttpRequest()
                      zhr.open('post','http://127.0.0.1:8080/ris/qcTest/query.api', JSON.stringify(param))
                      zhr.send(null)
                      zhr.onreadystatechange = function(){
                          if(zhr.readyState == 4 &&  zhr.status == 200){
                              let ret = yhr.responseText
                              let retObject = JSON.parse(ret);
                              console.log(retObject.msg)
                          }
                      }
                  }
                }
              }
          }
      }
  }
}

接下来，我们看Promise的处理方式

function login() {
  let param = {
     name:'hege',key:'001'
  }
  return new Promise((resolve)=>{
    // 需要在这里处理异步任务
    var xhr = new XMLHttpRequest();
    xhr.open('post','http://127.0.0.1:8080/ris/qcTest/lgin.api',JSON.stringify(param));
    xhr.send(null);
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 && xhr.status == 200) {
        // 获取后台数据
        var ret = xhr.responseText;
        // 成功的情况
        resolve(ret);
      }
    }
  })
}


function config(){
  let param = {
      token:'0001',
  }
  return new Promise((resolve)=>{
    var xhr = new XMLHttpRequest();
    xhr.open('post','http://127.0.0.1:8080/ris/qcTest/config.api',JSON.stringify(param));
    xhr.send(null);
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 && xhr.status == 200) {
        // 获取后台数据
        var ret = xhr.responseText;
        // 成功的情况
        resolve(ret);
      }
    }
  })
}

function query(){
	let param =  {
	    token:"0001",
	    config:1
	}
  return new Promise((resolve)=>{
    var xhr = new XMLHttpRequest();
    xhr.open('post','http://127.0.0.1:8080/ris/qcTest/query.api',JSON.stringify(param));
    xhr.send(null);
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 && xhr.status == 200) {
        // 获取后台数据
        var ret = xhr.responseText;
        // 成功的情况
        resolve(ret);
      }
    }
  })
}

定义完，每一步的操作后，执行代码如下

function promiseQuery(){
	this.localVal = "hengebb";
	login().then(ret=>{
	  return config();
	}).then(ret=>{
		console.log("@2 ==== this point "+this.localVal)
	  return query();
	}).then(ret=>{
	  console.log(ret.msg)
	})
}

2 Promise的实现原理

2.1 伪代码

function SelfPromise(fn) {
    console.log("1. 注册异步函数")
    this.value = null;
    this.callbacks = [];
    fn.call(this, this.resolve.bind(this))
    //因为调用resolve函数的位置，在客户端，为了把this指针从客户端改变为SelfPromise实例对象，这里使用了bind函数
}
//自定义函数的原型函数
SelfPromise.prototype = {
    constructor: SelfPromise,
    then: function(thenFunc) {
        console.log("3. 注册异步函数回调后，需要执行的函数")
        var obj = {
            onfulfilled: thenFunc
        }
        this.callbacks.push(obj);
        console.log(this.callbacks)
    },
    resolve: function(data) { 
        this.value = data;
        this.callbacks.forEach(item => { //类似执行一个函数链（职责链模式）
            let p = item.onfulfilled(this.value);
            console.log(this)
        });
    }
}
//客户端代码调用
function customPromiseTest(){
  this.promiseTestVal = 99
  let promise = new SelfPromise((resolve)=>{   //1. 将需要异步执行的函数注册到SelfPromise实例中，此函数的格式必须是带有一个形参function(param){}格式（这里是针对SelfPromise的)
      console.log("2. 执行异步函数.... ")       
     //2. 执行注册到SelfPromise实例中的函数. 查看源码，第一步将resolve的this指针指向SelfPromise实例对象；第二部，通过call调用，执行fn异步注册函数
      var param = {							              
          ref_fac_id:1031
      };
      setTimeout(()=>{
          console.log("异步回调开始...")
          let ret = {
              ret:1,name:"hege",token:"10088"
          }
          resolve(ret)
      },1000)
  }).then((ret)=>{    //3. 将异步返回后，需要后续执行的函数也注册到Promise的类中，
    console.log("4. 回调过程调用在步骤3中注册的函数") 
    //4. 回调函数开始执行，在then调用时，注册的函数
    console.log(ret.name + ret.token + " this." + this.promiseTestVal)
    //使用()=>{}方式的函数，这种函数没有自己的构造器，所以，就没有this指针，就只能是用括号外部的this指针
  })
}

在以上的代码中，我做了一些注释。

          实际上，客户调用代码，首先将异步函数1和异步函数回调后，希望后续执行函数2，这两个函数注册到Promise中；Promise内部，含有一个类似包装器功能的函数resolve，用此函数后续调用一个函数链，这些函数链上的函数，就是通过then注册到内部的函数。
          这里需要注意的点，还有如下几个，resolve函数的this指针必须bind到Promise函数中，因为执行的时候，是在客户端代码块内执行的。
          另外，就是被注册函数最好都采用()=>{}方式，不要采用function的方式。 这样，在客户端的回调函数代码块中，就能直接使用客户端函数的this指针。

         本人将以上的代码都上传到资源内，大家感兴趣的可以下载测试！