回调函数简单理解与分析

对于函数这个概念，想必学点计算机的都不陌生了，任何编程语言后离不开函数的使用，可见函数的作用非常大了，之前怎么都理解不了回调函数这个毛刺，也可能没静下心来仔细思考过，简单的东西变得复杂化了，但是最近碰到有点回调这个问题，也理解很多，所以记录一下。

一，函数和回调函数的对比

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);
})

本文纯属学习过程中的个人理解，如若不当之处，敬请评论指出。