masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > PromiseA+的实现步骤详解

PromiseA+的实现步骤详解

php中世界最好的语言
Lepaskan： 2018-05-24 13:39:17
asal
2298 orang telah melayarinya

这次给大家带来PromiseA+的实现步骤详解，PromiseA+实现的注意事项有哪些，下面就是实战案例，一起来看一下。

Promise

手写一个PromiseA+的实现。注意这里只是模拟，实际上原生的promise在事件队列中属于microTask。这里用setTimeout模拟不是特别恰当。因为setTimeout是一个macroTask。

1. 最简单的基本功能

/**
 * 定义Promise
 * 先实现一个最简单的。用setTimeout模拟一个异步的请求。
 */
function Promise(fn){
  var value= null;
  var callbacks = [];
  this.then = function(onFulfilled) {
    callbacks.push(onFulfilled);
  }
  function resolve(value){
    callbacks.forEach(function(cb){
      cb(value);
    })
  }
  fn(resolve);
}
// 使用Promise
var p = new Promise(function(resolve){
  setTimeout(function(){
    resolve('这是响应的数据')
  },2000)
})
p.then(function(response){
  console.log(response);
})
Salin selepas log masuk

2.链式调用

/**
 * 先看一下前一个例子存在的问题
 * 1.在前一个例子中不断调用then需要支持链式调用，每次执行then都要返回调用对象本身。
 * 2.在前一个例子中，当链式调用的时候，每次then中的值都是同一个值，这是有问题的。其实第一次then中的返回值，应该是第二次调用then中的函数的参数，依次类推。
 * 所以，我们进一步优化一下代码。
 * 
 */
function Promise(fn){
  var value= null;
  var callbacks = [];
  this.then = function(onFulfilled) {
    callbacks.push({f:onFulfilled});
    return this;
  }
  function resolve(value){
    callbacks.map(function(cb,index){
      if(index === 0){
        callbacks[index].value = value;
      }
      var rsp = cb.f(cb.value);
      if(typeof callbacks[index+1] !== 'undefined'){
        callbacks[index+1].value = rsp;
      }
    })
  }
  fn(resolve);
}
// 使用Promise
var p = new Promise(function(resolve){
  setTimeout(function(){
    resolve('这是响应的数据')
  },2000)
})
p.then(function(response){
  console.log(response);
  return 1;
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})
Salin selepas log masuk

3. 异步

/**
 * 先看一下前一个例子存在的问题
 * 1. 如果在then方法注册回调之前，resolve函数就执行了，怎么办？比如 new Promise的时候传入的函数是同步函数的话，
 * then还没被注册，resolve就执行了。。这在PromiseA+规范中是不允许的，规范明确要求回调需要通过异步的方式执行。
 * 用来保证一致可靠的执行顺序。
 * 
 * 因此我们需要加入一些处理。把resolve里的代码放到异步队列中去。这里我们利用setTimeout来实现。
 * 原理就是通过setTimeout机制，将resolve中执行回调的逻辑放置到JS任务队列末尾，以保证在resolve执行时，
 * then方法的回调函数已经注册完成
 * 
 */
function Promise(fn){
  var value= null;
  var callbacks = [];
  this.then = function(onFulfilled) {
    callbacks.push({f:onFulfilled});
    return this;
  }
  function resolve(value){
    setTimeout(function(){
        callbacks.map(function(cb,index){
          if(index === 0){
            callbacks[index].value = value;
          }
          var rsp = cb.f(cb.value);
          if(typeof callbacks[index+1] !== 'undefined'){
            callbacks[index+1].value = rsp;
          }
        })
    },0)
  }
  fn(resolve);
}
// 使用Promise,现在即使是同步的立马resolve，也能正常运行了。
var p = new Promise(function(resolve){
    resolve('这是响应的数据')
})
p.then(function(response){
  console.log(response);
  return 1;
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})
Salin selepas log masuk

4. 状态机制

/**
 * 先看一下前一个例子存在的问题
 * 1.前一个例子还存在一些问题，如果Promise异步操作已经成功，在这之前注册的所有回调都会执行，
 * 但是在这之后再注册的回调函数就再也不执行了。具体的运行下面这段代码，可以看到“can i invoke”并没有打印出来
 * 想要解决这个问题，我们就需要加入状态机制了。具体实现看本文件夹下的另一个js文件里的代码。
 * 
 */
