3行代码实现一个简易版promise

ralap 发布于2019-08-22 17:33 / 1958人阅读

前言

作为一个后端过来的同学,刚入门前端的时候,被js种种「反人类」的概念折腾的死去活来的.
其中一个印象比较深刻的,就是promise,感觉实在太难理解了...所有就有了写个简单的promise的想法.
希望能帮助到一些跟我一样,感觉promise很难理解的新同学.

promise的教程网上多如牛毛,其中写的比较通俗易懂的莫过于阮一峰的es6,反正我是他的书才懂的.
所以今天,我们也不会来复述一遍如何使用promise,今天我们从另一个角度学习promise,
先自己动手造一个轮子--实现一个最简单的promise,解决 回调地狱 的问题.

简单实现

请看代码

function easyPromise (fn) {
    this.then = cb => this.cb = cb
    this.resolve = data => this.cb(data)
    fn(this.resolve)
}

详解

上面的代码就实现了一个简单的,实现then回调的「promise」,这里为了缩短代码量,用了es6的简写,实际展开应该是这样

function easyPromise (fn) {
    var that = this

    // 第一步,定义 then()
    this.then = function (cb) {
        //先将 then() 括号里面的参数(回调函数)保存起来
        that.cb = cb
    }

    // 定义一个 resolve
    this.resolve = function(data) {
        that.cb(data)
    }

    // 将 resolve 作为回调函数,传给fn
    fn(this.resolve)
}

接下来我们看看如何使用

new easyPromise((resolve) => {
    setTimeout(() => {
        resolve("延时执行")
    }, 1000)
}).then((data) => {
    console.log(data)
})

结果：控制台在1秒之后，输出 延时执行

同样为了方便理解,我们不妨把以上代码写好理解一点.

// 定义一个要传给 promise 的函数，它接收一个函数（resolve）作为参数。
// resolve 的作用是在合适的时间，通知 promise 应该要执行 then 里面的回调函数了。
function promiseCallback (resolve) {
   setTimeout(() => {
      resolve("延时执行")
   }, 1000)
}

// 定义一个 要传给 then 的回调函数
function thenCallback (data) {
    console.log(data)
}

// 实例化 promis,并分别传入对应的回调
new easyPromise(promiseCallback)
.then(thenCallback)

tips:  promise.then() 的时候,并没有马上执行括号里面的回调函数,只是把括号里面的回调函数保存起来.

我们来梳理一下执行流程

先通过 then 把 thenCallback 存起来

this.then = function (cb) {
  that.cb = cb
}

这里的 cb , 就是上例的 thenCallback 所以其实可以等价于 this.cb = thenCallback

执行 promise 括号里的函数，并把事先定义好的 resolve 函数作为参数传给他

fn(this.resolve)

这里的 fn , 就是上例的 promiseCallback

执行 promiseCallback 我们的逻辑就跳到 promiseCallback 函数内部去

setTimeout(() => {
  resolve("延时执行")
}, 1000)

逻辑很简单，就是等待1秒后，执行 resolve 函数，这个 resolve 哪来的呢？

fn(this.resolve) -> promiseCallback (resolve) -> resolve

执行 resolve 我们的逻辑就跳到 resolve 函数内部去

that.cb(data)

这个 that.cb 又是哪来的呢？就是我们第一步保存的 then括号里面的回调函数，也就是 thenCallback

console.log(data)

所以就在1秒后输出 延时执行

最后

好了，以上就是 promise 的核心逻辑，当然还有很多功能没实现，不过本文的目的是帮助新手更好的了解 promise,
不是要实现一个完整的，符合 promise A+规范的 promise, 想要了解更多的童鞋，这里推荐几个链接

阮一峰：ECMAScript 6 入门 - Promise 对象

深入 Promise(一)——Promise 实现详解

浅谈Promise之按照Promise/A+规范实现Promise类

如果觉得本文对您有用，请给本文的github加个star,万分感谢

另外，github上还有其他一些关于前端的教程和组件，
有兴趣的童鞋可以看看，你们的支持就是我最大的动力。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95277.html

【js】what is Promise和手写实现简易版Promise

摘要：有三种状态，等待中，已完成，已失败。对象状态不受外界影响，只有异步操作的结果可以改变状态，这就是的由来怎么用接受一个函数作为参数，这个参数函数的两个参数分别是和，用来执行了两种状态的回调函数。当实例生成后，用方法来指定两种状态的回调函数。什么是Promise 官方的解释：Promise是一个用来传递异步操作消息的对象。Promise有三种状态，pending（等待中），resolve...

LMou 2019-08-23 18:25 评论0 收藏0
JavaScript之手写Promise

摘要：如果状态是等待态的话，就往回调函数中函数，比如如下代码就会进入等待态的逻辑以上就是简单版实现实现一个符合规范的接下来大部分代码都是根据规范去实现的。为更好的理解，推荐阅读Promise/A+ 规范实现一个简易版 Promise 在完成符合 Promise/A+ 规范的代码之前，我们可以先来实现一个简易版 Promise，因为在面试中，如果你能实现出一个简易版的 Promise ...

stefan 2019-08-23 15:25 评论0 收藏0
40行js实现一个简易Promise

摘要：最近面试有问到的原理，以及实现的方法。所以自己动手实现了一个，发个文章记录下。简单分析下，实例对象有两个属性，一个是，一个是。最近面试有问到Promise的原理，以及实现的方法。所以自己动手实现了一个，发个文章记录下。简单分析下，promise实例对象有两个属性，一个是status，一个是value。还有一个then方法。status有3个状态，pending,resolved,re...

nihao 2019-08-22 15:13 评论0 收藏0
超级易懂的redux-saga原理解析

摘要：原文地址前言笔者最近在做一些后台项目，使用的是，其使用了处理异步数据流，本文将对的原理做一个简单的解读，并将实现一个简易版的。函数的自动流程控制在中，是指一些长时操作，用函数表示。原文地址前言笔者最近在做一些后台项目，使用的是Ant Design Pro，其使用了redux-saga处理异步数据流，本文将对redux-saga的原理做一个简单的解读，并将实现一个简易版的redux...

wendux 2019-08-23 12:35 评论0 收藏0
KOA2框架原理解析和实现

摘要：实现的四大模块上文简述了源码的大体框架结构，接下来我们来实现一个的框架，笔者认为理解和实现一个框架需要实现四个大模块，分别是封装创建类构造函数构造对象中间件机制和剥洋葱模型的实现错误捕获和错误处理下面我们就逐一分析和实现。什么是koa框架？ koa是一个基于node实现的一个新的web框架，它是由express框架的原班人马打造的。它的特点是优雅、简洁、表达力强、自由度...

tracymac7 2019-08-26 13:37 评论0 收藏0