vue- promise

最新推荐文章于 2022-10-10 10:11:02 发布

weixin_43331769

最新推荐文章于 2022-10-10 10:11:02 发布

阅读量447

点赞数

本文链接：https://blog.csdn.net/weixin_43331769/article/details/104139456

版权

vue 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 0 订阅

订阅专栏

Ajax

4 篇文章 0 订阅

订阅专栏

vue- promise

一、基本用法
二、基于promise处理Ajax
三、promise常用的API

一、基本用法

在这里插入图片描述异步不一定是顺序出现的，若想顺序出现可通过回调函数的嵌套：

上面方法不推荐使用。推荐使用promise

实例化promise对象，构造函数中传递函数，该函数中用于处理异步任务
resolve 和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

   <script type="text/javascript">
        // console.log(typeof Promise);
        // console.dir(Promise);
        var p = new Promise(function(resolve,reject){
            setTimeout(function(){
                var flag = true;
                if(flag){//正常情况
                    resolve('hello');
                }else{//异常情况
                    reject('出错了');
                }
            },100);
        });
        p.then(function(data){
            console.log(data)
        },function(info){
            console.log(info)
        });
   </script>

二、基于promise处理Ajax

<script type="text/javascript">
    function queryData(url){
        var p = 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(null);
        });
        return p;
    }
    queryData('http://localhost:3000/data')
        .then(function(data){  接受正常情况下：
            console.log(data);
        },function(info){	接受错误服务器情况下： 	
            console.log(info)
        })
</script>

三、promise常用的API

p.then()

得到异步任务的正确结果

p.catch()

获取异常信息

p.finally()

成功与否都会执行
在这里插入图片描述

<body>
    <script type="text/javascript">
        //promise常用的API-实例方法
        function foo(){
            return new Promise(function(resolove, reject){
                setTimeout(function(){
                    resolove(123);                      
                    },100);
                })
        }
        foo()
            .then(function(data){  正常情况下
                console.log(data)
            })
            .catch(function(data){  错误情况下
                console.log(data)
            })
            .finally(function(){ 最终执行
                console.log('finished')
            })
    </script>
</body>

在这里插入图片描述
上面的foo函数又可以写成（通过Ajax发送请求，并且保持顺序）

then参数中函数的返回值

在这里插入图片描述

对象方法

promise.all()并发处理多个异步任务，所有任务都执行完才能得到结果
promise.race()并发处理多个异步任务，只要有一个任务完成就能的到结果

weixin_43331769

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue- promise

vue- promise一、基本用法二、基于promise处理Ajax3：promise常用的APIp.then()p.catch()p.finally()一、基本用法实例化promise对象，构造函数中传递函数，该函数中用于处理异步任务resolve 和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果 <script type="text/ja...
复制链接

扫一扫