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

概述:

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

代码展示:

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 发送的问题

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

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

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)
                 }
         })
})

相关推荐

  1. js地狱改装promise方式函数

    2024-01-26 14:36:03       54 阅读
  2. C# 函数

    2024-01-26 14:36:03       43 阅读
  3. 以为函数是同步js问题)

    2024-01-26 14:36:03       85 阅读
  4. js 函数如何追加参数

    2024-01-26 14:36:03       29 阅读
  5. 函数介绍

    2024-01-26 14:36:03       38 阅读
  6. 【vue函数 this 指向上】

    2024-01-26 14:36:03       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-26 14:36:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-26 14:36:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-26 14:36:03       82 阅读
  4. Python语言-面向对象

    2024-01-26 14:36:03       91 阅读

热门阅读

  1. C语言sizeof 不是函数吗?

    2024-01-26 14:36:03       45 阅读
  2. YAML语法记录

    2024-01-26 14:36:03       55 阅读
  3. 关于SQLite 的下载与使用。配合python

    2024-01-26 14:36:03       60 阅读
  4. mysql面试题合集-分布式

    2024-01-26 14:36:03       54 阅读
  5. 玩转浏览器开发者工具

    2024-01-26 14:36:03       53 阅读
  6. shallowRef与shallowReactive

    2024-01-26 14:36:03       48 阅读
  7. IEC60870-5-104规约

    2024-01-26 14:36:03       48 阅读
  8. npm更换镜像

    2024-01-26 14:36:03       51 阅读
  9. Kotlin协程 SharingStarted

    2024-01-26 14:36:03       57 阅读