实现自己的Promise-2-链式操作

最新推荐文章于 2024-09-18 11:41:39 发布
最新推荐文章于 2024-09-18 11:41:39 发布
阅读量862 收藏
点赞数
分类专栏： 前端 javascript 文章标签： Promise
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aboyl/article/details/83052170
版权

首先我们看下链式调用的例子

function testP1(){
  return new MyPromise((resolve,reject)=>{
    setTimeout(()=>{
      resolve('p1')
    },2000)
  })
}
function testP2(){
  return new MyPromise((resolve,reject)=>{
    setTimeout(()=>{
      resolve('p2')
    },2000)
  })
}
testP1().then((res)=>{
  console.log(res);
  return testP2()
}).then((res)=>{
  console.log(res);
})

可以看到我们在传入给第一个promise的then函数的回调函数中、返回了一个promise，同时又执行了一个then函数。
也就是说
我们的then函数最终返回了一个promise。那么。我们是不是让我们的then函数变成

then((onFulfilled,onRejected){
    return onFulfilled
}

就好了？
如果我们只是想实现这样的结构。当然是没有问题的

function test1(){
  return {
    a(){
      console.log('a');
    }
  }
}

function test2(){
  return {
    test(fn){
      return fn()
    }
  }
}

test2().test(()=>{
  return test1()
})
.a() // a

最终输出a

但是可惜的是。
1、我们的promise是异步的 我们的then函数现在是

  then(onFulfilled,onRejected){
    if(this.state==='fulfilled'){
      onFulfilled(this.value)
    }
    if(this.state==='rejected'){
      onRejected(this.reason)
    }
    if(this.state==='pedding'){
      this.onFulfilledCallbacks.push(onFulfilled)
      this.onRejectedCallbacks.push(onRejected)
    }
  }

这个样子的

2、如果不返回promise呢？

第一个问题决定了，我们的then函数的回调函数会在return之后执行
也就是说如果我们要按照上面的写法得话，那么就是

  then(onFulfilled, onRejected) {
    let promise2
    if (this.state === 'fulfilled') {
      promise2 = onFulfilled(this.value)
    }
    if (this.state === 'rejected') {
      promise2 = onRejected(this.reason)
    }
    if (this.state === 'pedding') {
      this.onFulfilledCallbacks.push(onFulfilled)
      this.onRejectedCallbacks.push(onRejected)
    }
    return promise2
  }

那么问题就很明显了
我们没有办法去处理pedding的时候的promise2 因为他是被压入了一个栈中，在resolve之后才能执行，所以，我们的promise2 在大部分情况下都是 undefined

也就是说 我们不能直接返回 return 的 nextPromise
注意、我这里没有说promise2 而是nextPromise 为什么要进行区分？因为promise2是我们定义在class Promise的then函数里面的，而nextPromise是未知的。
从而我们进而得出了一个问题、无法直接返回nextPromise 那么我们nextThen怎么进行处理呢？

在代码

function testP1() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p1')
    }, 2000)
  })
}

function testP2() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p2')
    }, 2000)
  })
}
testP1().then((res) => {
  console.log(res);
  return testP2()
}).then((res) => {
  console.log(res);
})

中、我们的第二个then函数到底是怎么回事？到底是谁在执行？
那么我们就有了两个问题
1、返回什么
2、怎么处理then函数

先来处理第一个
首先，必须是返回一个promise 因为promise才有then函数、得出代码

  then(onFulfilled, onRejected) {
    let promise2 = new MyPromise((resolve, reject) => {

    })
    if (this.state === 'fulfilled') {
      onFulfilled(this.value)
    }
    if (this.state === 'rejected') {
      onRejected(this.reason)
    }
    if (this.state === 'pedding') {
      this.onFulfilledCallbacks.push(onFulfilled)
      this.onRejectedCallbacks.push(onRejected)
    }
    return promise2
  }

那么这个函数的exector是什么呢？
此外 我们应该注意到一个问题、then函数
then函数不是在延迟之后才执行的，而是立刻执行的，但是他把then函数的参数—某个回调函数压入了一个函数栈中，等到时机进行执行。
我们可以进行一次debugger
在这里插入图片描述

观察此图
可以发现
1、输出了一个 then 标记
2、回调函数栈 onFulfilledCallbacks 跟 onRejectedCallbacks 中存在函数了
3、promise2中空空如也

