回调函数

回调函数

什么是回调函数

在一个函数中，存在着一个函数参数时，这个函数参数就是回调函数

function text(callback) {
    var a = 1
    var b = 2
    var result = a + b
    callback && callback(result)
}

text((result) => {
    console.log(result)
})

text函数在处理固定的程序之后，并不关心回调函数里面的逻辑，只是将结果通过参数的方式传递给回调函数。这种方式叫做回调传参
回调传参的目的就是为了帮助回调函数完成接下来的任务。

回调函数特点

• 和本函数无关
• 本函数可以给回调函数提供参数
• 本函数不关心回调函数的逻辑
• 回调函数可以在本函数的任务位置执行（同步化）

总结：回调其实是本函数的扩展。本函数完成一部分固定的程序任务，回调函数完成一个不固定的程序任务。

接口

回调函数的封装：在集成特定功能的前提下，提供接口 进行各种程序编写。

function text() {
  ...
}
text(function(result) {
})
// text就是一个接口
// 接口回调内部去完成接下来的任务

在vue3中的 onMounted 我们说他是一个Composition API,这个API就是接口的意思。

function onMounted(callback) {
  // ...挂载组件后需要完成的一系列特定的功能
  callback && callback()
}
onMounted(function() {
 
})

回调和异步

在异步程序中拿到结果：

• async: true

const data = $.ajax('http://localhost:3000/get_data', {
   async: true
})
// 阻塞
console.log(data)
console.log('hello')

async: true表示这个异步程序和下面程序变成同步关系（同步：下面的程序要执行，必须等上面的执行完）
而我们想要的是

const data = $.ajax(‘http://localhost:3000/get_data’, {
async: true
})
console.log(data)

console.log(‘hello’)

红色的保持同步关系，红色和蓝色的保持异步关系

• 回调函数

$.ajax('http://localhost:3000/get_data', {
    // 回调函数
    success: data => {
        console.log(data)
    }
})
console.log('hello')

• promise

function getData() {
    return new Promise((resolve, reject) => {
        $.ajax('http://localhost:3000/get_data', {
            success: data => {
                resolve(data)
            }
        })
    })
}


getData().then(data => {
    console.log(data)
})
console.log('hello')

**promise**存在的意义是让请求和获得数据和下面其他程序优雅的保持一种异步关系
他不是用来解决回调地狱的，回调地狱是自己程序上的设计问题，和回调函数没有任何关系。

解决回调地狱，我们更愿意

console.log(第一次结果）
console.log(第二次结果）
console.log(第三次结果）

而不是使用promise.then().then().then()这种链式操作。

function getData() {
    return new Promise((resolve, reject) => {
        $.ajax('http://localhost:3000/get_data', {
            success: data => {
                resolve(data)
            }
        })
    })
}
function getData2() {
    return Promise.resolve('hello22')
}
async function getInfo (){
    const data = await getData()
    const data2 = await getData2()
    console.log(data, data2)
}
getInfo()
console.log('hello')