function Promise(fn){
  var value= null;
  var callbacks = [];
  this.then = function(onFulfilled) {
    callbacks.push({f:onFulfilled});
    return this;
  }
  function resolve(value){
    setTimeout(function(){
        callbacks.map(function(cb,index){
          if(index === 0){
            callbacks[index].value = value;
          }
          var rsp = cb.f(cb.value);
          if(typeof callbacks[index+1] !== 'undefined'){
            callbacks[index+1].value = rsp;
          }
        })
    },0)
  }
  fn(resolve);
}
// 
var p = new Promise(function(resolve){
    resolve('这是响应的数据')
})
p.then(function(response){
  console.log(response);
  return 1;
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})
setTimeout(function(){
   p.then(function(response){
     console.log('can i invoke?');
   })
},0)
Salin selepas log masuk
/**
 * 在promise01.js中，我们已经分析了，我们需要加入状态机制
 * 在这里实现一下PromiseA+中关于状态的规范。
 * 
 * Promises/A+规范中的2.1Promise States中明确规定了，pending可以转化为fulfilled或rejected并且只能转化一次，
 * 也就是说如果pending转化到fulfilled状态，那么就不能再转化到rejected。
 * 并且fulfilled和rejected状态只能由pending转化而来，两者之间不能互相转换
 * 
 */
function Promise(fn){
  var status = 'pending'
  var value= null;
  var callbacks = [];
  this.then = function(onFulfilled) {
    // 如果是pending状态，则加入到注册队列中去。
    if(status === 'pending'){
      callbacks.push({f:onFulfilled});
      return this;
    }
    // 如果是fulfilled 状态，此时直接执行传入的注册函数即可。
    onFulfilled(value);
    return this;
  }
  function resolve(newValue){
    value = newValue;
    status = 'fulfilled';
    setTimeout(function(){
        callbacks.map(function(cb,index){
          if(index === 0){
            callbacks[index].value = newValue;
          }
          var rsp = cb.f(cb.value);
          if(typeof callbacks[index+1] !== 'undefined'){
            callbacks[index+1].value = rsp;
          }
        })
    },0)
  }
  fn(resolve);
}
// 
var p = new Promise(function(resolve){
    resolve('这是响应的数据')
})
p.then(function(response){
  console.log(response);
  return 1;
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})
setTimeout(function(){
   p.then(function(response){
     console.log('can i invoke?');
   })
},1000)
Salin selepas log masuk
/**
 * 刚才的例子中，确实打印出了 can i invoke，但是之前then的注册函数的返回值，并没有打印出来。
 * 也就是说 1 和 2 并没有被打印出来，看下面的注释
 * 
 */
function Promise(fn){
  var status = 'pending'
  var value= null;
  var callbacks = [];
  this.then = function(onFulfilled) {
    if(status === 'pending'){
      callbacks.push({f:onFulfilled});
      return this;
    }
    onFulfilled(value);
    return this;
  }
  function resolve(newValue){
    value = newValue;
    status = 'fulfilled';
    setTimeout(function(){
        callbacks.map(function(cb,index){
          if(index === 0){
            callbacks[index].value = newValue;
          }
          var rsp = cb.f(cb.value);
          if(typeof callbacks[index+1] !== 'undefined'){
            callbacks[index+1].value = rsp;
          }
        })
    },0)
  }
  fn(resolve);
}
var p = new Promise(function(resolve){
    resolve('aaaaaa')
})
p.then(function(response){
  console.log(response);    
  return 1;
}).then(function(response){
  console.log(response);  // 这里应该打印的是45行返回的1，但是打印出来的确是aaaaaa
  return 2;  
}).then(function(response){
  console.log(response); // 这里应该打印的是48行返回的2，但是打印出来的确是aaaaaa
})
setTimeout(function(){
   p.then(function(response){
     console.log('can i invoke?');
   })
},1000)
/**
 * 问题的根源在于什么呢？
 * 问题的根源是每次的then的返回值都是p，当状态是fulfilled，执行的是onFulfilled(value)
 * 此处的value是p的value，也就是fulfilled状态的value。根据规范，promise应该是只能发射单值。
 * 而我们设计了一个callback堆栈中有一系列的值。生生的把promise变成了多值发射。
 * 
 * 所以，调整思路，每个then都应该返回一个promise，这个promise应该是一个全新的promise。
 * 具体实现见下一个例子。
 */
Salin selepas log masuk
/**
 * 根据刚才的分析，我们重新优化一下代码
 * 1.去掉之前的多值设计
 * 2.每次的then 返回的都是一个全新的promise
 *
 */
