前端JavaScript经典之Promise详解
1. Promise 由来
在以前我们实现异步是用的回调函数，当一个异步请求需要依赖上一个异步请求返回的结果的时候，就会形成如下这种的调用结构。
请求1(function (结果1) {
请求2(function (结果2) {
请求3(function(结果3)) {
请求4(function(结果4) {})
}
});
});这种结构看着很杂乱且不易维护，被我们亲切的叫做 “回调地狱”。为了解决回调地狱的问题，Promise 就诞生了。
Promise 诞生的使命：优雅的去表示异步回调。
2. Promise 基础概念
2.1 创建 promise 实例
Promise 是一个构造函数，所以我们在调用一个 Promsie 的时候，要用 new Promsie 的方式去调用。
const ps = new Promise();
new Promise 接受一个函数类型的参数。这个函数又接收两个参数 resolve 和 reject，分别对映成功回调和失败回调。Promise 内部有 3 种状态 pending（进行时），fulfilled（已成功），rejected（已失败）。且这三种状态是不可逆的，只能由 pending 到 fulfilled，pending 到 rejected。resolve 使 promise 状态由 pending 到 fulfilled，reject 使 promise 状态由 pending 到 rejected。
const ps = new Promise(function () {});
const ps = new Promise(function (resolve, reject) {
let number = 10;
if (number >= 10) {
resolve(number);
} else {
reject("number 小于10");
}
});
2.2 实例方法
为了更好的控制下一步执行，又诞生了三个实例方法 then、catch、finally。
2.2.1 then 方法
then 方法一般接受两个参数 resolve、reject。分别对应成功时的回调和失败时的回调。
成功状态的 promise 实例
const ps1 = new Promise(function (resolve, reject) {
let number = 10;
if (number >= 10) {
resolve(number);
} else {
reject("number 小于10");
}
});
ps1.then(function (res) {
console.log(res);
});
失败状态的 promise 实例
const ps2 = new Promise(function (resolve, reject) {
let number = 9;
if (number >= 10) {
resolve(number);
} else {
reject("number 小于10");
}
});
ps2.then(
function (res) {},
function (err) {
console.log(err);
}
);
2.2.2 catch 方法
then 方法支持链式调用，then 的执行严重依赖上一步的结果，上一步如果没有结果，那么下一步就不会执行。但是每一步都写 reject 特别麻烦，所以诞生了 catch，then 就可以省略 reject 方法，reject 方法就交给 catch 执行，同时 catch 还可以捕获执行 resolve 的异常。
const ps2 = new Promise(function (resolve, reject) {
let number = 9;
if (number >= 10) {
resolve(number);
} else {
reject("number 小于10");
}
});
ps2
.then(function (res) {})
.catch(function (err) {
console.log(err);
});2.2.3 finally 方法
有的时候，无论成功还是失败都需要执行一些操作，就诞生了 finally。我们可以在这做一些清理工作。
const ps2 = new Promise(function (resolve, reject) {
let number = 9;
if (number >= 10) {
resolve(number);
} else {
reject("number 小于10");
}
});
ps2
.then(function (res) {})
.catch(function (err) {
console.log(err);
})
.finally(function () {
console.log("end");
});
2.2.4 then 的链式调用
因为 then 方法支持链式调用，所以我们需要知道使用 then 方法会有什么效果。只要调用 promise 实例的 then 方法一定产生一个新的 promise，这个 promise 的状态由里面的函数决定。函数什么时候有结果，这个新 promise 状态什么时候由 pending 转 fulfilled。catch 和 finally 同理。
const ps = new Promise(function (resolve, reject) {
let number = 10;
if (number >= 10) {
resolve(number);
} else {
reject("number 小于10");
}
});
ps.then(function (res) {
return res * 10;
})
.then(function (res) {
return res + 2;
})
.then(function (res) {
if (res > 100) {
console.log(res);
} else {
console.log("最后结果小于100");
}
});
3. Promise 原型方法
为了满足更多的业务需要，又诞生了 6 个原型方法 Promise.all()、Promise.allSettled()、Promise.any()、Promise.race()、Promise.reject()、Promise.resolve()。且都会返回一个确定状态的 Promsie 对象。
统一使用两个成功异步 ps1、ps2。两个失败异步 ps3、ps4。作为测试用例。如下：
const ps1 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve("成功结果1");
}, 1000);
});
const ps2 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve("成功结果2");
}, 2000);
});
const ps3 = new Promise(function (resolve, reject) {
setTimeout(() => {
reject("失败结果1");
}, 3000);
});
const ps4 = new Promise(function (resolve, reject) {
setTimeout(() => {
reject("失败结果2");
}, 2000);
});3.1 Promise.all()
通过数组的形式传入异步操作，所有的异步执行都成功，才执行成功，如果有一个失败了，就执行失败。例子如下：
都成功，执行 then 方法，成功返回结果，通过 res 以数组的方式返回
Promise.all([ps1, ps2])
.then(function (res) {
console.log("都成功", res);
})
.catch(function (err) {
console.log(err);
});
按传入顺序执行，如果有一个异步执行失败，中断其他异步操作，执行 catch 方法，通过 err 返回失败结果
Promise.all([ps1, ps2, ps3, ps4])
.then(function (res) {
console.log("都成功", res);
})
.catch(function (err) {
console.log("执行失败", err);
});
3.2 Promise.allSettled()
所有执行都有结果了就执行，无论成功还是失败
Promise.allSettled([ps1, ps2, ps3, ps4]).then(function (res) {
console.log("都返回结果", res);
});
3.3 Promise.any()
任意异步成功了就执行
Promise.any([ps1, ps2, ps3, ps4]).then(function (res) {
console.log("任意成功", res);
});
3.4 Promise.race()
任意异步成功或失败就执行。
Promise.race([ps1, ps2, ps3, ps4]).then(function (res) {
console.log("任意成功或失败", res);
});
3.5 Promise.reject()
返回一个状态为 rejected 的 Promise 对象
3.6 Promise.resolve()
会接收 4 种类型的参数：promise 实例 、具有 then 方法的对象、没有 then 方法的对象、不传参
当参数是一个 Promise 实例时，直接返回这个实例。
Promise.resolve(ps1);
当参数是一个具有 then 方法的对象时，将这个对象转为 Promise 对象，并立即执行对象的 then 方法
let obj = {
name: "yqcoder",
then(resolve) {
resolve(this.name);
},
};
Promise.resolve(obj);
当参数是一个没有 then 方法的对象，或者参数不是对象时，就会返回状态为 fulfilled 的新的 Promise 对象，并将参数传入下一个 then。
let obj = {
name: "yqcoder",
};
let ps = Promise.resolve(obj);
ps.then(function (res) {
console.log("结果", res);
});
当不带任何参数时，就会返回一个状态为 fulfilled 的 Promise 对象
Promise.resolve();
总结
到此这篇关于前端JavaScript经典之Promise的文章就介绍到这了,更多相关前端JS Promise详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了小程序实现上传视频功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
22 行 JavaScript 代码实现 QQ 群成员提取器，如果没有达到效果可能原因一是QQ版本升级了，二是博客里面的代码也有些繁琐2013-10-10
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要给大家介绍了光宇微信小程序单页面应用路由的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
js报错:Maximum call stack size exceeded的解决方法
这篇文章主要给大家介绍了关于js报错Maximum call stack size exceeded的解决方法,文中通过实例代码将解决的方法介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了JavaScript设计模式之单件模式介绍,单件模式,就是静态化的访问中已经实例化的对象,这个对象只能通过一个唯一的入口访问,已经实例或待实例化的对象,需要的朋友可以参考下2014-12-12
JavaScript中停止执行setInterval和setTimeout事件的方法
这篇文章主要介绍了JavaScript中停止执行setInterval和setTimeout事件的方法,本文给出操作实例代码和语法介绍,需要的朋友可以参考下2015-05-05
对付乱码我都是用过滤器做字符编码过滤的，Get方法过滤器监听不到，所以我一直喜欢使用Post方法，下面对Ajax Get和Post方法做一对比,需要了解的朋友可以 参考下2012-12-12
这篇文章主要为大家详细介绍了js+cavans实现图片滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了关于微信jssdk实现多图片上传的一点心得分享,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
最新评论