异步操作之promise

同步、异步是什么？有什么区别？这些问题我在这儿就不再做其他的赘述，前端人应该都懂得。今天我想来说一说es6中异步操作的新方法promise。

Promise介绍

Promise就是实现异步编程的一种解决方案，核心就是Promise对象。Promise对象就像一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。它可以将异步操作以同步操作的流程表达出来，避免层层嵌套(callback)的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
Promise对象的两个特点：
（1）对象的状态不受外界影响。有三种状态：pending(进行中)、resolved(已成功)、rejected(已失败);
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为resolved和从pending变为rejected。
Promise缺点：
（1）无法取消Promise，一旦新建它就会立即执行，无法中途取消;
（2）如果不设置回调函数，Promise内部抛出的错误，不会反应到外部;
（3）当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

基本用法

const promise = new Promise(function(resolve,reject) {
	if(true){
		resolve(value);
	} else {
		reject(error);//可选，不是必须存在
	}
})
promise.then(function(value) {//value为resolve成功执行传下来的参数
	//成功
},function(error) {
	//失败
})

例子如下：

function timeout(ms) {
	return new Promise((resolve,reject) => {
		setTimeout(resolve,ms,'done');
	})
}
timeout(100).then((value) => {
	console.log(value)//done
})

100ms打印出done。
Promise新建之后就会立即执行

let promise1 = new Promise(function(resolve,reject) {
	console.log('Promise');
});
//Promise

调用resolve或reject并不会终结Promise的参数函数的执行

new Promise((resolve,reject) => {
	return resolve(1);
	//一般来说，调用resolve或reject以后，Promise的使命就完成了，后继续操作应该放到then方法里面，而不应该直接写在resolve或reject后面。所以，最好在它们前面加上return语句，这样就不会有意外
	console.log(2);
}).then(r => {
	console.log(r);
})
//1

API方法介绍

Promise.resolve
Promise.resolve方法作用于将现有对象转为Promise对象
Promise.resolve方法的参数分成以下四种情况：
（1）参数是一个Promise实例，Promise.resolve将不做任何修改，原封不动地返回这这个实例

let promise = new Promise(function(resolve,reject) {
	resolve(41)
});
let p0 = Promise.resolve(promise);
console.log(p0 === promise)
//true

（2）参数是一个thenable对象，thenable对象指的是具有then方法的对象

let thenable = {
	then: function(resolve,reject) {
		resolve(42);
	}
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
	console.log(value);
})
//42

（3）参数不是具有then方法的对象，或根本就不是对象，Promise.resolve方法返回一个新的Promise对象，状态为resolved

const p = Promise.resolve('hello');
p.then(function(s) {
	console.log(s)
})
//hello

（4）不带有任何参数，直接返回一个resolved状态的Promise对象
注意：立即resolve的Promise对象，是在本轮“事件循环”的结束时，而不是在下一轮“事件循环”的开始时。

setTimeout(function () {
	console.log('three');
},0)
Promise.resolve().then(function () {
	console.log('two');
})
console.log('one')
//one two three

Promise.reject
Promise.reject(reason)方法会返回一个新的Promise实例，该实例的状态为rejected

const p = Promise.reject('出错了');
p.then(null,function (s) {
	console.log(s)
})
//出错了

注意：Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致

const thenable = {
	then(resolve,reject) {
		reject('出错了');
	}
}
Promise.reject(thenable)
.catch(e => {
	console.log(e === thenable)
})
//true

Promise.all
Promise.all()方法用于将多个Promise实例，包装成一个新的Promise实例
const a = Promise.all([a1,a2,a3]);
a的状态由a1、a2、a3决定，分成两种情况：
（1）只有a1、a2、a3的状态都变成fulfilled,a的状态才会变成fulfilled,此时a1、a2、a3的返回值组成一个数组，传递给a的回调函数。
（2）只要a1、a2、a3之中有一个被rejected,a的状态就变成rejected,此时第一个reject的实例的返回值，会传递给a的回调函数。

const p1 = new Promise((resolve,reject) => {
	resolve('hello');
})
.then(result => result)
.catch(e => e);用于捕获异常

