【JS】ES6-Promise_es6-promise.min.js-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_50947589/article/details/125368269

本文探讨了Promise在JavaScript中的作用，它用于解决回调地狱，提高异步代码的可读性和可维护性。Promise有三种状态：pending、fulfilled和rejected。通过Promise.prototype的then和catch方法处理异步操作的结果，使得在并发请求中管理数据变得容易。文章通过一个实际例子展示了如何使用Promise解决回调地狱问题，通过链式调用来简化代码并节省内存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Promise？

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

Promise有什么作用？

promise是用来解决两个问题的：

回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象，提高代码的可读性。
promise可以支持多个并发的请求，获取并发请求中的数据。

回调地狱：简单理解就是回调函数中内嵌着回调函数，调用不同函数时，可以调用他的返回值，调用异步的回调函数时，他不会立刻有一个返回值。

Promise的使用

promise在其原型上有 then、catch方法，还有reslove，reject等静态方法。通过创建Promise实例，可以调用Promise.prototype上的then、catch方法。在实例化Promise的时候需要传入 resolve 和 reject 这两个函数作为其参数，当异步任务顺利完成且返回结果值时，会调用resolve函数；而当异步任务失败且返回失败原因（通常是一个错误对象）时，会调用reject函数。

一个Pormise可以看做是一个if判断，通过状态管理后续操作。

    let pro = new Promise((resolve,reject)=>{
        if(Math.random()>0.5){
            resolve("ok");
        }else{
            reject("no");
        }
    })
    pro.then(function(data){
        console.log(data);
    })

    pro.catch(function(err){
        console.log(err)
    })

随机生成：

Promise解决回调地狱的问题

以个人代码为例：

首先准备几个json文件

1.json：

{

"id": "1",

"name": "卡梅隆",

"films": [

{

"name": "泰坦尼克",

"des": "沉船"

},

{

"name": "阿凡达",

"des": "探险"

}

]

}

2.json：

{

"id": "2",

"name": "冯导",

"films": [

{

"name": "天下无贼",

"des": "盗亦有道"

},

{

"name": "非常勿扰",

"des": "光头也有春天"

}

]

}

3.json：

{

"id": "3",

"name": "张导",

"films": [

{

"name": "大红灯笼高高挂",

"des": "成名作"

},

{

"name": "狙击手",

"des": "不一样的抗美援朝"

}

]

}

director.json：

[

{

"name": "卡梅隆",

"id": 1

},

{

"name": "冯导",

"id": 2

},

{

"name": "张导",

"id": 3

}

]

login.json：

[

{

"code": "200",

"msg": "恭喜你登陆成功"

}

]

首先分析思路：

<body>
    <!-- 目标：拿到关于 狙击手 电影的描述
    过程：
    1、先登录
    2、请求 导演信息，找到导演id
    3、请求 电影信息，找到电影描述 -->
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $.ajax({
        type:'get',
        url:"json/promisejson/login.json",
        success(res){
            if(res[0].code/1 === 200){
                //2、请求 导演列表信息，请求 张导 的id
                $.ajax({
                    type:'get',
                    url:"json/promisejson/director.json",
                    success(res){
                        let id = 0;
                        res.some(d => {
                            if(d.name === '张导'){
                                id = d.id;
                                return true;
                            }
                            return false;
                        })
                        //3、请求 张导 的电影数据，并拿到 狙击手 的电影信息
                        $.ajax({
                            type:'get',
                            url:"json/promisejson/" + id + ".json",
                            success(res){
                                console.log(res);
                            }
                        })
                    }
                })
            }
        }
    })
</script>

然后实现：

<body>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    //1、登录
    // let myLogin = () => new Promise();
    function myLogin() {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: 'get',
                url: "json/promisejson/login.json",
                success(res) {
                    resolve(res);
                },
                error(err) {
                    reject(err);
                }
            })
        });
    }
    //2、导演列表
    function myDirector() {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: 'get',
                url: "json/promisejson/director.json",
                success(res) {
                    resolve(res);
                },
                error(err) {
                    reject(err);
                }
            })
        });
    }

    //3、电影信息
    function myFilm(id) {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: 'get',
                url: "json/promisejson/" + id + ".json",
                success(res) {
                    resolve(res);
                },
                error(err){
                    reject(err);
                }
            })
        });
    }

    myLogin()
    .then(res =>{
        return myDirector();
    })
    .then(res =>{
        return myFilm(1);
    })
    .then(res =>{
        console.log(res);
    })
    .catch(err=>{    //任何一步报错都会执行这一个catch
        console.log(err);
    })
</script>

其中，将Promise的then方法和catch方法使用链式语法串联起来，用一个catch来接受以上所有的then得到的失败结果，节省了内存。