JS学习之Promise 对象
一、什么是Promise？我们用Promise来解决什么问题？
介绍
从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。你也可以理解为是“委托”对象，是一个专一处理异步处理类。
打个比方：想象一下，你准备面试某个公司的前端工程师。
你走进面试会场，当面试马上要开始时你发现简历忘带了，这时你怎么办？
你没有气馁。因为你很幸运，你有一个室友。
你马上给室友打电话寻求帮助，恳求室友帮你找到简历。你的室友承诺他一旦找到就立马回你消息。
假设简历被找到，室友给你回复信息：“太好了，我找到你的简历了！”假设简历未被找到，室友给你回复一条失败的信息，并解释他为什么没有找到简历。比如“对不起，我没有找到你的简历，因为你的保险柜钥匙丢了。”
与此同时，面试还要继续。但面试官并没有拿到真实的简历，而是得到一个正在找简历的承诺，同时面试官把该简历的状态设置成进行中（PENDING）。
你回答了所有问题。但不幸的是，能否得到这个工作还要依赖你简历的最终状态（FINAL STATUS）。
你的室友终于回消息了。正如我们前面讨论过的，如果他没有找到简历，他就需要发一个失败的信息并解释为什么没有找到。
如果是这种情况，面试结束，你被 拒绝（Rejected） 了。
如果室友找到了简历，他会很高兴的告诉你他找到了，而你将继续面试，并 获得（FULFILL） 这份工作。你的室友此时就是扮演者“Promise”的角色。
Promise 是一种用于管理和处理异步操作的对象。它代表了一个异步操作的最终结果，可以是成功的结果或失败的原因。
特点
-
异步操作：Promise 用于处理需要一定时间才能完成的异步操作，例如从服务器获取数据、读取文件等。
-
状态：Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。初始状态是 pending，当异步操作成功完成时，Promise 的状态变为 fulfilled，如果异步操作出现错误，则状态变为 rejected。
-
解决结果：当 Promise 的状态变为 fulfilled 时，会传递一个解决结果（通常是一个值）；当状态变为 rejected 时，会传递一个拒绝原因（通常是一个错误对象）。
语法
- 代码：
const myPromise = new Promise((resolve, reject) => { // 异步操作的逻辑 // 如果异步操作成功完成，调用 resolve 并传递结果 // 如果异步操作出现错误，调用 reject 并传递错误信息 }); myPromise.then((result) => { // 处理异步操作成功的结果 }).catch((error) => { // 处理异步操作失败的原因 });
- 解读：
在这个示例中，我们创建了一个新的 Promise 对象，并传入一个执行器函数。执行器函数接收两个参数：
resolve和reject。在执行器函数中，我们编写异步操作的逻辑，并在操作成功完成时调用resolve传递结果，或在出现错误时调用reject传递错误信息。然后，我们使用
then方法来处理异步操作成功的结果，传入一个回调函数，该函数会接收异步操作的结果作为参数。如果异步操作成功完成，该回调函数会被调用。如果异步操作出现错误，我们可以使用catch方法来处理错误，传入一个回调函数，该函数会接收错误信息作为参数。通过使用 Promise，我们可以更好地管理和处理异步操作，避免了回调地狱（callback hell）的问题。我们可以链式调用多个 Promise，使用
then方法将一个 Promise 的结果传递给下一个 Promise，以便依次处理多个异步操作。
回调地狱
我相信大家经常写这样的代码：
// 当参数a大于10且参数fn2是一个方法时 执行fn2 function fn1(a, fn2) { if (a > 10 && typeof fn2 == 'function') { fn2() } } fn1(11, function () { console.log('this is a callback') })
二、es6 promise用法大全
Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。
那就new一个
let p = new Promise((resolve, reject) => { //做一些异步操作 setTimeout(() => { console.log('执行完成'); resolve('我是成功！！'); }, 2000); });
Promise的构造函数接收一个参数：函数，并且这个函数需要传入两个参数：
- resolve ：异步操作执行成功后的回调函数
- reject：异步操作执行失败后的回调函数
then 链式操作的用法
所以，从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：
p.then((data)=>{ console.log(data); }).then((data)=>{ console.log(data); }).then((data)=>{ console.log(data); })
reject的用法 :
把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。看下面的代码。
let p = new Promise((resolve, reject) => { //做一些异步操作 setTimeout(function () { var num = Math.ceil(Math.random() * 10); //生成1-10的随机数 if (num <= 5) { resolve(num); } else { reject('数字太大了'); } }, 2000); }); p.then((data) => { console.log('resolved', data); }, (err) => { console.log('rejected', err); });
then中传了两个参数，then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。所以我们能够分别拿到他们传过来的数据。多次运行这段代码，你会随机得到下面两种结果：
- 成功：
resolved 3
- 失败：
rejected 数字太大了
catch的用法
我们知道Promise对象除了then方法，还有一个catch方法，它是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调。用法是这样：
let p = new Promise((resolve, reject) => { //做一些异步操作 setTimeout(function () { var num = Math.ceil(Math.random() * 10); //生成1-10的随机数 if (num <= 5) { resolve(num); } else { reject('数字太大了'); } }, 2000); }); p.then((data) => { console.log('resolved', data); }).catch((err) => { console.log('rejected', err); });
效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。请看下面的代码：
p.then((data) => { console.log('resolved', data); console.log(somedata); //此处的somedata未定义 }).catch((err) => { console.log('rejected', err); });
在resolve的回调中，我们console.log(somedata);而somedata这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，会得到这样的结果：
resolved 4
rejected ReferenceError: somedata is not defined
也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能
all的用法：谁跑的慢，以谁为准执行回调。all接收一个数组参数，里面的值最终都算返回Promise对象
Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。看下面的例子：
let Promise1 = new Promise(function(resolve, reject){}) let Promise2 = new Promise(function(resolve, reject){}) let Promise3 = new Promise(function(resolve, reject){}) let p = Promise.all([Promise1, Promise2, Promise3]) p.then(funciton(){ // 三个都成功则成功 }, function(){ // 只要有失败，则失败 })
有了all，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据，是不是很酷？有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。
race的用法：谁跑的快，以谁为准执行回调
race的使用场景：比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下：
//请求某个图片资源 function requestImg() { var p = new Promise((resolve, reject) => { var img = new Image(); img.onload = function () { resolve(img); } img.src = '图片的路径'; }); return p; } //延时函数，用于给请求计时 function timeout() { var p = new Promise((resolve, reject) => { setTimeout(() => { reject('图片请求超时'); }, 5000); }); return p; } Promise.race([requestImg(), timeout()]).then((data) => { console.log(data); }).catch((err) => { console.log(err); });
requestImg函数会异步请求一张图片，我把地址写为"图片的路径"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。
三、根据promiseA+实现一个自己的promise
步骤一：实现成功和失败的回调方法
要实现上面代码中的功能，也是promise最基本的功能。首先，需要创建一个构造函数promise，创建一个promisel类，在使用的时候传入了一个执行器executor，executor会传入两个参数：成功(resolve)和失败(reject)。之前说过，只要成功，就不会失败，只要失败就不会成功。所以，默认状态下，在调用成功时，就返回成功态，调用失败时，返回失败态。代码如下：
class Promise { constructor(executor) { //默认状态是等待状态 this.status = 'panding'; this.value = undefined; this.reason = undefined; //存放成功的回调 this.onResolvedCallbacks = []; //存放失败的回调 this.onRejectedCallbacks = []; let resolve = (data) => {//this指的是实例 if (this.status === 'pending') { this.value = data; this.status = "resolved"; this.onResolvedCallbacks.forEach(fn => fn()); } } let reject = (reason) => { if (this.status === 'pending') { this.reason = reason; this.status = 'rejected'; this.onRejectedCallbacks.forEach(fn => fn()); } } try {//执行时可能会发生异常 executor(resolve, reject); } catch (e) { reject(e);//promise失败了 } } }
promise A+规范规定，在有异常错误时，则执行失败函数。
constructor(executor){ ...... try { executor(resolve, reject); } catch (e) { reject(e); } }
步骤二：then方法链式调用
then方法是promise的最基本的方法，返回的是两个回调，一个成功的回调，一个失败的回调，实现过程如下：
then(onFulFilled, onRejected) { if (this.status === 'resolved') { //成功状态的回调 onFulFilled(this.value); } if (this.status === 'rejected') {//失败状态的回调 onRejected(this.reason); } } let p = new Promise(function () { resolve('我是成功'); }) p.then((data) => { console.log(data); }, (err) => { }); p.then((data) => { console.log(data); }, (err) => { }); p.then((data) => { console.log(data); }, (err) => { });
返回的结果是：
我是成功
我是成功
我是成功
复制代码为了实现这样的效果，则上一次的代码将要重新写过，我们可以把每次调用resolve的结果存入一个数组中，每次调用reject的结果存入一个数组。这就是为何会在上面定义两个数组,且分别在resolve()和reject()遍历两个数组的原因。因此，在调用resolve()或者reject()之前，我们在pending状态时，会把多次then中的结果存入数组中，则上面的代码会改变为：
then(onFulFilled, onRejected) { if (this.status === 'resolved') { onFulFilled(this.value); } if (this.status === 'rejected') { onRejected(this.reason); } // 当前既没有完成 也没有失败 if (this.status === 'pending') { // 存放成功的回调 this.onResolvedCallbacks.push(() => { onFulFilled(this.value); }); // 存放失败的回调 this.onRejectedCallbacks.push(() => { onRejected(this.reason); }); } }
Promise A+规范中规定then方法可以链式调用
在promise中，要实现链式调用返回的结果是返回一个新的promise，第一次then中返回的结果，无论是成功或失败，都将返回到下一次then中的成功态中，但在第一次then中如果抛出异常错误，则将返回到下一次then中的失败态中
链式调用成功时
链式调用成功会返回值，有多种情况，根据举的例子，大致列出可能会发生的结果。因此将链式调用返回的值单独写一个方法。方法中传入四个参数，分别是p2,x,resolve,reject,p2指的是上一次返回的promise，x表示运行promise返回的结果，resolve和reject是p2的方法。则代码写为：
function resolvePromise(p2,x,resolve,reject){ .... }
- 返回结果不能是自己
var p = new Promise((resovle,reject) => { return p; //返回的结果不能是自己， })
当返回结果是自己时，永远也不会成功或失败，因此当返回自己时，应抛出一个错误
function resolvePromise(p2, x, resolve, reject) { if (px === x) { return reject(new TypeError('自己引用自己了')); } .... }
- 返回结果可能是promise
function resolvePromise(promise2, x, resolve, reject) { //判断x是不是promise //规范中规定：我们允许别人乱写，这个代码可以实现我们的promise和别人的promise 进行交互 if (promise2 === x) {//不能自己等待自己完成 return reject(new TypeError('循环引用')); }; // x是除了null以外的对象或者函数 if (x != null && (typeof x === 'object' || typeof x === 'function')) { let called;//防止成功后调用失败 try {//防止取then是出现异常 object.defineProperty let then = x.then;//取x的then方法 {then:{}} if (typeof then === 'function') {//如果then是函数就认为他是promise //call第一个参数是this，后面的是成功的回调和失败的回调 then.call(x, y => {//如果Y是promise就继续递归promise if (called) return; called = true; resolvePromise(promise2, y, resolve, reject) }, r => { //只要失败了就失败了 if (called) return; called = true; reject(r); }); } else {//then是一个普通对象，就直接成功即可 resolve(x); } } catch (e) { if (called) return; called = true; reject(e) } } else {//x = 123 x就是一个普通值 作为下个then成功的参数 resolve(x) } }
- 返回结果可能为一个普通值，则直接 resolve(x);
- Promise一次只能调用成功或者失败
也就是当调用成功就不能再调用失败了，如果两个都调用的时候，哪个先调用就执行哪一个。代码部分还是上面那部分
个人认为，这个地方比较绕，需要慢慢的一步一步的理清楚。
根据promise A+规范原理，promise在自己的框架中，封装了一系列的内置的方法。
- 捕获错误的方法 catch()
- 解析全部方法 all()
- 竞赛 race()
- 生成一个成功的promise resolve()
- 生成一个失败的promise reject()
最后给大家附上全部源码，供大家仔细品读。
function resolvePromise(promise2, x, resolve, reject) { //判断x是不是promise //规范中规定：我们允许别人乱写，这个代码可以实现我们的promise和别人的promise 进行交互 if (promise2 === x) {//不能自己等待自己完成 return reject(new TypeError('循环引用')); }; // x是除了null以外的对象或者函数 if (x != null && (typeof x === 'object' || typeof x === 'function')) { let called;//防止成功后调用失败 try {//防止取then是出现异常 object.defineProperty let then = x.then;//取x的then方法 {then:{}} if (typeof then === 'function') {//如果then是函数就认为他是promise //call第一个参数是this，后面的是成功的回调和失败的回调 then.call(x, y => {//如果Y是promise就继续递归promise if (called) return; called = true; resolvePromise(promise2, y, resolve, reject) }, r => { //只要失败了就失败了 if (called) return; called = true; reject(r); }); } else {//then是一个普通对象，就直接成功即可 resolve(x); } } catch (e) { if (called) return; called = true; reject(e) } } else {//x = 123 x就是一个普通值 作为下个then成功的参数 resolve(x) } } class Promise { constructor(executor) { //默认状态是等待状态 this.status = 'panding'; this.value = undefined; this.reason = undefined; //存放成功的回调 this.onResolvedCallbacks = []; //存放失败的回调 this.onRejectedCallbacks = []; let resolve = (data) => {//this指的是实例 if (this.status === 'pending') { this.value = data; this.status = "resolved"; this.onResolvedCallbacks.forEach(fn => fn()); } } let reject = (reason) => { if (this.status === 'pending') { this.reason = reason; this.status = 'rejected'; this.onRejectedCallbacks.forEach(fn => fn()); } } try {//执行时可能会发生异常 executor(resolve, reject); } catch (e) { reject(e);//promise失败了 } }
then(onFuiFilled, onRejected) { //防止值得穿透 onFuiFilled = typeof onFuiFilled === 'function' ? onFuiFilled : y => y; onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; } let promise2;//作为下一次then方法的promise if (this.status === 'resolved') { promise2 = new Promise((resolve, reject) => { setTimeout(() => { try { //成功的逻辑 失败的逻辑 let x = onFuiFilled(this.value); //看x是不是promise 如果是promise取他的结果 作为promise2成功的的结果 //如果返回一个普通值，作为promise2成功的结果 //resolvePromise可以解析x和promise2之间的关系 //在resolvePromise中传入四个参数，第一个是返回的promise，第二个是返回的结果，第三个和第四个分别是resolve()和reject()的方法。 resolvePromise(promise2, x, resolve, reject) } catch (e) { reject(e); } }, 0) }); } if (this.status === 'rejected') { promise2 = new Promise((resolve, reject) => { setTimeout(() => { try { let x = onRejected(this.reason); //在resolvePromise中传入四个参数，第一个是返回的promise，第二个是返回的结果，第三个和第四个分别是resolve()和reject()的方法。 resolvePromise(promise2, x, resolve, reject) } catch (e) { reject(e); } }, 0) }); } //当前既没有完成也没有失败 if (this.status === 'pending') { promise2 = new Promise((resolve, reject) => { //把成功的函数一个个存放到成功回调函数数组中 this.onResolvedCallbacks.push(() => { setTimeout(() => { try { let x = onFuiFilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }, 0) }); //把失败的函数一个个存放到失败回调函数数组中 this.onRejectedCallbacks.push(() => { setTimeout(() => { try { let x = onRejected(this.reason); resolvePromise(promise2, x, resolve, reject) } catch (e) { reject(e) } }, 0) }) }) } return promise2;//调用then后返回一个新的promise } catch(onRejected) { // catch 方法就是then方法没有成功的简写 return this.then(null, onRejected); } }
Promise.all = function (promises) { //promises是一个promise的数组 return new Promise(function (resolve, reject) { let arr = []; //arr是最终返回值的结果 let i = 0; // 表示成功了多少次 function processData(index, data) { arr[index] = data; if (++i === promises.length) { resolve(arr); } } for (let i = 0; i < promises.length; i++) { promises[i].then(function (data) { processData(i, data) }, reject) } }) } // 只要有一个promise成功了 就算成功。如果第一个失败了就失败了 Promise.race = function (promises) { return new Promise((resolve, reject) => { for (var i = 0; i < promises.length; i++) { promises[i].then(resolve, reject) } }) } // 生成一个成功的promise Promise.resolve = function (value) { return new Promise((resolve, reject) => resolve(value); } // 生成一个失败的promise Promise.reject = function (reason) { return new Promise((resolve, reject) => reject(reason)); } Promise.defer = Promise.deferred = function () { let dfd = {}; dfd.promise = new Promise((resolve, reject) => { dfd.resolve = resolve; dfd.reject = reject; }); return dfd } module.exports = Promise;
浙公网安备 33010602011771号