Promise和Promise的方法

i涵涵發表於2019-02-21
Promise

（Promise和Promise的方法）

Promise是ES6一個偉大的發明，他使我們從回撥地獄中能夠走出來。

什麼是Promise

從字面上來看，Promise就是一個承諾。那麼，在ES6當中，Promise通常用來控制非同步操作。當一個非同步操作成功的時候，觸發.then的操作。當一個非同步操作不成功的時候，觸發.catch操作。那麼，我們來寫下一個Promise的操作吧。

const loadData = new Promise((resolve, reject) => {
setTimeout(() => {
    rseolve({data: "loding Done!"})
}, 2000)
})
loadData.then(data => {
console.log(data.data);
})
複製程式碼

上例就是一個典型的Promise例子。 當我們去執行一個資料庫的讀取操作的時候，我們通常都是耗費時間的。是一個非同步操作。那麼，我們用setTimout去模擬讀取資料的時間。當這個資料讀取完成之後，再去通知下面的程式碼對應去執行相應的動作。這裡，我們利用resolve發出一個完成的訊號。下面的程式碼利用一個.then去接收到這個完成的訊號同時執行相應的完成操作。

當然，如果非同步操作失敗了，我們可以通過reject去發出一個操作失敗的訊號，在.catch當中去捕捉並處理這個訊號。

const loadData = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("Timeout!")
    }, 3000)
})
複製程式碼

loadData.catch(err => { console.log(err) }) 處理多個Promise 在ES6當中，共有兩種處理多個Promise的方法。

Promise.all(); Promise.race(); Promise.all 例如，當我們去讀取頁面的主體內容和頁面的標題內容時，兩個非同步請求互不相關。那麼，我們就可以同時去發起ajax請求。

const loadMain = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve({
            data: {
                title: "主體標題"，
                desc: "主體內容"
            }
        })
    }, 2000)
    })

const loadSide = new Promise((resolve, reject) => {
setTimeout(() => {
    resolve({
        data: {
            list: ["主頁","新聞列表","關於"]
        }
    })
}, 500)
})

Promise.all([loadMain, loadSide]).then(res => {
    console.log(res)
    }).catch(err => {
        console.log(err)
    })
複製程式碼

注意點:

當我們使用all方法發起請求的時候，只有所有的Promise成功後，才會執行.then方法。 任何一個錯誤，都會導致執行.catch方法。 Promise.race() race方法也是用於處理多個Promise請求的，不同於all方法的是，race方法接收最快收到的Promise請求，無論是成功還是失敗，都以最快的為準。

相關文章