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

概述:

回调地狱(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)
                 }
         })
})
相关推荐
Dorcas_FE3 分钟前
axios请求缓存与重复拦截:“相同请求未完成时,不发起新请求”
前端·spring·缓存
dreams_dream10 分钟前
vue中axios与fetch比较
前端·javascript·vue.js
梦鱼31 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best66632 分钟前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东32 分钟前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生33 分钟前
微信小程序一键登录可行性方案
前端·微信小程序
维他AD钙33 分钟前
前端开发 8 个非常实用小技巧:高效解决日常开发痛点
前端
光影少年38 分钟前
webpack和vite优化方案都有哪些
前端·webpack·node.js
给月亮点灯|39 分钟前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js