js——promise用法

全栈程序员站长

发布于 2022-07-02 14:04:25

5.6K0

发布于 2022-07-02 14:04:25

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

.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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

https