那么我们执行下一操作
在这里插入图片描述

可以发现又执行了一个 then函数 进行了输出 且此时没有输出 p1 也就是说第一个then函数中的回调函数没有执行

为了进行区分 我们对我们的测试代码进行部分修改

function testP1() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p1')
    }, 2000)
  })
}

function testP2() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p2')
    }, 2000)
  })
}
testP1().then((res1) => {
  console.log(res1);
  return testP2()
}).then((res2) => {
  console.log(res2);
})

可以看到我们修改了我们的 then的回调函数 第一个传入的参数是res1 第二个参数是res2
重新debugger一次
在这里插入图片描述

可以看到第一步我们的函数是第一个 回调函数是res1 => {}
而点击 继续
在这里插入图片描述

变成了 res2=>{}
此时是返回的promise2

我们执行这样的操作为了证明什么呢？
为了证明
1、第二个then函数 其实是在第一个promise返回的promise2中 而不是在nextPromise中
2、then函数的执行是同步的 也就是说 ，当我们一个链式操作写完的时候 所有的then函数会按照流式执行，而不会进入异步队列中 等到上一个then函数中的回调函数执行后 才执行下一个then函数
如图
在这里插入图片描述

所以说，此时nextPromise的then中是没有回调函数的，也不会去执行，而nextPromise 我们以为要执行的回调函数其实是在promise2中
那么我们给出解决方案
1、在恰当的时候 执行 nextPromise的then函数
2、在nextPromise 的resolve执行的时候，控制promise2的resolve执行，从而执行promise2中then函数接受到得回调函数

对于第一个问题
必然是在 上一个promise的then函数的回调函数执行之后才执行 为什么？因为nextPromise就是前一个then函数的回调函数的返回值~~ 所以 必然是在之后执行
对于第二个问题
当nextPromise的resolve执行之后，会调用 nextPromise中的then函数的第一个参数 也就是onFulfilled 所以我们可以在这里 执行promise2的resolve函数 因此我们必须把promise2的resolve函数传递给nextPromise的then函数的回调函数中或者说在这里执行

因此 对于代码

  then(onFulfilled, onRejected) {
    console.log('then');
    let promise2 = new MyPromise((resolve, reject) => {

    })
    if (this.state === 'fulfilled') {
      onFulfilled(this.value)
    }
    if (this.state === 'rejected') {
      onRejected(this.reason)
    }
    if (this.state === 'pedding') {
      this.onFulfilledCallbacks.push(onFulfilled)
      this.onRejectedCallbacks.push(onRejected)
    }
    return promise2
  }

应该改成

  then(onFulfilled, onRejected) {
    console.log('then');
    let promise2 = new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        onFulfilled(this.value)
      }
      if (this.state === 'rejected') {
        onRejected(this.reason)
      }
      if (this.state === 'pedding') {
        this.onFulfilledCallbacks.push(onFulfilled)
        this.onRejectedCallbacks.push(onRejected)
      }
    })
    return promise2
  }

那么我们再来执行下一步操作
如何在第一个then之后的回调函数执行之后执行 nextPromise的then 这个并不难，拿到值执行就好了，给出以下的代码

then(onFulfilled, onRejected) {
    let promise2 = new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        onFulfilled(this.value)
      }
      if (this.state === 'rejected') {
        onRejected(this.reason)
      }
      if (this.state === 'pedding') {
        this.onFulfilledCallbacks.push(()=>{
          let x =onFulfilled(this.value)
          if(typeof x === 'object'){
            if(typeof x.then === 'function'){
              x.then.call(x,res=>{
                resolve(res)
              })
            }
          }
        })
        this.onRejectedCallbacks.push(onRejected)
      }
    })
    return promise2
  }

我们先只观察pedding中的onFulfilledCallbacks 我们队原来的onFulfilledCallbacks进行了进一步的封装不再是单纯的执行内容了，而是先执行onFulfilledCallbacks后再执行 nextPromise的回调函数,并将resolve放入then中执行，所以在执行nextPromise的resolve的时候就会执行nextPromise的then的回调函数，从而执行promise2的resolve函数

