Promise使用

一、概述

支持链式调用，解决回调地狱问题。

1、promise 的状态

实例对象中的一个属性 『PromiseState』

• pending 未决定的
• resolved / fullfilled 成功
• rejected 失败

promise 的状态改变 只有这2 种。一个 promise 对象只能改变一次 。无论变为成功还是失败, 都会有一个结果数据，成功的结果数据一般称为 value, 失败的结果数据一般称为 reason。

1. pending 变为 resolved
2. pending 变为 rejected

2、promise 的基本流程

3、promise 的对象结果

对象结果属性为 PromiseResult。其中存放的是 resolve("结果") 或 reject("结果") 的结果。

let p = new Promise((resolve, reject)=>{
    resolve("结果")});

二、常用API

1、Promise 构造函数: Promise (excutor) {}

(1) executor 函数: 执行器 (resolve, reject) => {}

(2) resolve 函数: 内部定义成功时我们调用的函数 value => {}

(3) reject 函数: 内部定义失败时我们调用的函数 reason => {}

说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行,换话说Promise支持同步也支持异步操作

2、Promise.prototype.then 方法: (onResolved, onRejected) => {}

(1) onResolved 函数: 成功的回调函数 (value) => {}

(2) onRejected 函数: 失败的回调函数 (reason) => {}

说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调 返回一个新的 promise 对象

let p = new Promise((resolve, reject)=>{
    
	resolve("ok");
});
let result = p.then(value=>{
    
	//1、抛出错误
	// throw "出问题了";
	//2、返回非Promise类型的对象
	// return 521;
	//3、返回Promise对象
	return new Promise((resolve, reject)=>{
    
		resolve("success");
	});
})

3、Promise.prototype.catch 方法: (onRejected) => {}

(1) onRejected 函数: 失败的回调函数 (reason) => {}

说明: then()的语法糖, 相当于: then(undefined, onRejected)

(2) 异常穿透使用:当运行到最后,没被处理的所有异常错误都会进入这个方法的回调函数中

let p = new Promise((resolve, reject)=>{
    
    throw "错误！";
});
p.catch(reason=>{
    
    console.log(reason); //错误！
});

4、Promise.resolve 方法: (value) => {}

(1) value: 成功的数据或 promise 对象

说明: 返回一个成功/失败的 promise 对象,直接改变promise状态

如果传入的参数为 非Promise类型的对象，则返回的结果为成功promise对象。
如果传入的参数为 Promise类型的对象，则参数的结果决定了resolve的结果。

// 案例一（返回成功的promise对象）
Promise.resolve("结果信息");

// 案例二
Promise.resolve(new Promise((resolve, reject)=>{
    
	//reject("成功！");
    reject("失败！");
}));

5、Promise.reject 方法: (reason) => {}

(1) reason：失败的原因

说明：返回一个失败的 promise 对象，直接改变promise状态。

无论参数是什么，全部返回失败的promise对象。

//案例一（返回失败的promise对象）
Promise.reject("结果信息");

//案例二（返回一个失败的promise对象）
Promise.reject(new Promise((resolve, reject)=>{
    
	resolve("执行成功！");
}))

6、Promise.all 方法: (promises) => {}

promises: 包含 n 个 promise 的数组

说明: 返回一个新的 promise，只有所有的 promise 都成功才成功，只要有一 个失败了就直接失败

返回最先失败的结果。

let p1 = new Promise((resolve, reject)=>{
    
	setTimeout(()=>{
    
		reject("p1失败");
	},1000);
});
let p2 = Promise.resolve("p2成功");
let p3 = Promise.reject("p3失败");
Promise.all([p1,p2,p3]);

7、Promise.race 方法: (promises) => {}

(1) promises: 包含 n 个 promise 的数组

说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态,

let p1 = new Promise((resolve, reject)=>{
    
	setTimeout(()=>{
    
		reject("p1成功");
	},1000);
});
let p2 = Promise.resolve("p2成功");
let p3 = Promise.reject("p3失败");
Promise.race([p1,p2,p3]);

三、常见案例

1、链式调用

new Promise((resolve, reject)=>{
    
	resolve("p1成功");
}).then(value=>{
    
	console.log(value); //p1成功
	return new Promise((resolve, reject)=>{
    
		resolve("p2成功");
	})
}).then(value=>{
    
	console.log(value); //p2成功
          return "p3成功";
}).then(value=>{
    
	console.log(value) //p3成功
});

2、异常穿透

new Promise((resolve, reject)=>{
    
	console.log("111");
	reject("p1失败");
}).then(value=>{
    
	console.log("222");
}).then(value=>{
    
	console.log("333");
}).catch(reason=>{
    
	console.log(reason);
})

3、中断Promise

new Promise((resolve, reject)=>{
    
	console.log("111");
	return new Promise(()=>{
    });
}).then(value=>{
    
	console.log("222");
}).then(value=>{
    
	console.log("333");
}).catch(reason=>{
    
	console.log(reason);
})