前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js——promise用法

js——promise用法

作者头像
全栈程序员站长
发布2022-07-02 14:04:25
5.5K0
发布2022-07-02 14:04:25
举报

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

.1.promise基本用法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
 <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>
在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
 <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>
在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
 <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>
在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
<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来解决回调地狱的问题

服务端部分代码

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
//基于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 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档