回调函数地狱学习笔记

回调函数地狱

概念：

在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱

缺点：

• 可读性差
• 异常无法捕获
• 耦合性严重

例子：

axios({url: '请求的目标地址'}).then(result => {
    console.log('第一层')
    axios({url: '请求的目标地址'}).then(result => {
        console.log('第二层')
    }).then(() => {
        axios({url: '请求的目标地址'}).then(result => {
            console.log('第三层')
        })
    })
})

解决（Promise 链式调用）：

概念：

依靠 then() 方法返回一个新生成的 Promise 对象特性，继续串联下一环任务，直到结束

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('1')
    },200)
})

//.then 返回一个新的 Promise 对象
const p2 = p.then(result => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(result + ' ---- 2')
        },200)
    })
})

p2.then(result => {
    console.log(result)
})

输出：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RuOknM5q-1689128115889)(C:\Users\mzhj\AppData\Roaming\Typora\typora-user-images\image-20230702145332769.png)]

axios 通过 Promise 链式调用解决回调地狱的实际使用：

axios({url: '请求的目标地址'}).then(result => {
    console.log('第一层')
    return axios({url: '请求的目标地址'})
}).then(result => {
    console.log('第二层')
    return axios({url: '请求的目标地址'})
).then(result => {
    console.log('第三层')
)

一般更推荐使用异步函数 async 和 await 实现