const p2 = new Promise((resolve,reject) => {
	throw new Error('报错了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1,p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//["hello", Error: 报错了]

上面代码中，p1会resolved，p2首先会rejected，但是p2有自己的catch方法，该方法返回的是一个新的 Promise 实例，p2指向的实际上是这个实例。该实例执行完catch方法后，也会变成resolved，导致Promise.all()方法参数里面的两个实例都会resolved，因此会调用then方法指定的回调函数，而不会调用catch方法指定的回调函数。

const q1 = new Promise((resolve,reject) => {
	resolve('hello');
})
.then(result => result);

const q2 = new Promise((resolve,reject) => {
	throw new Error('报错了');
})
.then(result => result);

Promise.all([q1,q2])
.then(result => console.log(result))
.catch(e => console.log(e));
//Error: 报错了

Promise.race
Promise.race方法同样是将多个Promise实例包装成一个新的Promise实例
const p = Promise.race([p1,p2,p3]);
只要p1、p2、p3之中有一个实例率先改变状态，p得状态就会跟着改变。那个率先改变的Promise实例的返回值，就传递给p的回调函数

const p1 = new Promise((resolve,reject) => {
	setTimeout(() => reject(new Error('request timeout')),1000)
})
.then(result => result)

const p2 = new Promise((resolve,reject) => {
	setTimeout(() => resolve('hello'),500)
})
.then(result => result)
const p = Promise.race([p1,p2]);
p.then(response => console.log(response));
p.catch(error => console.log(error));
//hello

如果p1提前响应，则会返回Error: request timeout
catch
catch方法会捕获异步操作中抛出的错误

const promise = new Promise(function(resolve,reject) {
	throw new Error('test');
})
promise.catch(function(error) {
	console.log(error);
})
//Error: test

下面的例子更易理解

const someAsyncThing = function() {
	return new Promise(function(resolve,reject) {
		//下面一行会报错，因为x没有声明
		resolve(x + 2);
	})
}
someAsyncThing().then(function() {
	return someOtherAsyncThing();
}).catch(function(error) {
	console.log('oh no',error);
	//下面一行会报错，因为y没有声明
	y + 2;
}).then(function() {
	console.log('carry on');
}).catch(function(error) {
	console.log('carry on',error)
})
//oh no ReferenceError: x is not defined
//carry on ReferenceError: y is not defined

done
Promise对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为Promise内部的错误不会冒泡到全局）。因此，提供了一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。

asyncFunc()
		.then(f1)
		.catch(r1)
		.then(f2)
		.done();

原理：

Promise.prototype.done = function (onFulfilled,onRejected) {
	this.then(onFulfilled,onRejected)
	.catch(function (reason) {
		//抛出一个全局错误
		setTimeout(() => {throw reason},0)
	})
}

finally
finally方法用于指定不管Promise对象状态如何，都会执行的操作。它与done方法最大的区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。
例子：服务器使用Promise处理请求，然后使用finally方法关掉服务器

server.listen(0)
	.then(function () {
		//run test
	})
	.finally(server.stop);

原理：

Promise.prototype.finally = function (callback) {
	let P = this.constructor;
	return this.then(
		value => P.resolve(callback()).then(() => value),
		reason => P.resolve(callback()).then(() => {throw reason})
	)
}

常见的几种Promise处理问题的方法

Promise实例作为参数
一个异步操作返回的结果是返回另一个异步操作

const p1 = new Promise(function(resolve,reject) {
	setTimeout(() => reject(new Error('fail')),3000)
})
const p2 = new Promise(function(resolve,reject) {
	setTimeout(() => resolve(p1),1000)
})
p2
.then(result => console.log(result))
.catch(error => console.log(error))
//Error: fail p2以P1为参数，返回的结果其实是p1返回的结果

Promise处理未知(同步/异步)函数
对于一些未知的函数，我们不需要考虑它是同步还是异步，按照下面方法进行处理，即可使得同步函数同步执行，异步函数异步执行。
方法一：用async函数来写

const f = () => console.log('now');
(
	async () => f() //同步函数被异步方法包装之后会变成异步执行
)() //立即执行，使得同步函数不受异步方法影响
.then() //获取异步的结果
.catch() //捕获错误

方法二：使用new Promise()

const m = () => console.log('now');
(
	() => new Promise(
		resolve => resolve(m())
	)
)()
console.log('next')
//now 
//next

方法三：Promise.try

const n = () => console.log('now');
Promise.try(n);
console.log('next');

Promise实现Ajax

const getJSON = function(url) {
	const promise = new Promise(function(resolve,reject) {
		const handler = function() {
			if(this.readyState !== 4) {
				return;
			}
			if(this.status === 200) {
				resolve(this.response);
			} else {
				reject(new Error(this.statusText));
			}
		}
		const client = new XMLHttpRequest();
		client.open('GET',url);
		client.onreadystatechange = handler;
		client.responseType = 'json';
		client.setRequestHeader('Accept','application/json');
		client.send();
	})
	return promise;
}

getJSON("/sssposts.json").then(function(json) {
	console.log('Contents' + json);
},function(error) {
	console.log('出错了',error);
})

异步加载图片

function loadImageAsync(url) {
	return new Promise(function(resolve,reject) {
		const image = new Image();

		image.onload = function() {//加载成功
			resolve(image);
		}

		image.onerror = function() {//加载失败
			reject(new Error('Could not load image at' + url));
		}

		image.src = url;
	})
}

异步任务同步化

const time = 2000;
	const longTimeTask = async function(){
		return new Promise ((resolve, reject) => {
			setTimeout (() => {
				console.log(`等了${time || 'xx'}年，终于回信了`);
				resolve({'msg':'task done'});
			},time||1000)
		})
	}
	const exec1 = async function () {
		let result = await longTimeTask();//等上面任务执行完毕再执行下面的任务
		console.log('result after long time ===>', result)
	}
	exec1();

Promise源码实现

const PromiseCopy = function(fn){
    this.info = {
        status:"pending",
        value:""
    }
    const self = this
    self.onFulfilledArr = [] //then函数里面第一个回调函数的集合
    self.onRejectedArr = [] //then函数里面第二个回调函数的集合

    /**
     *根据规范，resolve 函数需要判断参数的几种情况
     *1、如果x是Promise实例本身，则抛出错误
     *2、如果x是一个Promise对象，那么then函数的执行取决于这个x的状态。如果x也调用resolve(y),其中y也是一个promise对象，那么then函数的执行取决于这个promise对象。依次类推，知道最后一个promise状态更改
     *3、如果x是一个thenable对象，就是一个对象包含then这个属性，或者是一个函数包含一个then的静态方法，那么直接执行then函数
     *4、如果x是一个普通值，直接变成onFulfilled状态，执行后面的then函数
     */
    //外部调用的resolve，只接收一个参数。要判断参数是否为实例的本身，需要一个中间函数，这儿定义为_resolve
    //真的的实现应该是内部的resolve，可以进行判断处理
    const _resolve = function(value){
        //PromiseCopy一旦被实例化，self即为实例本身
        resolve(self,value)
    }
    const resolve = function(promise,value){
        let ifexec = false
        //判断value是不是promise本身
        if(value === promise){
            //promises-aplus-tests只认TypeError这种错误形式
            reject(new TypeError("A promise cannot be onFulfilled with itself."))
        }
        //判断value是不是thenable对象
        if(value&&(Object.prototype.toString.call(value) === "[object Object]" || typeof value === "function")){
            try {
                const then = value.then
                //如果then是一个函数则执行这个函数
                if(typeof then === "function"){
                    //这个this指向的就是value
                    then.call(
                        value,
                        function(value){
                            //防止多次执行
                            if(ifexec){
                                return;
                            }
                            ifexec = true
                            resolve(promise,value)
                        },
                        function(value){
                            if(ifexec){
                                return;
                            }
                            ifexec = true
                            reject(value)
                        }
                    )
                    return;
                }
            } catch (e) {
                if(ifexec){
                    return;
                }
                ifexec = true
                reject(e)
            }
        }

        //如果x是一个promise对象，那么then的执行取决于x的状态
        if(value && value instanceof PromiseCopy && value.then === promise.then){
            if(value.info.status === "pending"){
                value.onFulfilledArr = self.onFulfilledArr
                value.onRejectedArr = self.onRejectedArr
            }
            if(value.info.status === "onFulfilled"){
                self.info.value = value.info.value
                self.onFulfilledArr.forEach((fn)=>fn(value.info.value))
            }
            if(value.info.status === "onRejected"){
                self.info.value = value.info.value
                self.onRejectedArr.forEach((fn)=>fn(value.info.value))
            }
            return;
        }

        //如果是一个普通的值
        //只有在pending状态下，当前状态才能改变为onFulfilled
        if(self.info.status === "pending"){
            self.info.status = "onFulfilled"
            self.info.value = value
            self.onFulfilledArr.forEach((fn)=>fn(value))
        }
    }
    const reject = function(value){
        if(self.info.status === "pending"){
            self.info.status = "onRejected"
            self.info.value = value
            self.onRejectedArr.forEach((fn)=>fn(value))
        }
    }

    try {
        fn(_resolve,reject)
    } catch (e) {
        setTimeout(()=>{
            self.onRejectedArr.forEach((fn) => fn(e))
        })
    }
}

//.then通过将then方法挂载到原型上来实现
PromiseCopy.prototype.then = function (onFulfilled, onRejected) {
    const self = this
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (val) => val;
    onRejected = typeof onRejected === "function" ? onRejected : (err) => {throw err}
    const newPromise = new PromiseCopy((resolve, reject) => {
        //如果PromiseCopy是resolve就直接执行onFulfilled
        if(self.info.status === "onFulfilled"){
            setTimeout(() => {
                try {
                    let value = self.info.value
                    value = onFulfilled(value)
                    resolve(value)
                } catch (e) {
                    reject(e)
                }
            })
        }
        if(self.info.status === "onRejected"){
            setTimeout(() => {
                try {
                    let value = self.info.value
                    value = onRejected(value)
                    resolve(value)
                } catch (e) {
                    reject(e)
                }
            })
        }
        // 根据PromiseA+中的2.2.1.1和2.2.1.2，onFulfilled和onRejected必须是函数，不然就会被忽略
        if(self.info.status === "pending"){
            self.onFulfilledArr.push((data)=>{
                setTimeout(()=>{
                    try {
                        let value = data
                        value = onFulfilled(value)
                        resolve(value)
                    } catch(e) {
                        reject(e)
                    }
                })
            })
            self.onRejectedArr.push((data)=>{
                setTimeout(()=>{
                    try {
                        let value = data
                        value = onRejected(value)
                        resolve(value)
                    } catch(e) {
                        reject(e)
                    }
                })
            })
        }
    })
     //根据PromiseA+ 2.2.7规范 then函数必须返回一个promise对象
    return newPromise
}
//resolve方法
PromiseCopy.resolve = function(data){
    return new PromiseCopy((resolve, reject)=>{
        resolve(data)
    })
}
//reject方法
PromiseCopy.reject = function(reason){
    return new PromiseCopy((resolve, reject)=>{
        reject(reason)
    })
}
/*
    all方法
    1、该方法接受一个数组，数组每一个元素都是一个promise对象
    2、只有所有promise都是onFulfilled的时候才会执行then回调，并且结果顺序和数组的一致
    3、如果其一个promise发生了reject那么就返回这个值
*/
PromiseCopy.all = function(data){
    let count = 0 //记录调用次数
    let total = data.length
    let result = []
    return new PromiseCopy((resolve, reject) => {
        for(let i = 0; i < total; i++){
            data[i].then(
                (res) => {
                    result.push(res)
                    ++count
                    if(count === total){
                        resolve(result)
                    }
                },
                (res) => {
                    return reject(res)
                }
            )
        }
    })
}
/*
    race方法
    1、该方法接受一个数组，数组的元素是promise
    2、只返回最快的那一个promise的值
    3、就算有错误也返回最快那一个promise的值
*/
PromiseCopy.race = function(data){
    const total = data.length
    return new PromiseCopy((resolve,reject) => {
        for(let i = 0; i < total; i++){
            data[i].then(
                (res) => {
                    resolve(res)
                },
                (res) => {
                    return reject(res)
                }
            )
        }
    })
}
/*
    catch方法
*/
PromiseCopy.prototype.catch = function(onRejected){
    return this.then(null, onRejected)
}
/*
    deferred方法
*/
PromiseCopy.defer = PromiseCopy.deferred = function(){
    let dfd = {}
    dfd.promise = new Promise((resolve, reject) => {
        dfd.resolve = resolve
        dfd.reject = reject
    })
    return dfd
}

promise源码实现