如何用原生JS實(shí)現(xiàn)一個簡單的promise
標(biāo)簽：
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>
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