[TOC] >[success] # 老派callback 還是新派 Promise [MDN -- 參考](https://developer.mozilla.org/zh-CN/docs/learn/JavaScript/%E5%BC%82%E6%AD%A5/%E7%AE%80%E4%BB%8B) ~~~ 1.就像上節筆記寫的不是所有的回調都是異步一樣，但是異步回調出現的問題就是'回調地獄' ~~~ >[info] ## js 中常見的異步 ~~~ 1.定時器都是異步操作 2.事件綁定都是異步操作 3.AJAX中一般我們都采取異步操作（也可以同步） 簡單的理解：網絡操作，瀏覽器事件，都必須是異步執行 '注這里有個小說明'：雖然實際上是可以 同步 實現 Ajax 請求的，但是最好永遠都不要這么做。如果你使用了同步的 Ajax 請求，你的 JavaScript 應用就會被阻塞 —— 用戶就不能點擊、輸入數據、導航或是滾動。這將會阻止用戶的任 何交互動作。這是一種非常糟糕的做法 ~~~ >[danger] ##### 主要說一下事件模型這種異步 [更詳細的了解文章推薦](https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with.md) ~~~ 1.下面的代碼先打印出來2,當你什么時候點擊按鈕什么時候才會出來1，這是js最基礎的異步編程形式， 其實你可以吧'onclick'想成定時器，只不過這時候的定時器不是通過你設定時間來觸發，而是通過你 觸發的事件來觸發 ~~~ ~~~ let button = document.getElementById('test') button.onclick = function () { console.log(1) } console.log(2) ~~~  >[info] ## 為什么要有新派的Promise 參考的文章 [developers.google](https://developers.google.com/web/fundamentals/primers/promises?hl=zh-cn#whats-all-the-fuss-about) [廖雪峰老師的Promise](https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544) [騰訊 alloyteam--JavaScript Promise 啟示錄](http://www.alloyteam.com/2014/05/javascript-promise-mode/) ~~~ 1.對于使用一個東西要知道為什么他會出現，一下內容均來自上面三篇文章的個人理解總結 2.首先回調處理異步的最大的問題就是會出現'回調地獄'，反復的嵌套，但實際異步的時候我們只關心成功還是失敗， 無非也就是如果成功了你去做什么，失敗了你去做什么，如果將這種結果性質的東西不在通過內部回調，而是鏈式形 式進行返回后面的只需要你告訴我成功了還是失敗了去做我自己的分支代碼，就可以避免回調這種形式 ~~~ >[danger] ##### 用個回調方式 來解釋第二條 ~~~ 1.這是一個簡單的案例如果隨機數大于1將會返回'隨機數字大于1',相反則會返回'隨機數字小于1',實際上現在只是 很簡單的一層，如果我們在callback函數中接著來要做判斷，我們要接著不停的嵌套，然而實際的結果我們只想 知道他的返回結果，走我們不一樣的條件分支就好了 ~~~ ~~~ var fun = function(callback){ var num = Math.random()*2 setTimeout(function () { if(num<1){ callback&&callback(false) }else{ callback&&callback(true) } },100) } var callback = function(status){ if(status){ console.log('隨機數字大于1') }else{ console.log('隨機數字小于1') } } fun(callback) ~~~ >[danger] ##### 完成第二條的思路代碼 ~~~ 1.下面代碼是不可以運行的，只是我們按照我們現在想要的思路去實一個看似是代碼的代碼，我們用fun 這個函數 去包裹'setTimeout'這個異步函數,fun這個函數有兩個參數,'res'是成功回調接受成功返回的參數，'rej'正好和'res'相反 ，這樣正好我們就得到我們想要的只關心異步的結果，我們通過鏈式去調用'fun'的結果，then接受的是'res'， catch 接受的是'rej' 2.這樣整個代碼沒有回調，只需要通過鏈式這種更簡潔的形式根據返回成功還是失敗的狀態來做代碼邏輯的判斷即可 ~~~ ~~~ var fun = function(res,rej){ var num = Math.random()*2 setTimeout(function () { if(num<1){ res(false) }else{ rej(true) } },100) } fun.then(function (status) { console.log('隨機數字大于1') }).catch(function(status){ console.log('隨機數字小于1') }) ~~~