沐鳴登錄平台_學習函數式編程 Monad

還記得 Jquery 時代的 ajax 操作嗎?,上述代碼就是一個最基本的 Monad,它將程序的多個步驟抽離成線性的流,通過 bind 方法對數據流進行加工處理,最終得到我們想要的結果。,這些定義很抽象,我們用一段 js 代碼來模擬一下。,Monad 處理副作用,class Monad { value = “”; // 構造函數 constructor(value) { this.value = value; } // unit,把值裝入 Monad 構造函數中 unit(value) { this.value = value; } // bind,把值轉換成一個新的 Monad bind(fn) { return fn(this.value); } } // 滿足 x-> M(x) 格式的函數 function add1(x) { return new Monad(x + 1); } // 滿足 x-> M(x) 格式的函數 function square(x) { return new Monad(x * x); } // 接下來,我們就能進行鏈式調用了 const a = new Monad(2) .bind(square) .bind(add1); //… console.log(a.value === 5); // true,fetch(“request1”) .then((response1) => { return fetch(“request2”); }) .then((response2) => { return fetch(“request3”); }) .then((response3) => { console.log(response3); // 得到最終結果 });,Promise 的出現,解決了上述問題。,上述代碼中,我們通過回調函數,串行執行了 3 個 ajax 操作,但同樣也生成了 3 層代碼嵌套,這樣的代碼不僅難以閱讀,也不利於日後維護。,$.ajax({ type: “get”, url: “request1”, success: function (response1) { $.ajax({ type: “get”, url: “request2”, success: function (response2) { $.ajax({ type: “get”, url: “request3”, success: function (response3) { console.log(response3); // 得到最終結果 }, }); }, }); }, });,Ok,我們已經明白了 Monad 的內部結構,接下來,我們再看一下 Monad 的使用場景。,
,通過 Monad 的規則,衍生出了許多使用場景。,還記得 Jquery 時代的 ajax 操作嗎?