[JavaScript]Promise详解(2)

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供的统一的接口，使得控制异步操作更加容易

基本用法

---

ES6规定，Promise对象是一个构造函数，用来生成Promise实例

下面代码创造了一个Promise实例

const promise = new Promise(function(resolve, reject) {

// … some code

if (/* 异步操作成功 */){

resolve(value);

} else {

reject(error);

}

});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不需要自己部署。

resolve函数的作用是：将Promise对象的状态从“未完成”变为“成功”（即从pending变为resolved），在异步操作成功时调用，并将异步操作的结果作为参数传递出去

reject函数的作用是：将Promise对象的状态从“未完成”变为“失败”（即从pending变为rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成之后，可以用then方法分别指定resolved状态和rejected状态的回调函数

promise.then(function(value) {

// success

}, function(error) {

// failure

});

then方法可以接受两个回调函数作为参数。

第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。

其中，第二个函数是可选的，不一定提供。这两个函数都接受Promise对象传出的值作为参数。

下面是一个Promise对象的简单例子。

function timeout(ms) {

return new Promise((resolve, reject) => {

setTimeout(resolve, ms, ‘done’);

});

}

timeout(100).then((value) => {

console.log(value);

});

上面代码中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间（ms参数）以后，Promise实例的状态变为resolved，就会触发then方法绑定的回调函数。

promise新建后就会立即执行在这里插入代码片

let promise = new Promise(function(resolve, reject) {

console.log(‘Promise’);

resolve();

});

promise.then(function() {

console.log(‘resolved.’);

});

console.log(‘Hi!’);

// Promise

// Hi!

// resolved

上面代码中，Promise新建后立即执行，首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出

如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的示例，表示抛出的错误；

resolve函数的参数除了正常的值以外，还可能是另一个Promise实例，比如下面：

const p1 = new Promise(function (resolve, reject) {

// …

});

const p2 = new Promise(function (resolve, reject) {

// …

resolve(p1);

})

在上面代码中，p1和p2都是Promise的实例，但是p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作。

注意：这时p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态。如果p1的状态是pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是resolved或者rejected，那么p2的回调函数将会立刻执行。

Promise提供的一些API

---

Promise.prototype.then()

Promise实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。

它的作用是为Promise实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数

then方法返回的是一个新的Promise实例（注意不是原来那个实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法

getJSON(“/posts.json”).then(function(json) {

return json.post;

}).then(function(post) {

// …

});

上面的代码使用then方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。

Promise.prototype.catch()

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

getJSON(‘/posts.json’).then(function(posts) {

// …

}).catch(function(error) {

// 处理 getJSON 和 前一个回调函数运行时发生的错误

console.log(‘发生错误！’, error);

});

上面代码中，getJSON()方法返回一个 Promise 对象，如果该对象状态变为resolved，则会调用then()方法指定的回调函数；

如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。

另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获。

Promise.prototype.finally()

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

551109730)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。