promise是干什么的
在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现,然而在需要多次回调嵌套的时候，就容易进入回调地狱了,promise解决了这一问题
Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise。所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。 Promise对象的状态不受外界影响
promise是什么样的
-
promise对象上的方法
Promise.all()
Promise.race()
Promise.reject()
Promise.resolve()
Promise.prototype.catch()
Promise.prototype.finally()
Promise.prototype.then()
复制代码- 三种状态:
promise只有三种状态
pending 进行中
fulfilled 已经成功
rejected 已经失败
复制代码- 状态改变：
Promise对象的状态改变，只有两种可能：
pending => fulfilled
pending => rejected
复制代码基本用法
ES6规定，Promise对象是一个构造函数，用来生成Promise实例
const p = new Promise(function(resolve,reject){
if(/*异步操作成功*/){
resolve(value);
}else{
reject(error);
}
})
复制代码resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去； reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise 实例生成以后，可以用then 方法分别指定resolved状态和rejected状态的回调函数。
p.then(function(value){
//success
},function(error){
//failure
});
复制代码原理解析
针对以上的基本用法，我们深入解析一下Promise的实现原理:
首先promsie有三种状态，它是个构造函数，且接收一个函数作为参数，这个函数我们称之为excutor，函数里有两个参数resolve和reject,这两个回掉的作用我们在基本用法里已经说了
跟jQuery链式调用相似，promise的链式调用是在 Promise.prototype.then() 和 Promise.prototype.catch()里返回了promise实例 这张图清楚的描述了promise链式调用的过程
- 构造函数
const PENDING = 'pengding'; // 初始态
const FULFILLED = 'fulfilled';// 成功态
const REJECTED = 'rejected';// 成功态
function Promise(excutor) {
let self = this;
self.status = PENDING; // 设置状态
// 定义存放成功回调的数组
self.onResolveCallbacks = [];
// 定义存放失败回调的数组
self.onRejectCallbacks = [];
// 当调用此方法的时候，如果promise状态为pending时可以以转成成功态，如果已经是成功或者失败则什么都不做
function resolve(value) {
if (self.status == PENDING){ // 如果是初始态则转成成功态
self.status = FULFILLED;
self.value = value; // 成功后会得到一个值且不能改变
self.onResolveCallbacks.forEach(cb => cb(self.value)) // 调用所有成功的回调
}
}
function reject(reason) {
if(self.status == PENDING){ // 如果是初始态则转成失败态
self.status = REJECTED;
self.value = reason;
self.onRejectCallbacks.forEach(cb=>cb(self.value))
}
}
try{
// excutor函数执行可能会异常，需要捕获，如果出错需要用这个错误对象reject
excutor(resolve,reject)
}catch (e) {
// excutor执行失败需要用失败原因reject这个promise
reject(e)
}
}
复制代码-
then方法 在基本用法中我们知道在调用then方法时传进去的是两个函数，分别对应的是promise中异步方法成功和失败时的回调
Promise.prototype.then = function (onFulfilled, onRejected) {
// 如果成功和失败的回调没传，表示这个then没任何逻辑，只会把值往后抛
onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : value=>value;
onRejected = typeof onRejected == 'function' ? onRejected : reason=>{ throw reason};
let self = this;
let promise2;
// 为了实现链式调用，每一种状态都要返回的是一个promise实例
if(self.status == FULFILLED){ //如果promise状态已经是成功态了，onFulfilled直接取值
return promise2 = new Promise(function (resolve,reject) {
setTimeout(function () { // 保证返回的promise是异步
try{
onFulfilled(self.value);
}catch (e) {
// 如果执行成功的回调过程中出错，用错误原因把promise2 reject
reject(e)
}
})
});
}
if(self.status == REJECTED){
return promise2 = new Promise(function (resolve, reject) {
setTimeout(function () {
try{
onRejected(self.value);
}catch(e){
reject(e)
}
})
})
}
if(self.status == PENDING){
return promise2 = new Promise(function (resolve, reject){
// pending状态时把所有的回调函数都添加到实例的两个堆栈中暂存，等状态改变后依次执行，其实这个过程就是观察者模式
self.onResolveCallbacks.push(function () {
setTimeout(function () {
try{
onFulfilled(self.value);
}catch(e){
reject(e)
}
})
});
self.onRejectCallbacks.push(function () {
setTimeout(function () {
try{
onRejected(self.value);
}catch(e){
reject(e)
}
})
})
});
}
};
复制代码以上只是支持了一次then的调用，而现实中我们会有这种需求
const p = new Promise(function(resolve,reject){
if(/*异步操作成功*/){
resolve(value);
}else{
reject(error);
}
});
p.then(function(){
//success
}).then(function(){
//success
}).then(function(){
//success
}).catch(function(e){
//failure
})
复制代码这种连续链式调用then方法，连续返回promise实例的情况，而且我们要兼容then方法里返回的不是promise对象，这要求对then优化，加入一个解析promise的方法resolvePromise。这样我们就会遇到三种情况:
-
返回值是
promise实例 -
返回值是个
thenable对象或者函数 -
没有返回值或者只返回一个普通值
先看一下什么是
thenable对象
const thenable = {
// 所谓 thenable 对象，就是具有 then 属性，而且属性值是如下格式函数的对象
then: (resolve, reject) => {
resolve(200)
}
}
复制代码//resolvePromise
function resolvePromise(promise2,x,resolve,reject){
if(promise2 === x){
return reject(new TypeError('循环引用'))
}
let called = false;// 是否resolve或reject被调用，这两个回调只能被调用一次
if(x instanceof Promise){
if(x.status === PENDING){
x.then(function (y) { // 深度递归
resolvePromise(promise2,y,resolve,reject)
},reject)
}else{
x.then(resolve,reject)
}
}else if(x != null && ((typeof x =='object') || (typeof x == 'function'))){
// x 是个thenable对象或函数
try{
let then = x.then;
if(typeof then == 'function'){
then.call(x,function (y) {
// 如果promise2已经成功或者失败了就不要再调用了
if(called) return;
called = true;
resolvePromise(promise2,y,resolve,reject)
},function (err) {
if(called) return;
called = true;
reject(err)
})
}else{
// 到此的话x不是个thenabe对象，直接把它当成值 resolve promise2就可以了
resolve(x)
}
}catch (e) {
if(called) return;
called = true;
reject(e)
}
}else{
// 如果x是个普通值，则用x的值去resolve promise2
resolve(x)
}
}
复制代码优化后的then方法
Promise.prototype.then = function (onFulfilled, onRejected) {
// 如果成功和失败的回调没传，表示这个then没任何逻辑，只会把值往后抛
onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : value=>value;
onRejected = typeof onRejected == 'function' ? onRejected : reason=>{ throw reason};
let self = this;
let promise2;
if(self.status == FULFILLED){ //如果promise状态已经是成功态了，onFulfilled直接取值
return promise2 = new Promise(function (resolve,reject) {
setTimeout(function () {
try{
let x = onFulfilled(self.value);
if(x instanceof Promise){
// 如果获取到返回值X，会走解析promise的过程
resolvePromise(promise2,x,resolve,reject)
}
}catch (e) {
// 如果执行成功的回调过程中出错，用错误原因把promise2 reject
reject(e)
}
})
});
}
if(self.status == REJECTED){
return promise2 = new Promise(function (resolve, reject) {
setTimeout(function () {
try{
let x = onRejected(self.value);
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e)
}
})
})
}
if(self.status == PENDING){
return promise2 = new Promise(function (resolve, reject){
self.onResolveCallbacks.push(function () {
setTimeout(function () {
try{
let x = onFulfilled(self.value);
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e)
}
})
});
self.onRejectCallbacks.push(function () {
setTimeout(function () {
try{
let x = onRejected(self.value);
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e)
}
})
})
});
}
};
复制代码-
catch方法
catch原理就是只传失败的回调
Promise.prototype.catch = function(onReject){
this.then(null,onReject);
};
复制代码- 最后导出这个类就可以了
try {
module.exports = Promise
} catch (e) {
console.log(e)
}
复制代码实际项目中的应用---封装一个异步加载图片的方法
function imgLoad(url) {
return new Promise(function(resolve, reject) {
var request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'blob';
request.onload = function() {
if (request.status === 200) {
resolve(request.response);
} else {
reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
}
};
request.onerror = function() {
reject(Error('There was a network error.'));
};
request.send();
});
}
var body = document.querySelector('body');
var myImage = new Image();
imgLoad('XXX.jpg').then(function(response) {
var imageURL = window.URL.createObjectURL(response);
myImage.src = imageURL;
body.appendChild(myImage);
}, function(Error) {
console.log(Error);
});
复制代码参考资料
原文发布时间为：2018年6月11日
原文作者：toymm
本文来源：
掘金如需转载请联系原作者
