promise基础使用

promise

  • 用来管理异步操作的工具,new Promise(function(resolve,reject){})
  • Promise后面.then创建的是微任务
new Promise(function(resolve,reject){
	//操作一
	let a=0;
	if(a==0){
		resolve(111);//放行,有这个.then里面的才会执行
	}else{	
		reject("异常信息1");//用于异常时禁止.then执行,执行.catch
	}
}).then(function(e){
	new Promise(function(resolve,reject){
		//异步操作二
		resolve(222);
	}).then(function(e){
		//异步操作三
	})
}).catch(function(e){
	console.log(e);
}).finally(function(){
	console.log("完成了")
})
  • reject()和resolve()不能同时执行,不同条件执行不同结果
  • 参数resolve,
    控制.then的执不执行,没写resolve,then就不执行
  • 参数reject,
    reject()小阔号里放异常处理的信息,有reject后面没有.catch则会报错
  • .then()方法
    then(function(e){})这里的e就是resolve()小括号里传过来的参数
  • catch()方法,
    小括号里面放函数,在reject()触发后,catch就会执行,其他情况不会执行
    .catch(function(e){})这里的e就是reject()小括号里传过来的参数
  • .finally()方法,
    不管Promise中放行还是异常,都会执行,一般放在最后当做收尾执行的

.then里面有两个函数,不用写catch

new Promise(function(resolve,reject){
	let a = 1;
	if(a==0){
		resolve("正常");
	}else{
		reject("异常")
	}
}).then(function(val1){
	console.log(va1l)
},function(val2){
	console.log(val2)	
})
  • 当then里面参数是两个函数时,第一个函数里的形参是resolve()里的值,第二个函数里的形参是reject()里的值
  • 当then里面只有一个函数时,有reject后面没有.catch则会报错

多个then时

在这里插入图片描述
在这里插入图片描述

  • 这两种写法的含义是不同的,所以一个用的resolve,一个用的return

Promise.all()

  • 用于管理多个promise对象确保处理完毕,再通过返回值执行不同操作
let p1 = new Promise(function(resolve){
	resolve("111");
}).then(function(val){
	return 444;
}).then(function(val){
	return 555;
})
let p2 = new Promise(function(resolve){
	resolve("222");
})
let p3 = new Promise(function(resolve){
	resolve("333");
})
Promise.all([p1,p2,p3]).then(function(val){
	console.log(...val);//结果是555 222 333
})

通过Promise.all()获取到所有的promise对象的返回值,

  • Promise.all([a,b,c]).then(function(val){})里面的val以数组的形式存着每个promise对象a,b,c最后的返回值
  • 当你获取的所有对象返回值中有一个是错误reject的返回值,那就只有这一个值,其他正确的值不会获取
  • 有多个错误reject的返回值,只获取那个最早reject的返回值

Promise.race()

let p1 = new Promise(function(resolve){
	resolve("111");
}).then(function(val){
	return 444;
}).then(function(val){
	return 555;
})
let p2 = new Promise(function(resolve){
	resolve("222");
})
let p3 = new Promise(function(resolve){
	resolve("333");
})
Promise.race([p1,p2,p3]).then(function(val){
	console.log(val);//结果是222
})
  • 这里面的val为最先执行完的Promise对象的返回值
  • 通过Promise.race()获取到最先完成的promise对象的返回值,不管正常resolve还是异常reject都是获取最早的返回值
  • 当返回值是同时的时候,按race([])里面书写的顺序来获取返回值
let p1 = new Promise(function(resolve){
	resolve("111");
}).then(function(val){
	return 444;
}).then(function(val){
	return 555;
})
let p2 = new Promise(function(resolve){
	resolve("222");
})
let p3 = new Promise(function(resolve){
	resolve("333");
})
Promise.race([p1,p3,p2]).then(function(val){
	console.log(val);//这里的结果就是333
})
  • 因为p2和p3时同时获得返回值的,但是在race中的顺序是p3在前,所以结果是p3的返回值

ES7新增方法

async和await

  • async修饰的函数专门用于管理异步操作的执行顺序
  • await必须写在async修饰的函数里面
  • await修饰的promise对象只有在上一个promise对象执行完毕(reject或resolve)才会执行,否则一直等待
async function fn1(){
	await new Promise(function(resolve,reject){
		setTimeout(function(){
			console.log("111");
			resolve();
		},500)
	})
	await new Promise(function(resolve,reject){
		setTimeout(function(){
			console.log("222");
			resolve();
		},300)
	})
	await new Promise(function(resolve,reject){
		setTimeout(function(){
			console.log("333");
			resolve();
		},400)
	})
	await new Promise(function(resolve,reject){
		setTimeout(function(){
			console.log("444");
			resolve();
		},100)
	})
}
fn1();//结果111 222 333 444

利用这个方法获取全部promise对象的返回值,作用与promise.all()一样

async function fn(){
            let a = await new Promise(function(resolve,reject){
                setTimeout(() => {
                    console.log("张三");
                    resolve(11);
                }, 500);
            })
            let b = await new Promise(function(resolve,reject){
                setTimeout(() => {
                    console.log("李四");
                    resolve(22);
                }, 400);
            })
            let c = await new Promise(function(resolve,reject){
                setTimeout(() => {
                    console.log("王五");
                    reject(33);
                }, 300);
            }).catch(function(v){
                console.log(v);
                return v;
            })
            let d = await new Promise(function(resolve,reject){
                setTimeout(() => {
                    console.log("赵六");
                    resolve(44);
                }, 300);
            })
            return [a,b,c,d]  
        }
        let p = fn();
        p.then(function(val){
            console.log(val);
        },function(val){
            console.log(val);
        })

猜你喜欢

转载自blog.csdn.net/q1553048604/article/details/129010652
今日推荐