手记

如何用原生JS实现一个简单的promise

我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力

   我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧

   先简单来说一下啥是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>

 

原文出处:https://www.cnblogs.com/suihang/p/9900581.html  

0人推荐
随时随地看视频
慕课网APP