Vue-Promise

zy簡單男孩發表於2021-08-13

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);
        })