Promise
基础
- 一个Promise对象必然处于三种状态中的一种
状态 | 说明 |
---|---|
pending | 待定( 初始状态,既没有被兑现,也没有被拒绝 ) |
fulfilled | 已兑现( 意味着操作成功完成 ) |
rejected | 已拒绝( 意味着操作失败 ) |
- console.log(new Promise(()=>{}))
/控制台打印:
Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined
-
一个Promise对象如果被resolve或者reject,那么状态就不能再进行改变了
-
.then 和 .catch
/.then() 和 .catch() 方法都会返回一个新的 Promise对象, 并且两者都是异步操作/
.then(func1(), func2()) : 用于状态改变时的Promise对象进行调用
- func1 : 状态成功时调用,返回新的Promise,return的值作为新的Promise的result值
- func2(可选) :状态失败时调用,返回新的Promise,return的值作为新的Promise的result值
.catch() 方法相当于 第一个参数传null的.then()方法,即:
.catch((err) => console.log('rejected', err));
等同于:.then(null, (err) => console.log("rejected:", er));
/在链式调用中,如果中途出现了状态为reject的Promise对象,那么会自动向下寻找最近的失败状态的回调函数,找到了就从失败状态的回调函数继续向下执行,找不到就报错/
then 方法返回的也是一个 Promise 对象,并且这个 Promise 对象的状态由 then 内部的回调函数的执行结果来决定,
不取决于 then 中执行的是成功的回调还是失败的回调。即:then执行的回调函数的 return 值
- 如果回调函数的 return 值是 非promise类型的值 , 则 then 方法返回的promise对象的状态为成功fulfilled ,状态值为 return 的值
- 如果回调函数没有 return 值,根据 js 中的函数的定义,函数的默认 return 值为 undefined,而 undefined 也是 非promise类型的值,所以结果同上
- 如果回调函数的 return 值 是 promise对象 ,则 then 方法返回的promise对象的状态则取决于这个 return 中的 promise对象的内部状态,
内部为resolve, 则 then 返回的状态为fulfilled,内部为reject,则 then 返回的状态为rejected,状态值为resolve / reject 调用时传入的实参
- 示例
new Promise((resolve, reject)=>{
resolve(100);
}).then((value)=>{
console.log(value); // 100
return 200;
}).then((value)=>{
console.log(value); // 200
return new Promise((resolve, reject)=>{
reject('error');
});
}).then((value)=>{
console.log(value); // 未执行这里
return 300;
}).catch((error)=>{
console.log(error); // error
return 400;
}).then((value)=>{
console.log(value); // 400
})
进阶
async 和 await
-
async是函数的修饰符,被async修饰的函数会默认返回一个成功状态的Promise对象,Promise对象的结果为:被修饰的函数的返回值
-
await 是一个只能放在async定义的函数内的修饰符
- 如果被修饰的内容是Promise对象,那么返回值就是Promise对象的结果
- 如果被修饰的内容是其他值,那么就正常返回
-
示例
-
async function fn() { let a = await 1; let b = await new Promise(function (res,rej){ setTimeout(function (){ res(2); }) }); let c = 3; console.log(a,b,c); //打印结果为:1,2,3 return 'hello world'; } fn().then(function (val){ console.log(val); // 打印结果为:'hello world' })
-
方法中嵌套return异步Promise
function func1() {
return new Promise((resolve, reject)=>{
resolve(100);
}).then(()=>{
return new Promise((resolve, reject)=>{
resolve(300);
})
})
}
let result1 = func1();
result1.then((value)=>{
console.log(value); // 300
})
Promise.all()
-
如果数组中所有的 promise的状态都为 resolved时,all方法的状态就为 resolved,如果有一个状态变成了 rejected,那么 all方法的状态就会变成 rejected,并且结果只为第一个reject的Promise的结果
-
参数:一个数组,数组的每一项都是一个 promise对象
-
let p1 = new Promise((resolve, reject)=>{ resolve(100); }) let p2 = new Promise((resolve, reject)=>{ resolve(200); }) let p3 = new Promise((resolve, reject)=>{ reject(300); }) let p4 = new Promise((resolve, reject)=>{ reject(400); }) Promise.all([p1,p2]).then((res)=>{ console.log(res); // [100, 200] }); Promise.all([p1,p2,p3,p4]).then(()=>{ },(err)=>{ console.log(err); // 300 });
Promise.any()
-
如果数组中有一个Promise的状态为 resolve,那么any()方法的状态就会变为resolve,结果为第一个状态为resolve的Promise的结果,如果数组中所有的 promise的状态都为rejected,那么any()方法的结果为rejected
-
参数:一个数组,数组的每一项都是一个 promise对象
-
let p1 = new Promise((resolve, reject)=>{ reject(100); }) let p2 = new Promise((resolve, reject)=>{ resolve(200); }) let p3 = new Promise((resolve, reject)=>{ resolve(300); }) let p4 = new Promise((resolve, reject)=>{ reject(400); }) Promise.any([p1,p2,p3]).then((res)=>{ console.log(res); // 200 }); Promise.any([p1,p2,p3,p4]).then((res)=>{ console.log(res); // 200 });
Promise.finally()
-
不管Promise的状态是什么都会执行的操作,其他用法同 then方法
-
let p = new Promise((resolve, reject)=>{ resolve(100); }) .then((res)=>{ console.log(res); // 100 }) .finally(()=>{ console.log('end'); // end }) .then(()=>{ console.log('aaaaa'); // aaaaa }) .finally(()=>{ console.log('end'); // end return new Promise((resolve, reject)=>{ reject(10000); }) }) .catch((value)=>{ console.log(value); // 10000 }) .finally(()=>{ console.log('end'); // end })
Promise.race()
-
race的状态为数组中第一个状态发生改变的Promise的状态,结果为这个Promise的结果
-
let p1 = new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve(100); }, 1000); }) let p2 = new Promise((resolve, reject)=>{ resolve(200); }) let p3 = new Promise((resolve, reject)=>{ reject(300); }) Promise.race([p1,p2,p3]).then((res)=>{ console.log(res); // 200 })