es6之Promise(2)-封裝自己的Promise
阿新 • • 發佈：2019-03-06
方法 元素 .com ces back 值傳遞 失敗 自己的 16px
今天根據之前的es6類的寫法手寫一個自己的Promise,我們先看一下原生的Promise寫法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> let createPromise=new Promise((resolve,reject)=>{ $.ajax({ url:‘./ajax.json‘,// 同級目錄下新建一個json文件用以訪問 dataType:‘json‘, success(data){ resolve(data) }, error(err){ reject(err) } }) }); createPromise.then((data)=>{ console.log(data) },(err)=>{ console.log(err) }) </script> </html>
我們可以看到我們的Promise對象使用new 生成，並且接收一個函數，參數也為函數， 因為在後面執行了resolve();並且有一個then方法，參數與上面一致，所以我們可以這樣寫，直接上代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> // 聲明類和then方法 class MyPromise { constructor(fn) { this.status = ‘‘; // 記錄函數執行的狀態 this.queue = []; // 等待隊列 this.successResult = ‘‘; // 接收成功函數的參數 this.failResult = ‘‘; // 接收失敗函數的參數 fn((...arg) => { // 代表成功的函數 this.status = ‘success‘; this.successResult = arg; // 此時此函數已完成檢查隊列中是否存在元素，存在則說明 then方法已提前調用,方法還未被執行,所以我們在這裏執行 this.queue.forEach((fn) => { fn.fn1(arg) }) }, (...arg) => { // 代表失敗的函數 this.status = ‘fail‘; this.failResult = arg; this.queue.forEach((fn) => { fn.fn2(arg) }) }); // 執行函數 函數參數也為兩個函數 } then(fn1, fn2) { /* fn1 代表成功函數 fn2 代表失敗函數 執行then時如果函數的狀態值已改變 直接調用函數並將存儲的值傳遞進去 如果此時值還未改變，將參數放入隊列 */ if (this.status == ‘success‘) { fn1(this.successResult) } else if (this.status == ‘fail‘) { fn2(this.failResult) } else { this.queue.push({ fn1, fn2 }) } } } let createPromise = new MyPromise((resolve, reject) => { $.ajax({ url: ‘./ajax.json‘, // 同級目錄下新建一個json文件用以訪問 dataType: ‘json‘, success(data) { resolve(data) }, error(err) { reject(err) } }) }); createPromise.then((data) => { console.log(data) }, (err) => { console.log(err) }) </script> </html>
es6之Promise(2)-封裝自己的Promise