Promise是异步编程的一种解决方案,是一个对象,可以获取异步操作的消息,大大改善了异步编程的困难,避免了回调地狱,比传统的解决方案回调函数和事件更合理和更强大。
从语法上讲,Promise是一个对象,它可以获取异步操作的消息。提供了一个统一的API,各种异步操作都可以用同样的方法进行处理
Promise的实例有三个状态:Pending(进行中)、Resolved(已完成)、Rejected(已拒绝)
Promise的实例有两个过程:
pending > fulfiled :Resolved
pending > rejected :Rejected
创建Promise对象
const p1 = new Promise((resolve) => {
setTimeout(() => {
resolve("a");
}, 2000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject("b");
}, 1000);
});
then、catch、finally方法
then 方法:可以接收两个回调函数作为参数,第一个回调函数是Promise对象的状态改变为 resoved 是调用,第二个回调函数是 Promise 对象的状态变为 rejected 时调用。
catch方法:在执行resolve回调函数时,如果出错,抛出异常,不会停止运行,而是进入catch 方法中。若未定义reject回调函数则reject时会被当成error处理
finally方法:用于指定不管 Promise 对象最后状态如何,都会执行的操作。
resolve
p1.then(
(res_resolve) => {
console.log("resolved:", res_resolve); //resolved: a
},
(res_reject) => {
console.log("rejected:", res_reject);
}
)
.catch((res) => {
console.log("error:", res);
})
.finally(() => {
console.log("done"); //done
});
reject
p2.then(
(res_resolve) => {
console.log("resolved:", res_resolve);
},
(res_reject) => {
console.log("rejected:", res_reject); //rejected: b
}
).catch((res) => {
console.log("error:", res);
});
p2.then((res_resolve) => {
console.log("resolved:", res_resolve);
}).catch((res) => {
console.log("error:", res); //error: b 若未定义reject回调则reject时会被当成error处理
});
链式调用
p1.then(
(res_resolve) => {
console.log("p1 resolved:", res_resolve); //p1 resolved: a
return p2;
},
(res_reject) => {
console.log("p1 rejected:", res_reject);
}
)
.catch((res) => {
console.log("p1 error:", res); //p1 error: b
})
.then(
(res_resolve) => {
console.log("p2 resolved:", res_resolve); //p2 resolved: undefined
},
(res_reject) => {
console.log("p2 rejected:", res_reject);
}
)
.catch((res) => {
console.log("p2 error:", res);
});
似乎并不是想要的结果,修改如下:
p1.then(
(res_resolve) => {
console.log("p1 resolved:", res_resolve); //p1 resolved: a
return p2;
},
(res_reject) => {
console.log("p1 rejected:", res_reject);
}
)
.then(
(res_resolve) => {
console.log("p2 resolved:", res_resolve);
},
(res_reject) => {
console.log("p2 rejected:", res_reject); //p2 rejected: b
}
)
.catch((res) => {
console.log("p2 error:", res);
});
p1.then((res) => {
console.log("p1 resolved:", res); //p1 resolved: a
return p2;
})
.then((res) => {
console.log("p2 resolved:", res);
})
.catch((res) => {
console.log("p2 error:", res); //p2 error: b
});
async函数
async function func(params) {
return params;
}
func("a")
.then((res) => {
console.log(res);//a
return func("b");
})
.then((res) => {
console.log(res);//b
});
Promise.all方法
只有等所有请求都结束才会有结果,都成功才会执行then,返回结果按照参数顺序 const list1 = [
new Promise((resolve) => {
setTimeout(() => {
resolve("list1 resolve index:1");
}, 2000);
}),
new Promise((resolve) => {
setTimeout(() => {
resolve("list1 resolve index:2");
}, 1000);
}),
];
const list2 = [
new Promise((resolve) => {
setTimeout(() => {
resolve("list2 resolve index:1");
}, 3000);
}),
new Promise((resolve, reject) => {
setTimeout(() => {
reject("list2 reject index:2");
}, 2000);
}),
new Promise((resolve) => {
setTimeout(() => {
resolve("list2 resolve index:3");
}, 1000);
}),
];
const list3 = [
new Promise((resolve, reject) => reject("list3 reject index:1")),
new Promise((resolve, reject) => reject("list3 reject index:2")),
new Promise((resolve, reject) => reject("list3 reject index:3")),
];
Promise.all(list1).then((res) => {
console.log(res); //['list1 resolve index:1', 'list1 resolve index:2']
});
Promise.all(list2)
.then((res) => {
console.log(res);
})
.catch((res) => {
console.log(res); //list2 reject index:2
});
Promise.any方法
只要有一个成功,就会执行then,只有当所有的promise都失败,才算失败 Promise.any(list1).then((res) => {
console.log(res); // list1 resolve index:2
});
Promise.any(list2)
.then((res) => {
console.log(res); //list2 resolve index:3
})
.catch((res) => {
console.log("error:", res);
});
Promise.any(list3)
.then((res) => {
console.log(res);
})
.catch((res) => {
console.log("error:", res); //error: AggregateError: All promises were rejected
});
Promise.race方法
只要最快的那个,不管结果 Promise.race(list1).then((res) => {
console.log(res); // list1 resolve index:2
});
Promise.race(list2)
.then((res) => {
console.log(res); //list2 resolve index:3
})
.catch((res) => {
console.log("error:", res);
});
Promise.race(list3)
.then((res) => {
console.log(res);
})
.catch((res) => {
console.log("error:", res); //error: list3 reject index:1
});
超时处理
const timeoutPromise = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error("Request timeout")), 500);
});
Promise.race([p1, timeoutPromise])
.then((res) => console.log(res))
.catch((res) => console.log(res)); // Error: Request timeout
Promise.allSettled
等所有请求结束后,它不会执行.catch,只会执行.then Promise.allSettled(list1).then((res) => {
console.log(res); // [{status: 'fulfilled', value: 'list1 resolve index:1'},{status: 'fulfilled', value: 'list1 resolve index:2'}]
});
Promise.allSettled(list2)
.then((res) => {
console.log(res); //[{status: 'fulfilled', value: 'list2 resolve index:1'},{status: 'rejected', reason: 'list2 reject index:2'},{status: 'fulfilled', value: 'list2 resolve index:3'}]
})
.catch((res) => {
console.log("error:", res);
});
Promise.allSettled(list3)
.then((res) => {
console.log(res); //[{status: 'rejected', reason: 'list3 reject index:1'},{status: 'rejected', reason: 'list3 reject index:2'},{status: 'rejected', reason: 'list3 reject index:3'}]
})
.catch((res) => {
console.log("error:", res);
});
标签:异步,resolve,console,log,res,js,Promise,reject From: https://www.cnblogs.com/caroline2016/p/18360555