我又又又回來了,最近真是累的跟狗一樣,急需一個大保健回復一下子精力
我現在是一邊喝着紅牛一邊寫着博客,好了好了,不扯了,回歸整體好吧
先簡單來說一下啥是promise吧
它是什么?Promise是一個方案,用來解決多層回調嵌套的解決方案。它現在是ES6的原生對象。
干嘛用的?可以把一個多層嵌套的同步、異步都有回調的方法,給拉直為一串.then()組成的調用鏈。
解決啥問題?多層嵌套的回調方法中,如果同時存在同步、異步的方法,那么實際執行順序會混亂。不好調試不好維護
現在我們再來說一說自己寫簡單的promise的思路,我們是如何將異步函數同步執行的呢,正常情況下,我們只需要用函數
嵌套就可以解決,但是現在我們要封裝一個promise,那我們要怎么做呢,其實原理還是一樣的,只要能在第一個函數執行完
再調用下一個函數不就可以了嘛
下面還是直接上代碼
<!DOCTYPE html>
<html lang="en">
<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>
