[TOC] >[success] # ES6 Promise解決異步代碼 ~~~ 'Promise'是一個'構造函數'，他有一個參數，參數的類型為'Function'類型，這個function有2個參數， 一個是'resolve表示成功'的返回值，另一個是'reject表示失敗'的回調函數。 ~~~ <br/> >[success] ## 基礎用法 封裝時候這么寫： ~~~ 變量寫法： let promise = new Promise((resolve, reject) =>{ api(parameter).then(res => { // 成功就把res返回出去 resolve(res) }).catch(e =>{ // 失敗就返回錯誤，可以直接這樣寫，new Error(' 報錯了 ') reject(new Error(e)) }) }) 函數寫法： function promise (){ return new Promise((resolve, reject) =>{ api(parameter).then(res => { // 成功就把res返回出去 resolve(res) }).catch(e =>{ // 失敗就返回錯誤，可以直接這樣寫，new Error(' 報錯了 ') reject(new Error(e)) }) }) } ~~~ 調用時候這么寫： ~~~ // 變量寫法這樣調用 promise.then(res =>{ // 這里寫成功時候要執行的代碼 }).catch(e =>{ 這里寫失敗時候要執行的代碼 }) // 函數寫法這樣調用 promise().then(res =>{ // 這里寫成功時候要執行的代碼 }).catch(e =>{ 這里寫失敗時候要執行的代碼 }) ~~~ <br/> >[success] ## 用Promise解決異步問題 ~~~ 下面的代碼就是一個經典的'異步'問題，我們期望的是先打印出'呵呵噠',后打印'嘎嘎'，實際上相反。 ~~~ ~~~ setTimeout(() => { console.log('呵呵噠') },500) setTimeout(() => { console.log('嘎嘎') },300) 打印結果： // '嘎嘎' // '呵呵噠' ~~~ <br/> >[success] ### 用.then的鏈式寫法解決異步問題 ~~~ 首先封裝2個'Promise'方法，'Fun1'和'Fun2' ~~~ ~~~ function Fun1(){ return new Promise((resolve, reject) => { setTimeout(function(){ console.log('呵呵噠') resolve(1) },500) }) } function Fun2(){ return new Promise((resolve, reject) => { setTimeout( function(){ console.log('嘎嘎') resolve(2) },300) }) } ~~~ 調用時這樣寫: ~~~ function Fun3(){ Fun1().then(res => { return Fun2() }).then(res => { // 執行要執行的代碼 }).catch(e => { // 只要Fn1報錯了就錯誤就會直接拋到這里 }) } Fun3() 打印結果： // 呵呵噠 // 嘎嘎 ~~~ <br/> >[success] ### 用ES7 async 和 await來解決異步 es7的寫法很簡潔，很方便。 ~~~ async function Fun3(){ try{ let res = await Fun1() let res2 = await Fun2() } catch (e) { // 只要Fn1報錯了就錯誤就會直接拋到這里 } } ~~~