概念
Promise 是一个 ECMAScript 6 提供的类,是异步编程的一种解决方案。
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。
有三种状态:pending(进行中)、resolved/fulfilled(已完成)、rejected(失败),一旦状态改变不会再改变(从Pending变为Resolved和从Pending变为Rejected)。所以也意味着一旦建立一个新的Promise,就无法中途取消。
存在的意义
更加优雅地书写复杂的异步任务。
以前的实现方法会形成回调地狱,令代码层层嵌套。不利于异常处理和后续的代码维护。
支持多个并发的请求,获取并发请求的数据。
Promise 不是一种将异步转换为同步的方法,只是一种更好的编程风格
// 实现分三次输出字符串,第一次间隔1秒,第二次间隔4秒,第三次间隔3秒
// 函数回调
setTimeout(function () {
console.log("First");
setTimeout(function () {
console.log("Second");
setTimeout(function () {
console.log("Third");
}, 3000);
}, 4000);
}, 1000);
// Promise
// 将嵌套格式变成了顺序格式
new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("First");
resolve();
}, 1000);
}).then(function () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("Second");
resolve();
}, 4000);
});
}).then(function () {
setTimeout(function () {
console.log("Third");
}, 3000);
});
基本用法
Promise构造函数只有一个参数,是一个函数;该函数包含两个参数(也都是函数):resolve、reject;
resolve表示正常
reject表示异常
Promise有三个方法:.then()、.catch()、.finally();分别表示正常执行序列、异常处理序列、最后一定会执行的序列; .then() 传入的函数会按顺序依次执行,有任何异常都会直接跳到 catch 序列
tips:
then 块默认会向下顺序执行,return 是不能中断的,可以通过 throw 来跳转至 catch 实现中断。
当需要多次顺序执行异步操作的时候,适合用 Promise 而不是传统回调函数
当你又需要调用一个异步任务的时候,需要再写一个 then 而不是在当前的 then 接着编程
扩展功能
.all()表示完成所有Promise;
.race()表示完成一个Promise即可
// 一个例子
let p1 =new Promise(function(resolve,reject){
resolve(1);
});
let p2 = new Promise(function(resolve,reject){
resolve(2);
});
let p3 = new Promise(function(resolve,reject){
resolve(3);
});
Promise.all([p1, p2, p3]).then(function (results) {
console.log('success:'+results);
}).catch(function(r){
console.log("error");
console.log(r);
});
Promise.race([p1, p2, p3]).then(function (results) {
console.log('success:'+results);
}).catch(function(r){
console.log("error");
console.log(r);
});
与异步函数的结合使用
异步函数 async function 中可以使用 await 指令,<u>await 指令后必须跟着一个 Promise</u>,异步函数会在这个 Promise 运行中暂停,直到其运行结束再继续运行。
async function asyncFunc() {
let value = await new Promise(
function (resolve, reject) {
resolve("Return value");
}
);
console.log(value);
}
asyncFunc();