js中的回调函数callback

作者: adm 分类: node 发布时间: 2023-03-14

概念:A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. from MDN…

翻译过来:回调函数是一个被当作参数传入的的函数,在外部函数内部调用来完成一些动作或者线程

特点:

1.作为参数被传递
2. 在函数内部调用

// 预先声明一个函数
function sayHi(name) {
  alert('Hello ' + name)
}

function processUserInput(callback) {
  var name = prompt('Please say hello')
  // 在内部调用
  callback(name)
}
// 函数被作为参数传递
processUserInput(sayHi);

我们经常看到的一些回调函数:

// (1) 
await api.someApi(param).then(res => {
	// 回调函数体
})

// (2) 
this.$refs['form'].validateForm((valid) => {
// 回调函数体
if (valid) {
	// do something...
}
})

机制:js是异步执行的,也就是说js代码不是一行一行按部就班的去执行的,例如:我们在请求一个网络接口时,我们不知道它什么时候请求完成,这个时候,我们要保证我们能及时获取到服务器返回的数据,我们就要用回调函数来解决。

作用:回调函数可以使请求不阻塞后面的代码,但又能保证我们及时获取到返回的数据。

触发调用:回调函数不是由函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应

举个栗子:你去商店买东西,恰好你要买的东西卖完了,商店老板说你留一个电话吧,啥时候到货了,我再通知你,你留的电话就是回调函数,至于什么时候给你打(触发,调用回调函数)呢,条件是到货了(类似于接口请求OK返回数据)

多个异步处理:在有多个请求的时候,它有可能是不按我们的书写顺序去执行的,那么,这个时候,我们要保证代码按照我们的意思去执行,怎么办呢?答案是:async/await (不过async/await不在本篇讨论的范围内)

indexRouter.get('/data', (req, res, next) => {
  // 调用
  let a=dialNumber('189923', callback)
  res.send({
    status: 200,
    data: [1, 2, 3, 4, 5, 6, 7,a]
  })
})
//或者匿名调用
indexRouter.get('/data2', (req, res, next) => {
  //或者匿名调用
  dialNumber('123', function (callback) {
    res.send({
      status: 200,
      data: [1, 2, 3, 4, 5, 6, 7,callback]
    })
    })
})

// 预先定义回调函数,等待时机触发调用
function callback(num) {
	return num;
}
// 被当做参数传入函数
function dialNumber(num, cb) {
	return cb(num)
}

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!