专栏首页smh的技术文章JS中promise的基础用法

JS中promise的基础用法

pormise在我看来,主要来优化存在多个ajax请求时,可以把回调函数给独立出来,统一调用。

比如在以前,我们在进行多个ajax请求时,第二个请求需要用到第一个请求返回的数据时,我们通常是这样的:

        $.ajax({
            url: 'xxx.php',
            method: 'post',
            data: {page:1},
            datatype: 'json',
            success: (res) => {
                var id = res.id;//得到请求返回的数据,进行第二次请求
                $.ajax({
                    url: 'xxx.php',
                    method: 'post',
                    data: { id: id },
                    datatype: 'json',
                    success: (res) => {

                    }
                })
            },
            error: (err) => {
                            
            }
        });

可能有人优化会对ajax做个函数的封装,但实际还是嵌套的,promise就能把回调函数给独立出来,然后链式调用。

我们优化一下上面的代码:

        var promise = new Promise(function (resolve, reject) {
            $.ajax({
                url: '/Dome/Json.ashx',
                method: 'get',
                datatype: 'json',
                success: (res) => {
                    console.log("Json.ashx");
                    var obj = JSON.parse(res);
                    resolve(obj[1].ID);
                },
                error: (err) => {
                    reject("/Dome/Json.ashx");
                }
            });
        });
        function handler(data=1) {
            var promise1 = new Promise(function (resolve, reject) {
                $.ajax({
                    url: '/ashx/PageHandler.ashx',
                    method: 'get',
                    data: {page:data},
                    datatype: 'json',
                    success: (res) => {
                        console.log("PageHandler.ashx");
                        resolve(res);
                    },
                    error: (err) => {
                        reject("/ashx/PageHandler.ashx");
                    }
                });
            });
            return promise1;
        }
        function failed(url) {
            console.log(`请求失败:${url}`);
        }

        //调用
        promise.then(handler, failed).then(function (data) {
            console.log(data);
        }, failed)

这里首先来解释一下上面的代码:

首先实例一个Promise对象,然后有两个参数,第一个为resolve,第二个为reject,前者一般为成功的时候调用,后者是失败的时候调用。

我们主要说调用那里的代码,then方法可以把回调函数分离出来,then函数有两个参数,均为函数,前者是请求成功的函数,后者是请求失败的函数。

这里第一次调用then,就执行第一个ajax请求,然后传入两个函数,handler和failed,这里是handler就是上面ajax的第二个请求,由于第一个ajax请求成功,调用了resolve函数,promise就会调用handler函数,如果请求失败,则进入reject,那就会调用failed函数。

然后还要讲的一个函数是promise的all函数。all函数主要用于多个请求的数据无关联的时候。

上述的代码不变,我们把调用改一下:

        //适用于多个ajax请求,但是每个ajax返回数据无关联的情况
        Promise.all([promise, handler()]).then(function (result) {
            console.log("结束");
            console.log(result);
        })

all函数会等待全部请求完成之后,才完成回调,数据则在result中用数组的形式返回。

数组中的数据是每个resolve中每个传入的数据。

promise不止用于异步请求,很多场景都可以用,需要大家灵活应用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript中函数声明与函数表达式

    在javascript中,我们经常要声明函数,或者使用函数表达式,今天我们就来说说这两者的区别。

    小明爱学习
  • CSS:focus-within让你脱离JS

    CSS有很多有意思的东西,让以前必须要使用js才能完成的效果,现在使用一些css选择器就完成了,今天我们就来说说focus-within。

    小明爱学习
  • IHttpAsyncHandler实现广播功能

    IHttpAsyncHandler实现广播功能原理:第一次页面加载,发送一个请求到服务器,服务器挂起这个请求,等到有数据之后在返回这个请求,就实现了服务器主动推...

    小明爱学习
  • jQuery ajax - ajax() 方法jQuery ajax - ajax() 方法

    http://www.w3school.com.cn/jquery/ajax_ajax.asp

    一个会写诗的程序员
  • 运行时调度程序(go runtime scheduler)

    Goroutine的引入是为了方便高并发程序的编写。 一个Goroutine在进行阻塞操作(比如系统调用)时,会把当前线程中的其他Goroutin...

    李海彬
  • mui.init()与mui.plusReady()区别和关系

    mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置...

    砸漏
  • 关于深度学习你必须知道的几个信息理论概念

    信息论是一个重要的领域,它对深度学习和人工智能作出了重大贡献,但很多人对它却并不了解。信息论可以看作是微积分、概率论和统计学这些深度学习基本组成部分的复杂融合。...

    AI研习社
  • IBM的硅光封装方案

    Intel与IBM在硅光领域深耕了多年,Intel已经推出了基于硅光的PSM4和CWDM4产品。目前IBM还没有硅光相关的产品问世,但是经常可以看到其技术进展报...

    光学小豆芽
  • 迪杰斯特拉(dijkstra)c语言实现方法

    迪杰斯特拉(dijkstra)是用来实现查找一个点到其它点最短路径的一种方法。通过查找从起点到最短距离的点,然后将该点放入到集合中,代表以及找到起点到这一点的最...

    诸葛青云
  • python: lambda函数

    JNingWei

扫码关注云+社区

领取腾讯云代金券