JS中promise的基础用法

小明爱学习

发布于 2020-07-03 10:13:02

3.9K0

发布于 2020-07-03 10:13:02

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中每个传入的数据。