Promise 三种状态、链式使用、all

一、三种状态

一个简单的异步操作,经过Promise封装,可以使这个操作呈现3种状态:

  1. 等待态(pending)
    比如,正在进行网络请求,或者定时器还没到时间。
  2. 满足态(fulfil)
    主动调回resolve()时,就是该状态,此时会回调then()
  3. 拒绝态(reject)
    主动回调reject()时,就是该状态,此时会回调catch()

在这里插入图片描述

二、链式使用

现在有个需求:利用异步发送请求,并对收到的数据进行多次处理;
即,网络请求->aaa–>处理aaa111—>处理aaa111.asd---->处理
3次异步处理

new Promise((resolve, reject)=>{
    
    
	setTimeout( ()={
    
    //请求数据代码...},1000);
	if(data){
    
    
		resolve(data);
	}else{
    
    
		reject("err message: data was not found!");
	}
}).then( (data)=>{
    
    
	//第一次开始...

	//进行第一次结果处理...
	return new Promise( (resolve) => {
    
     resolve( data+'111'); });
}).then( (data) => {
    
    
	//第二次开始...

	//进行第二次结果处理
	return new Promise( (resolve) => {
    
     resolve(data + '.asd'); });
}).then( data => {
    
    
	//第三次开始...
}).catch( (err)=> {
    
    
	//处理错误代码...
});

语法糖:
可以把
return new Promise( (resolve) => { resolve( data+'111'); });
简写成:return data + '111';return Promise,resolve(data + '111');

可以把
return Promise.resolve('err');
简写成:
throw "err ";这样异常还是会被catch到

三、Promise.all()方法

为什么引入all ?

项目开发中,有这么个异步需求:会发送发出2个ajax请求,但必须要等2个请求都完成才能进行下一步的操作,怎么实现?
定义2个boolean,分配给2个请求的执行代码中,然后在外面判断,是否( a1 && a2),随后就开始异步的操作。
但是,这种方法可以被优化,于是Promise提供了all方法

使用实例:

Promise.all([
	new Promise( (resolve, reject)=> {
    
    
		//网络请求a1
		setTimeout( ()=>{
    
     resolve('a1') },1000);
	}),
	new Promise( (resolve, reject)=> {
    
    
		//网络请求a2
		setTimeout( ()=>{
    
     resolve('a2')},2000);
	})
]).then( results => console.log(results));

注意:results返回的是 [ ] 数组,里面有2个字符串,分别对应resolve()中的内容

猜你喜欢

转载自blog.csdn.net/weixin_42557786/article/details/115130623