异步操作之promise

深碍√TFBOYSˉ_ 2022-05-15 00:50 281阅读 0赞

### 文章目录 ###

*   *  Promise介绍
     *  基本用法
     *  API方法介绍
     *  常见的几种Promise处理问题的方法
     *  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方法的对象

（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

下面的例子更易理解

**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**

**异步加载图片**

**异步任务同步化**

## Promise源码实现 ##

[promise源码实现][promise]

[promise]: https://juejin.im/post/6869383213307920392/