Vue-Promise

promise

就是一種異步編程的的解決方案

當執行網絡請求的時候，代碼就會出現阻塞，下面的代碼要等待請求完成了在運行，因此咱們通常網絡請求的時候就去開啓一個異步任務，一邊請求一邊執行其餘代碼

請求到數據後，就要一個回調函數，返回數據

這只是簡單的場景，若是在很複雜的情景裏就會出現回調地獄。。。。。。

爲了解決這個問就有了Promise，很優雅的就能夠解決問題，調用請求和數據的處理放在不一樣的 位置上

 new Promise((resolve, reject) => {
            setTimeout(() => { //延時函數模擬請求
                resolve()
            }, 1000)
        }).then(() => {
            console.log(111);  //模擬處理數據
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve()  經過數據再請求
                })
            })
        }).then(() => {
           //再處理拿到的數據
                console.log(222); 
           
        })

這就是鏈式編程  一條鏈處理一條鏈的事情

Promise 有三個狀態 

1 pending 等待   正在請求 

2. fulfill 知足   調用 resolve

3.reject  拒絕狀態  調用 reject

寫法

 經過源碼

 咱們能夠看到 then 能夠傳 兩個函數 一個 是fulfill ，一個reject  ，就是說 在then中能夠這樣寫

.then(res => {
            console.log(222);
        }, err => {
            console.log(err);
        })

這樣catch就能夠不用寫在then後面 直接寫在then裏面

Promise 鏈式調用

new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('Hello World')
            }, 1000)
        }).then(res => {
            console.log(res);
            return Promise.resolve(res + '11')
        }).then(res => {
            return Promise.resolve(res + '22')
        }).then(res => {
            return Promise.resolve(res + '22')
        }).then(res => {
            return Promise.resolve(res + '22')
        }).then(res => {
            return Promise.resolve(res + '22')
        }).then(res => {
            return Promise.resolve(res + '22')
        }).then(res => {
            return Promise.resolve(res + '22')
        })

 調用 時能夠直接寫這樣

之前的這樣太過於麻煩：

return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve()  經過數據再請求
                })
            })

還能夠這樣寫

直接return res +‘ 222’

直呼 程序‘偷懶’真是個好習慣 ：）

若是 有兩個請求 同時須要

這裏即有一個函數Promise.all([])

  Promise.all([
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve({ name: 'kobe', age: 18 })
                }, 1000);
            }),
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve({ name: 'kobe', age: 18 })
                }, 1000);
            })
        ]).then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })