ES6---基础知识（Promise知识点）

最新推荐文章于 2026-02-02 11:49:57 发布

原创最新推荐文章于 2026-02-02 11:49:57 发布 · 281 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#es6

Js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍Promise作为异步编程解决方案的基础知识，包括其在ES6中的引入、如何创建和使用Promise对象，以及在Vue中结合Axios的应用。深入探讨Promise处理网络请求、封装技巧和Promise.all与Promise.race的使用。

Promise

一、简介：

Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

二、目的：

为了解决嵌套的问题，ES6提供了几种解决方法

Promise ：最基础的掌握
Generator ：函数、高级、以Promise为基础、了解
async ：函数、更高级、以Promise为基础、了解

三、在vue中，会使用基于Promise的网络工具，axios内部装好了Promise和Http。

async属于异步操作，直接使用关键字就可以；
await等待网络请求执行完毕后结果返回给res

四、基本使用：

创建Promise对象，传递一个函数，函数的形参为resolve和reject

resolve和reject两个函数可以改变promise对象的状态；
如果调用resolve函数，promise对象就是成功的；
如果调用reject函数，promise对象就是失败的；

获取resolve和reject函数传递的数据

then方法相当于promise对象的方法，代表promise对象成功状态的回调函数
catch方法相当于promise对象的方法，代表promise对象失败状态的回调函数

<script>
        //使用Promise的使用
        //创建Promise对象，传递一个函数，函数的形参为reslove和reject
        let promise = new Promise((resolve,reject) =>{
            //reslove和reject为两个函数，可以改变promise对象的状态
            //例子
            if(3 < 5){
                //如果resolve函数的调用，那么promise对象就是成功的 ，那么就传递一个参数出去
                resolve("success");
            }else{
                //如果reject函数的调用，那么promise对象就是失败的
                reject("error");
            }
        })
        console.log(promise);

        //获取resolve和reject函数传递的数据
        promise.then( (res) => {//then方法相当于promise对象的方法，代表promise对象成功状态的回调函数
            //res就是resolve传递出来的数据
            console.log(res);
        }).catch( (error) => {//catch方法相当于promise对象的方法，代表promise对象失败状态的回调函数
            //error就是reject传递出来的数据
            console.log(error);
        })
    </script>

五、Promise的异步操作

1、使用Promise处理网络请求，
2、

在ajax请求之后调用resolve函数，传递请求成功的数据res实参
在ajax请求之后调用reject函数，传递请求成功的数据err实参

3、异步操作结束后的操作，使用promise对象的then和catch方法

<script>
        //使用promise处理网络请求，使用之前的接口
        //这里面的promise就是一个异步存放操作的容器
        let promise = new Promise( (resolve,reject) => {
            //使用ajax
            $.ajax({
                url : "http://XX.XX.XX.XX:8099/manager/category/findAllCategory",
                method : "get",
                data : {},
                success(res){
                    //在ajax请求之后调用resolve函数，传递请求成功的数据res实参
                    resolve(res)
                },
                error(err){
                    //在ajax请求之后调用reject函数，传递请求成功的数据err实参
                    reject(err);
                }
            })
        })
        console.log(promise);

        //异步操作结束后进行的操作，使用promise对象的then和catch方法
        //当前的promise.then与promise对象处于同一级，也就是异步编码，同步编写；
        //当promise对象执行到success时，下面的then和catch
        promise.then ( (response) => {
            console.log(response);
        }).catch( (error) => {
            console.log(error);
        })
    </script>

六、Promise的封装

封装promise对象，方便异步操作。

<script>
        //url method data 成功或失败的回调交给promise去做
        function send(url ,method ,data){
            //return一个promise对象
            //因为执行这个封装的方法最后需要拿到的就是promise对象
            return new Promise( (resolve,reject) => {
                //使用ajax发送请求
                $.ajax({
                    url : "",
                    method : "",
                    data : {},
                    success(res){
                        resolve(res);
                    },error(error){
                        reject(error);
                    }
                })
            })
        }


        // //调用封装好的promise对象
          send("http://XX.XX.XX.XX:8099/manager/category/findAllCategory","get",{})
        .then( (response) => {
            console.log(response);
        }).catch( (error) => {
            console.log(error);
        }).finally( () => {
            console.log("获取栏目数据完成");
        })

        // //查找所有用户
        send("http://47.106.244.1:8099/manager/user/fundAllUser","get",{})
        .then( (response) => {
            console.log(response);
        }).catch( (error) => {
            console.log(error);
        }).finally( () => {
            console.log("获取用户数据完成");
        })


        //另一种使用方法
        let p1 =  send("http://XX.XX.XX.XX:8099/manager/category/findAllCategory","get",{});
        let p2 = send("http://XX.XX.XX.XX:8099/manager/user/fundAllUser","get",{});
        
        //让p1和p2同时发送请求
        //Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例
        //合并p1和p2的结果，两个请求都完毕后一起将数据返回给p3
        let p3 = Promise.all([p1,p2]);
        p3.then( (response) => {
            console.log(response);
        }).catch( (error) => {
            console.log(error);
        });
        //只要p2 p1的状态都变成fulfilled/resolved,p3的状态才会编程fulfilled;
        //此时，p1,p2的返回值组成一个数组，传递给p3.
        //只要有其中一个被rejected，p3的状态就是rejected，

        //Promise.race() 赛跑 ，谁块用谁的结果
        let p3 = Promise.race([p1,p2]);
        p3.then( (response) => {
            console.log(response);
        }).catch( (error) => {
            console.log(error);
        });
        //只要p1,p2之中有一个实例率先改变状态，p3的状态就跟着改变；
    </script>