同时对于reject也应该执行类似的操作 所以我们可以提成一个函数
resolvePromise

  then(onFulfilled, onRejected) {
    let promise2 = new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        let x =onFulfilled(this.value)
        resolvePromise(promise2,x,resolve,reject)
     
      }
      if (this.state === 'rejected') {
        
        let x =onRejected(this.reason)
        resolvePromise(promise2,x,resolve,reject)
     
      }
      if (this.state === 'pedding') {
        this.onFulfilledCallbacks.push(()=>{
          let x =onFulfilled(this.value)
          resolvePromise(promise2,x,resolve,reject)
        })
        this.onRejectedCallbacks.push(()=>{
          let x =onRejected(this.reason)
          resolvePromise(promise2,x,resolve,reject)
  
        })
      }
    })
    return promise2
  }


function resolvePromise(promise2,x,resolve,reject){
  if(typeof x === 'object'){
    if(typeof x.then === 'function'){
      x.then.call(x,res=>{
        resolve(res)
      })
    }
  }
}

同时 我们还要处理一下如果返回值不是promise的情况 在Promise中

function testP1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('p1')
    }, 2000)
  })
}

function testP2(res) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(res+'p2')
    }, 2000)
  })
}
testP1().then((res1) => {
  console.log('res1',res1); // res1 p1
  // return testP2(res1)
  return '1'
}).then((res2) => {
  console.log('res2',res2); // res2 1
})

返回的参数会作为进行传递
所以

function resolvePromise(promise2,x,resolve,reject){
  if(typeof x === 'object'){
    if(typeof x.then === 'function'){
      x.then.call(x,res=>{
        resolve(res)
      })
    }else{
      resolve(x)
    }
  }else{
    resolve(x)
  }
}

至此 我们的链式调用就基本完成了。
当然 这个并不是很符合PromiseA+的规范~或者说也没有打算按照规范走了
因为我感觉很多写promise的实现的文章，有的时候我就会在想，他们自己在写的时候真的是知道为啥要这么做吗？当然对于大神来说肯定知道，不过看到很多的实现都是一种~好像是按照大神的代码写一遍，但是却没有什么不同，这样大神虽然懂，但是去看的时候，却很难懂，等你看懂了，就花费了很长的时间了，那么效率就很低，因为大神的代码可能涉及到了其他的东西，不是逐步递进的，看起来有的时候就会有理解上的困难qwq

最后附上我在学习的过程中参考的两个博客吧，他们写的很详细，我感觉也就没有必要再去画蛇添足了，我相信你看了我的博客以后再看他们的就会好理解很多了。

小邵带你学习Promise源代码
ES6版Promise实现，给你不一样的体验

