Vue- Promise函數---參數resolve(調用.then方法)-- 參數reject(調用.catch方法)---鏈式結構


結構:

//什么情況下會用到Promise?
//一把情況下是有異步操作時,使用Promise對這個異步操作進行封裝
<script>
new Promise((resolve, reject) =>{
    setTimeout(() =>{
        //成功的時候調用resolve
        resolve('成功data')
        //失敗的時候調用reject
        reject('error message')
    }, 1000)
}).then((data) =>{
    //處理成功后的邏輯
    console.log(data);//這個data 是接收的resolve參數--
}).catch((err) =>{
    console.log(err);
})
</script>

簡便寫法二

.then(函數一,函數二)

<script>
    new Promise((resolve, reject) =>{
        setTimeout(() =>{
            //成功的時候調用resolve
            resolve('成功data')
            //失敗的時候調用reject
            reject('error message')
        }, 1000)
    }).then(data =>{
         console.log(data);
    }, err =>{
        console.log(err)
    })
    </script>

  鏈式案例

<script>
            //模擬網絡請求
            //網絡請求:aaa ->自己處理(10行)
            //處理:aaa111 ->自己處理(10 行)
            //處理:aaa111222->自己處理
        new Promise((resolve, reject) =>{
            setTimeout(() =>{
                //成功的時候調用resolve
                resolve('aaa')
            }, 1000)
        }).then(res =>{
            // 自己處理10行代碼
             console.log(res,'第一層的10行處理代碼');
            //2.對結果進行第一次處理
            //return Promise.reject('err')
            //throw 'err'
            return Promise.resolve(res +'111')
            })
        }).then(res =>{
            console.log(res, '第二層的10行處理代碼')
            return Promise.resolve(res +'222')
            })
        }).then(res =>{
            console.log(res +'第三層代碼')
        }).catch(err =>{
            console.log("err")
        })
        </script>
         <script>
            new Promise((resolve, reject) =>{
                setTimeout(() =>{
                    //成功的時候調用resolve
                    resolve('aaa')
                }, 1000)
            }).then(res =>{
                // 自己處理10行代碼
                 console.log(res,'第一層的10行處理代碼');
                //2.對結果進行第一次處理
                return Promres +'111'
                })
            }).then(res =>{
                console.log(res, '第二層的10行處理代碼');
                return res +'222'
                })
            }).then(res =>{
                console.log(res +'第三層代碼');
            })
            </script>

 此外,promise還有同時處理幾個或多個請求

Promise.all()

這個用於:需求:需要同時獲取兩個或多個數據,之后才能下一步

用於判斷是否接受到了或者叫判斷執行完成了這兩個或多個請求


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM