js中将回调地狱改装成promise方式的函数

zhang-zan2024-01-26 8:17

概述：

回调地狱（Callback Hell）是指在异步编程中，多层嵌套的回调函数导致代码难以理解、维护和扩展的情况。

代码展示：

javascript 复制代码

ajax({
    url: '我是第一个请求',
    success (res) {
        // 现在发送第二个请求
        ajax({
            url: '我是第二个请求'，
            data: { a: res.a, b: res.b },
            success (res2) {
                // 进行第三个请求
                ajax({
                    url: '我是第三个请求',
                    data: { a: res2.a, b: res2.b },
                    success (res3) {
                        console.log(res3)
                    }
                })
            }
        })
    }
})

解决方案：Promise

promise 就是一个语法

我们的每一个异步事件，在执行的时候

都会有三个状态，执行中 / 成功 / 失败

因为它包含了成功的回调函数

所以我们就可以使用 promise 来解决多个 ajax 发送的问题

javascript 复制代码

new Promise(function (resolve, reject) {
// resolve 表示成功的回调
// reject 表示失败的回调
}).then(function (res) {
// 成功的函数
}).catch(function (err) {
// 失败的函数
})

上面回调地狱改写为Promise方式：

javascript 复制代码

new Promise(function (resolve, reject) {
        ajax({
            url: '第一个请求',
            success (res) {
                resolve(res)
            }
        })
    }).then(function (res) {
    // 准备发送第二个请求
        return new Promise(function (resolve, reject) {
            ajax({
                url: '第二个请求',
                data: { a: res.a, b: res.b },
                success (res) {
                    resolve(res)
                }
            })
        })
    }).then(function (res) {
         ajax({
                 url: '第三个请求',
                 data: { a: res.a, b: res.b },
                 success (res) {
                     console.log(res)
                 }
         })
})