AboyL
关注
专栏目录
Promise.then的链式调用实现
android_xiaobai1的博客
05-07 1299
前端日记 今天是前端日记的第六天，现在实现下promise的then，然后与大家一起分享。一个前端小白的学习之路。 promise.then分析 用通俗的话来说： then方法提供一个供自定义的回调函数，若传入非函数，则会忽略当前then方法。 回调函数中会把上一个then中返回的值当做参数值供当前then方法调用。 then方法执行完毕后需要返回一个新的值给下一个then调用（没有返回值默认使...
前端开源库-promise-queue-plus
08-29
Promise 是JavaScript中的一个关键特性，用于处理异步操作，通过链式调用来管理回调，使得代码更加清晰和易于理解。而Promise Queue Plus 库则在此基础上构建了一个队列系统，确保每个任务按照加入队列的顺序逐一...
promise链式操作
不想内卷的博客
08-11 513
promise用来封装异步操作并可以获得其成功和失败的结果，我们首先看看正常的Promise是怎么样的 //实例化对象 const p=new Promise(function (resolve,reject) { let data='数据库中的用户数据'; //原生ajax请求,没有接口就先不用这个了，但是我们可以这么李姐 // var xhr = new XMLHttpRequest(); // xh
【JavaScript】Promise链式调用详解
最新发布
lph159的博客
09-18 577
Promise是 JavaScript 中用于处理异步操作的对象。它代表了一个将来可能完成（fulfilled）或失败（rejected）的操作及其结果。通过Promise，开发者可以避免嵌套回调函数的“回调地狱”问题。PromisePending（等待中）：异步操作还没有完成。Fulfilled（已完成）：异步操作成功，返回结果。Rejected（已失败）：异步操作失败，返回错误。Promise的链式调用提供了一种简洁、清晰的方式来管理复杂的异步操作。
JavaScript异步编程——08-Promise的链式调用【万字长文，感谢支持】
——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…
05-11 1311
史诗级JavaScript异步编程学习，快来订阅专栏吧！
Promise的链式操作
weixin_34177064的博客
05-21 154
最简单的Promise例子 function timeout(ms){ return new Promise(function(resolve){ setTimeout(resolve, ms); }) } timeout(1000).then(function(){ console.log("done"); }) Pro...
链式Promise
fb_fatboy的博客
07-24 483
最近项目有个需求,处理过程中需要执行完一个异步任务之后执行另外一个异步任务,并且任务数量也是不可用的所以就想到用链式Promise来处理. 使用过程中还是遇到一些问题的,这里记录分享一下.
Promise-tests:一系列测试看哪个Promise实现更快
06-14
Promise提供了一种链式调用的方式，使得异步操作可以按照顺序执行，同时避免了回调地狱的问题。 Promise的主要方法有`then`、`catch`和`finally`。`then`用于指定成功时的回调，`catch`用于捕获错误，而`finally`则...
promise-fun：承诺程序包，模式，聊天和教程
02-04
通过链式调用和`.then()`、`.catch()`方法，可以优雅地处理异步操作的回调，避免“回调地狱”。 这个包中的"polyfill"是指为不支持Promise的旧版浏览器或环境提供Promise的实现，使开发者可以在这些环境中使用...
promise-source-code:Promise的理解及原理，包括源码的解析-源码包
03-24
在"promise-source-code-master"这个压缩包中，可能包含了一个自实现Promise的源代码仓库，你可以通过阅读和调试这些代码来进一步理解Promise的工作原理。同时，这个开源项目也可能是对Promise相关知识的一个综合...
promise-1.0.0.js
12-01
在"promise-1.0.0.js"这个稳定版本中，可能会包含Promise的基本功能，如创建Promise、链式调用、错误处理等。同时，为了保持与其他库或环境的兼容性，可能还包括了Promise polyfill，即在不支持Promise的环境中提供...
手写实现一个Promise
GodLoveMe的博客
06-11 210
promise是前端解决异步的一个重要的东西。请自己实现一个Promise方法，可以满足以上的功能。
自己实现一个Promise
qq_36297981的博客
07-10 605
序言 Promise是ES6提出的异步编程规范。接下来我们一步一步来探究下Promise的实现原理，根据Promise A+规范实现一个我们自己的Promise。 Promise的初步实现 Promise的简单使用 new Promise((resolve, reject) => { resolve('a') }).then(value => { console.log(val...
Promise的链式调用
流绪@微梦
01-22 1029
实际开发中，我们经常需要同时请求多个接口。比如说：在请求完接口1的数据data1之后，需要根据data1的数据，继续请求接口 2，获取data2；然后根据data2的数据，继续请求接口 3。换而言之，现在有三个网络请求，请求 2 必须依赖请求 1 的结果，请求 3 必须依赖请求 2 的结果，如果按照往常的写法，会有三层回调，会陷入“回调地狱”。这种场景其实就是接口的多层嵌套调用。有了 Promise 之后，我们可以把多层嵌套调用按照线性的方式进行书写，非常优雅。
自己实现Promise
qq_31261131的博客
07-22 179
class MyPromise { constructor(func) { this.task = []; this.errTask=undefined; this.ball = null; this.status=undefined; setTimeout(() => { f...
Promise原理解析
weixin_33700350的博客
04-05 157
Promise是异步编程的一种解决方案，比回调函数和事件更合理更强大。 原生的promise用法如下： let p=new Promise(function(resolve,reject){ resolve('成功'); //reject('失败'); }); p.then(function(data){ console.log(data); },function(err)...
promise链式调用_【面试题解析】手动实现Promise
weixin_39972777的博客
12-06 271
前端面试的时候，经常能看到这样一道题，实现一个Promise。这篇文章将一步步实现 Promise，彻底弄懂 Promise。Promise 基本构成平时使用 Promise 我们可以知道 Promise 存在三种状态 Pending、Resolve、Reject，在 new Promise 时需要传入一个函数, 参数为 resolve 和 reject 的函数，这两个函数用来改变 Promise...
自己实现一个简单的Promise
u014332097的专栏
05-20 811
var Promise = function(fn){ this.taskQ = []; if(fn)this.then(fn); }; Promise.prototype = { resolve:function(){ var fn = this.taskQ && this.taskQ[0]; if(fn){ var ret = fn.apply(this,a
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值