JS中promise的基础用法

浏览量:300 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不止用于异步请求,很多场景都可以用,需要大家灵活应用。

如无作者授权,请勿转载。

评论区:

#1楼 2020年07月02日 程序员
promise确实很不错,但是IE9不支持
回复 
昵称:
内容:
验证码:  6664

QQ群:477600139

今日头条:前端开发梦工厂

腾讯云社区:小明爱学习

微信公众号:霓虹国的佛系少年