js——promise用法

大家好，又見面了，我是你們的朋友全棧君。

.1.promise基本用法

<script>
        const promise =new Promise((resolve,reject)=>{ 
   
            console.log(1);
            resolve(5);
            console.log(2)
        }).then(val=>{ 
   
            console.log(val);
        });
        promise.then((value)=>{ 
   
            console.log(value);
        })
        console.log(4);
        setTimeout(function(){ 
   
            console.log(6);
        })
  </script>           

複制

<script>
        const promise =new Promise((resolve,reject)=>{ 
   
            console.log(1);
            reject(5);
            console.log(2)
        }).then(val=>{ 
   console.log(val);},val=>{ 
   console.log('hhh'+val)})
        .catch(val=>{ 
   console.log('jjjj'+val)});
        promise.then((value)=>{ 
   
            console.log(value);
        })
        console.log(4);
        
    </script>           

複制

<script>
        const promise =new Promise((resolve,reject)=>{ 
   
            console.log(1);
            reject(5);
            console.log(2)
        }).then(val=>{ 
   console.log(val);},val=>{ 
   console.log('hhh'+val);return new Promise((res,rej)=>{ 
   rej(8)})})
        .catch(val=>{ 
   console.log('jjjj'+val)});
        promise.then((value)=>{ 
   
            console.log(value);
        })
        console.log(4);
        
    </script>           

複制

<script>
        const promise =new Promise((resolve,reject)=>{ 
   
            console.log(1);
            reject(5);
            console.log(2)
        }).catch(val=>{ 
   console.log('jjjj'+val)})
        .then(val=>{ 
   console.log(val);},val=>{ 
   console.log('hhh'+val);return new Promise((res,rej)=>{ 
   rej(8)})})
       
        promise.then((value)=>{ 
   
            console.log(value);
        })
        console.log(4);
        
    </script>           

複制

2.Promise基本用法補充

Promise的構造函數接收一個函數作為參數，該函數接受兩個額外的函數，resolve和reject，這兩個函數分别代表将目前Promise置為fulfilled(已成功)和rejected(已失敗)兩個狀态。Promise正是通過這兩個狀态來控制異步操作的結果。在聲明的時候，Promise構造函數傳遞的參數函數會立即執行，是以Promise使用的正确姿勢是在其外層再包裹一層函數，使得構造函數中的函數按需執行，而不是立即執行。如下：

3.使用promise來解決回調地獄的問題

服務端部分代碼

//基于Promise處理ajax請求
        function queryData(url){ 
   
            return new Promise(function(resolve,reject){ 
   
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){ 
   
                    if(xhr.readyState!=4)return;
                    if(xhr.readyState==4&&xhr.status==200){ 
   
                        //處理正常的情況
                        resolve(xhr.responseText)
                    }else{ 
   
                        //處理異常情況
                        reject('錯誤')
                    }
                }
                xhr.open('get',url);
                xhr.send();
            }
        )  
        }
        //發送一個ajax請求
        queryData('http://localhost:3000/data')
        .then(function(data){ 
   
            console.log(data)
        },function(data){ 
   
            console.log(data)
        })

        //發送多個ajax請求，并保證順序
        //使用promise處理回調地獄問題
        queryData('http://localhost:3000/data')
        .then(function(data){ 
   
            console.log(data);
            return queryData('http://localhost:3000/data1')
        }).then(function(data){ 
   
            console.log(data);
            return queryData('http://localhost:3000/data2')

        }).then(function(data){ 
   
            console.log(data)
        })           

複制

釋出者：全棧程式員棧長，轉載請注明出處：https://javaforall.cn/147996.html原文連結：https://javaforall.cn