js中的回调函数callback
概念: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) }