对于函数这个概念,想必学点计算机的都不陌生了,任何编程语言后离不开函数的使用,可见函数的作用非常大了,之前怎么都理解不了回调函数这个毛刺,也可能没静下心来仔细思考过,简单的东西变得复杂化了,但是最近碰到有点回调这个问题,也理解很多,所以记录一下。
一,函数和回调函数的对比
1. 普通函数
普通函数一般都经常见,也经常使用,随手就可以写出来,比如:
// 代码一
// 定义函数
function test(a, b) {
console.log(a);
console.log(b);
}
//调用函数
test(1, 3)
2. 回调函数
再比如一段vue封装的axios请求:
// 代码二
export function request (config, success, failure) {
// 1.创建axios实例
const instance = axios.create({
baseURL: 'https://autumnfish.cn/',
timeOut: 5000
})
// 2.发送真正的网络请求
instance(config)
.then(res => {
success(res)
})
.catch(err => {
failure(err)
})
}
// 调用
request({
url: 'top/playlist'
}, res =>{
console.log(res);
}, err =>{
console.log(res);
})
看了代码二,此时是不是有一点点小疑惑呢,因为这里就使用了回调函数知识和概念;
二,回调函数的个人理解
1.常规的函数执行总结为:
- 调用函数时 传递实参给函数 => 声明函数形参接收 => 获取返回值
// 代码三
// 2.声明函数 函数形参接收
function test(a, b) {
// 3.获取返回值
console.log(a);
console.log(b);
}
// 1.调用函数 传递实参给函数
test(1, 3)
2.回调函数时执行总结为:
- 函数(匿名)作为参数传递时 由于函数本身就有形参 内部使用函数形参名和加()(相当于调用了传递过来的匿名函数)
- 此时内部使用这个函数时 可以传递实参给函数参数(形参) => 函数参数(形参)接收实参 => 获取回调出来的返回值
听起来感觉有点绕,下面看一下简单实例代码:
//代码四
// 定义函数
function callback(fn1, fn2) {
fn1('我是fn1回调函数 传递的回调值')
fn2('我是fn2回调函数 传递的回调值')
}
// 调用函数 此时传递两个函数参数,而不再是数字,字符串等常见类型了
// 箭头函数的形式
callback(res => {
console.log('拿到回调值' + res ); // res = 我是fn1回调函数 传递的回调值
},err => {
console.log('拿到回调值' + err ); // err = 我是fn2回调函数 传递的回调值
})
// 如果对于箭头函数不理解,可以看看下面普通函数形式,可能更易理解了
callback(function (res) {
console.log(res) // 返回值同上
},function (err) {
console.log(err) // 返回值同上
})
看完代码四例子,接下来再看看一开始介绍的代码二,是不是理解了一点呢,
// 代码二
export function request (config, success, failure) {
// 1.创建axios实例
const instance = axios.create({
baseURL: 'https://autumnfish.cn/',
timeOut: 5000
})
// 2.发送真正的网络请求
instance(config)
.then(res => {
success(res)
})
.catch(err => {
failure(err)
})
}
// 调用
request({
url: 'top/playlist'
}, res =>{
console.log(res);
}, err =>{
console.log(res);
})
本文纯属学习过程中的个人理解,如若不当之处,敬请评论指出。