如何用原生JS实现一个简单的promise
标签：
JavaScript
我又又又回来了，最近真是累的跟狗一样，急需一个大保健回复一下子精力
我现在是一边喝着红牛一边写着博客，好了好了，不扯了，回归整体好吧
先简单来说一下啥是promise吧
它是什么？Promise是一个方案，用来解决多层回调嵌套的解决方案。它现在是ES6的原生对象。
干嘛用的？可以把一个多层嵌套的同步、异步都有回调的方法，给拉直为一串.then()组成的调用链。
解决啥问题？多层嵌套的回调方法中，如果同时存在同步、异步的方法，那么实际执行顺序会混乱。不好调试不好维护
现在我们再来说一说自己写简单的promise的思路，我们是如何将异步函数同步执行的呢，正常情况下，我们只需要用函数
嵌套就可以解决，但是现在我们要封装一个promise，那我们要怎么做呢，其实原理还是一样的，只要能在第一个函数执行完
再调用下一个函数不就可以了嘛
下面还是直接上代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> function MyPromise(func) { var self = this; var count = 0; this.cbklist = []; this.then = function (callback) { //将所有.then方法传进来的参数push到数组当中 this.cbklist.push(callback); //能实现链式调用的关键 return this; } this.success = function () { //使用递归调用自身 if (count == self.cbklist.length) return; self.cbklist[count++](self.success); } //进来时调用第一个函数 func(self.success); } // 下面是调用的例子 function ajaxA(success) { setTimeout(function () { console.log("AAAAAAAAAA"); success(); }, 3000); } function ajaxB(success) { setTimeout(function () { console.log("BBBBBBBBBB"); success(); }, 2000); } function ajaxC(success) { setTimeout(function () { console.log("CCCCCCCCCC"); success(); }, 6000); } function ajaxD() { setTimeout(function () { console.log("DDDDDDDDD"); }, 2000); } new MyPromise(ajaxA).then(ajaxB).then(ajaxC).then(ajaxD); </script> </body> </html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