function Promise(fn){
  var status = 'pending'
  var value= null;
  var callbacks = [];
  var self = this;
  this.then = function(onFulfilled) {
    return new Promise(function(resolve){
      function handle(value){
        var res = typeof onFulfilled === 'function' ? onFulfilled(value) : value;
        resolve(res);
      }
      // 如果是pending状态，则加入到注册队列中去。
      if(status === 'pending'){
        callbacks.push(handle);
      // 如果是fulfilled 状态。
      }else if(status === 'fulfilled'){
          handle(value);
      }
    })
  }
  function resolve(newValue){
    value = newValue;
    status = 'fulfilled';
    
    setTimeout(function(){
        callbacks.map(function(cb){
          cb(value);
        })
    },0)
  };
  fn(resolve);
}
// 
var p = new Promise(function(resolve){
    resolve('这是响应的数据')
})
p.then(function(response){
  console.log(response);
  return 1;
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})
setTimeout(function(){
   p.then(function(response){
     console.log('can i invoke?');
   })
},1000)
/**
 * 运行一下，完美输出
 * 先是输出“这是响应的数据”，然后是“1”，然后是“2”， 然后是“can i invoke?”
 * 
 * 接下来我们要好好整理一下代码了。把一些公用的方法放到构造函数的原型上去。改造之后的例子见下一个例子
 */
Salin selepas log masuk
/**
 * 根据刚才的分析，我们重新优化一下代码
 * 1.把私有属性挂到实例上去
 * 2.把公共方法挂到构造函数的原型上去
 *
 */
function Promise(fn){
  this.status = 'pending';
  this.value= null;
  this.callbacks = [];
  var self = this;
  function resolve(newValue){
    self.value = newValue;
    self.status = 'fulfilled';
    setTimeout(function(){
      self.callbacks.map(function(cb){
          cb(value);
        })
    },0)
  }
  fn(resolve);
}
Promise.prototype = Object.create(null);
Promise.prototype.constructor = Promise;
Promise.prototype.then = function(onFulfilled){
  var self = this;
  return new Promise(function(resolve){
    function handle(value){
      var res = typeof onFulfilled === 'function'?  onFulfilled(value) : value;
      resolve(res);
    }
    if(self.status==='pending'){
      self.callbacks.push(handle);
    }else if(self.status ==='fulfilled'){
      handle(self.value);
    }
  })
}
// 使用
var p = new Promise(function(resolve){
    resolve('这是响应的数据')
})
p.then(function(response){
  console.log(response);
  return 1;
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})
setTimeout(function(){
   p.then(function(response){
     console.log('can i invoke?');
   })
},1000)
Salin selepas log masuk

5.处理注册的函数返回值是promise的情况

/**
 * 不出意料，又要抛出问题了。当then注册的回调函数返回的是promise的时候，从这个then之后的所有then的注册函数
 * 都应该注册在新返回的promise上。直到遇到下一个回调函数的返回值也是promise。
 * 
 * 实现思路：
 * 在handle中判断注册函数返回的是否是promise。如果是的话,则resolve这个返回的promise的值，具体代码看一下36到38行
 * 
 */
function Promise(fn){
  this.status = 'pending';
  this.value= null;
  this.callbacks = [];
  var self = this;
  function resolve(newValue){
    self.value = newValue;
    self.status = 'fulfilled';
    setTimeout(function(){
      self.callbacks.map(function(cb){
          cb(value);
        })
    },0)
  }
  fn(resolve);
}
Promise.prototype = Object.create(null);
Promise.prototype.constructor = Promise;
Promise.prototype.then = function(onFulfilled){
  var self = this;
  var promise = new Promise(function(resolve){
    function handle(value){
      var res = typeof onFulfilled === 'function'?  onFulfilled(value) : value;
      if(res instanceof Promise){
        promise = res;
        resolve(res.value);
      }else {
        resolve(res);
      }
    }
    if(self.status==='pending'){
      self.callbacks.push(handle);
    }else if(self.status ==='fulfilled'){
      handle(self.value);
    }
  })
  return promise;
}
// 使用
var p = new Promise(function(resolve){
    resolve('这是响应的数据')
})
p.then(function(response){
  console.log(response);
  return new Promise(function(resolve){
    resolve('testtest')
  })
}).then(function(response){
  console.log(response);
  return 2;  
}).then(function(response){
  console.log(response);
})
setTimeout(function(){
   p.then(function(response){
     console.log('can i invoke?');
     return new Promise(function(resolve){
        resolve('hhhhhh')
      })
   }).then(function(response){
     console.log(response);
   })
},1000)
Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

React结合TypeScript和Mobx步骤详解

React-router v4使用步骤详解

Atas ialah kandungan terperinci PromiseA+的实现步骤详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
capai Penjelasan terperinci
sumber：php.cn
Artikel sebelumnya：JS中使用接口步骤详解 Artikel seterusnya：react实现选中li高亮步骤详解
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2289
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2429
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
2041
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1923
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1998
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan