本文详细介绍了Promise的基本概念、状态转换、使用优势及常见方法，通过实例解析了回调地狱问题和Promise如何解决。文章还提供了一个自定义Promise类的实现，帮助读者深入理解其工作原理，并探讨了Promise的链式调用、异常处理和状态管理等关键问题。
“1”基础，自定义promise，你心动了吗？
不论是面向就业还是正在学习前端的小伙伴，promise绝对是绕不过的知识点
正所谓学习一个技能的最好办法是自己创造一个一样的技能，甚至超越（瞎编的，但确实是这样）
我们在学习promise的时候，应该需要注意很多问题，如果不了解这些，那promise整个运行过程，我敢说你绝对不会清晰，但是……但是……，看完我这篇文章，让你明明白白入坑 promise ^ - ^
1、promise你了解多少？
-
抽象表达:
期约是对尚不存在结果的一个替身，而Promise 是一门新的技术(ES6 规范)，是 JS 中进行异步编程的新解决方案
-
具体表达:
- 从语法上来说: Promise 是一个构造函数
- 从功能上来说: Promise 对象用来封装一个异步操作并可以获取其 成功 / 失败 的结果值
2、promise的状态
初始状态为pending，表示正在进行或者即将完成（不确定的状态）
- pending 变为 fulfilled（期约已完成，成功）
- pending 变为 rejected（期约已完成，失败）
只有这 2 种状态改变过程, 且一个 promise 对象只能改变一次，后续不能更改一个已经完成的promise状态，无论变为成功还是失败, 都会有一个结果数据
3、使用promise有什么好处？
-
指定回调函数的方式更灵活
之前是必须在启动异步之前指定，而promise是：启动异步任务——>返回promise对象——>给promise绑定回调函数，而且可以在异步任务结束后指定多个
-
支持链式调用，可以解决回调地狱问题
回调地狱是什么？——回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调函数执行的条件。回调地狱会带来什么问题？——如果复杂的嵌套回调，代码会无限想右延伸，代码风格十分不友好，不便于阅读，其次，多层嵌套不便于维护
下面实际看一下回调地狱和如何解决回调地狱
//回调地狱
func1(function(result) {
func2(result, function(newResult) {
func3(newResult, function(finalResult) {
console.log('Got the final result: ' + finalResult)
func4············
}, failureCallback)
}, failureCallback)
}, failureCallback)
//使用promise解决回调地狱
func1().then(function(result) {
return doSomethingElse(result)
}).then(function(newResult) {
return doThirdThing(newResult)
}).then(function(finalResult) {
console.log('Got the final result: ' + finalResult)
}).catch(failureCallback)
4、怎么使用 promise ？
- Promise构造函数：Promise（executor）{ }
其中executor是执行器，在promise内部立即同步调用，异步操作在执行器中执行
- Promise.prototype.then( function one ( ) { } , function two ( ) { } )方法：
成功则执行第一个函数，失败则执行第二个函数，无论执行哪个函数，都返回一个新的promise对象（自定义promise中的关键问题）
- Promise.prototype.catch( function one ( ) { } )方法
then方法的语法糖，相当于then( undefined , function two ( ) { } )
- Promise.resolve ( ) 方法
一般用于生成一个成功状态的promise对象
- Promise.reject ( ) 方法
返回一个失败状态的promise对象
- Promise.all（ [ p1, p2, p3 , ··] ）方法
数组内的元素都是promise对象，该方法返回一个新的promise对象，只有数组中的所有的promise都变成成功状态，新的promise的状态才是成功
- Promise.race( [ p1, p2, p3 , ··] ) 方法
数组内的元素都是promise对象，该方法返回一个新的promise对象，数组中只要有一个promise的状态为成功，则新的promise则是成功，并且最终的新的promise的状态和结果由数组中第一个变为成功的promise对象决定
- Promise.prototype.done( ) 方法
Promise 对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为 Promise 内部的错误不会冒泡到全局）。因此，es6提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误
- Promise.prototype.finally( ) 方法
用于指定不管 Promise 对象最后状态如何，都会执行的操作。它与done方法的最大区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。
5、promise的几个关键问题
-
怎么改变promise的状态？
调用resolve函数，pending——>fulfilled，调用reject函数，pending——>rejected，抛出异常，pending——>rejected
-
一个promise指定多个成功或者失败的回调，都会调用吗？
只要当promise变成相应状态时就会调用
-
改变promise状态和指定回调函数谁先谁后？
(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
(2) 如何先改状态再指定回调?
① 在执行器中直接调用 resolve()/reject()
② 延迟更长时间才调用 then()(3) 什么时候才能得到数据?
① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据 -
promise.then()返回的新 promise 的结果状态由什么决定?
(1) 简单表达: 由 then()指定的回调函数执行的结果决定
(2) 详细表达:
① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
② 如果返回的是非promise的任意值, 新promise变为resolved, value为返回的值
③ 如果返回的是另一个新promise, 此promise的结果就会成为新promise的结果 -
promise 如何串连多个操作任务?
(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用
(2) 通过 then 的链式调用串连多个同步/异步任务
-
promise 异常传透是什么，怎么解决?
(1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,
(2) 前面任何操作出了异常, 都会传到最后失败的回调中处理
-
如何中断 promise 链?
(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
(2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象
到了激动人心的时刻了，怎么自定义一个promise呢？
根据上面提出的问题（需要注意的地方），我们就能将自己的promise封装的完整一些了
我们一起来淦吧！
class MYPromise {//我的类名，区分Promise
//构造函数
constructor(executor) {
this.myPromiseState = "pending";
this.myPromiseResult = null;
//当状态时pending时保存执行成功和失败的回调函数，等待状态改变
this.callbacks = [];//链式调用时，需要保存回调函数
const _this = this;
function resolve(data) {
if (_this.myPromiseState !== "pending") return;//对应状态一旦改变，promise的状态就不能改变
_this.myPromiseState = "fulfilled";
_this.myPromiseResult = data;
//内部异步改变状态时调用
setTimeout(() => {
_this.callbacks.forEach(item => {
item.onResolved(data);
})
}, 0);
}
function reject(data) {
if (_this.myPromiseState !== "pending") return;
_this.myPromiseState = "rejected";
_this.myPromiseResult = data;
//内部异步改变状态时调用
setTimeout(() => {
_this.callbacks.forEach(item => {
item.onRejected(data);
})
}, 0);
}
try {//抛出异常，调用reject，并且状态变成失败
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
// then 方法
then(onResolved, onRejected) {
const _this = this;
// 判断参数，处理catch异常穿透功能
if (typeof onRejected !== 'function') {
onRejected = reason => {
throw reason;
}
}
if (typeof onResolved !== 'function') {
onResolved = value => value
}
return new MYPromise((resolve, reject) => {
// 封装try catch函数
function callback(type) {
try {
let result = type(_this.myPromiseResult);
// 判断是不是promise对象
if (result instanceof MYPromise) {
//如果是一个promise对象
result.then(v => {
resolve(v);
}, r => {
reject(r);
})
} else {
resolve(result);
}
} catch (e) {
reject(e);
}
}
if (this.myPromiseState === "fulfilled") {
setTimeout(() => {
callback(onResolved);
}, 0);
}
if (this.myPromiseState === "rejected") {
setTimeout(() => {
callback(onRejected);
}, 0);
}
if (this.myPromiseState === "pending") {
this.callbacks.push({
onResolved: function() {
callback(onResolved);
},
onRejected: function() {
callback(onRejected);
}
});
}
})
}
// catch方法
catch (onRejected) {
return this.then(undefined, onRejected);
}
// resolve 方法
static resolve(value) {
return new MYPromise((resolve, reject) => {
if (value instanceof MYPromise) {
value.then(v => {
resolve(v);
}, r => {
reject(r);
})
} else {
resolve(value);
}
})
}
// reject 方法
static reject(reason) {
return new MYPromise((resolve, reject) => {
reject(reason);
})
}
// all 方法
static all(promises) {
return new MYPromise((resolve, reject) => {
// 维护一个变量，表示成功的个数
let count = 0;
// 维护一个数组，存放成功的promise的值
let arr = [];
for (let i = 0; i < promises.length; i++) {
promises[i].then(v => {
count++;
arr[i] = v;
if (count === promises.length) {//全部成功，新promise状态才会成功
resolve(arr);
}
}, r => {
reject(r);
})
}
})
}
// race 方法
static race(promises) {
return new MYPromise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(v => {
resolve(v);//有一个成功，则新promise状态为成功，且由数组中第一个成功的promise决定
}, r => {
reject(r);
})
}
})
}
}
//使用我自定义的promise
let p1 = new MYPromise((a, b) => {//使用a，b是为了说明这里的函数名不是决定性因素，不要被迷惑，真正起作用的是构造函数里面的resolve和reject函数
console.log(1111)
// a("ok")
// b('ok');
setTimeout(() => {
// a("ok")
b("err")
}, 0);
});
p1.then(v => {
console.log(v);
}, r => {
console.warn(r);
})
好了，淦完了，我相信大家一定都会了😜😜😜
最后一句，祝大家天天开心！
扫一扫
3851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
