最近项目实施过程中除了写后端代码，偶尔还在用VUE写前端，十分好奇前端的回调函数是如何实现，于是有了以下的百度内容。
回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。
通俗的讲，就是将函数A作为参数传给另一个函数B，B运行过程中可以调用A。
function callback(){ //一个耗时的被调用方
setTimeout("console.log('this is callback function')",3000)
}
function foo(callback){ //调用方
callback()
console.log('this is main method')
}
foo(callback)
Js中回调函数使用非常多，以微信小程序原生请求为例(基于axios封装)。当前定义了的request函数就是一个ajax主函数，其中传入了定义好的success和fail函数。Ajax在特定时刻调用success或fail函数。
wx.request({
url: 'url',
data: data,
dataType: dataType,
enableCache: true,
enableHttp2: true,
enableQuic: true,
header: header,
method: method,
responseType: responseType,
timeout: 0,
success: (result) => {}, //when where why 不知道是否思考这个函数为何被执行
fail: (res) => {},
complete: (res) => {},
})
ajax如何实现的回调函数
ajax异步调用流程
1.ajax通过xmlHttpRequest对象发起请求(这个对象什么结构？)
2.设置响应HTTP请求状态变化的函数(什么时候用？怎么用？)
3.为XMLhttpRequest对象初始化一个Http请求，指定URL以及请求方式等(怎样初始化？)
4.发起请求(请求什么内容)
5.获取服务端返回的数据(从哪里获取)
A1:xmlHttpRequest的结构
A2:什么是响应状态改变函数，什么时候用，怎样定义?
xmlHttpRequest对象拥有readyStatus属性，当readyStatus改变时就触发状态改变响应函数，这个函数可以自定义。怎样定义
xmlHttpRequest.onreadystatuschange = function{ //这个函数被定义为状态改变函数
//xmlHttpRequest.readyStatus 改变就会打印一次下边的语句
//当然 我们在这个函数中做更多事情
console.log('readyStatus has been changed')
}
A3:怎样初始化一个xmlHttpRequest对象？
xmlHttpRequst.open(method,URL,flag,name,password) ，通过open方法指定请求方式(get、post)，指定请求路径(url)，指定是否异步请求(flag:true|false)，指定用户名和密码(可选)
A4:如何定义请求内容，请求的啥？参数在哪儿？
xmlHttpRequest.send(data) ，调用xmlHttpRequest对象的send方法，将请求参数传入即可
A5:从哪里获取服务器响应的参数？
xmlHttpRequest对象有属性 responseText，当其不为空时可以获取响应数据。
根据流程封装一个自定义的请求
1.获取对象
2.定义响应函数
3.初始化请求
3.发送请求
4.接收数据
5.接收完毕
6.调用回调函数
要求如下
$853.query(
url:'url',
params:'params',
type:'type',
success:function(data,result){},
fail:function(code,msg){}
)
核心代码
var xmlHttpRequest
function getHttpRequest(){ //区分浏览器版本
try{
return new XMLHttpRequest() //chrome内核
}catch(e){}
try{
return new newActiveXObject('Microwsoft.XMLHTTP') //ie
}catch(e){}
}
function query(URL,params,type,CALLBACK_success,CALLBACK_fail){
const POST_METHOD = 'post'
const JSON_TYPE = 'json'
//①获取对象
xmlHttpRequest = getHttpRequest()
//②指定状态改变触发的函数
xmlHttpRequest.onstatuschange = function (){
var readyStatus = xmlHttpRequest.readyStatus
switch(readyStatus){
case 4:
if(xmlHttpRequest.status == 200){
var data = xmlHttpRequest.responseText
if(type == JSON_TYPE){
data = JSON.parse(data)
}
CALLBACK_success(data,xmlHttpRequest.status) //执行回调
}else{
var code = xmlHttpRequest.responseText.errorCode //假设返回的数据中有errorCode
var msg = xmlHttpRequest.responseText.msg //有msg
CALLBACK_fail(code,msg)
}
break
default:
break
}
}
//③初始化对象(请求方式、url、是否异步)
xmlHttpRequest.open(POST_METHOD,URL,true)
//④发起请求
xmlHttpRequest.send(params)
}
相信到这里大概明白ajax请求对象的各个属性和方法起什么作用，还能大致猜测出，微信小程序的参数和成功、失败回调在什么时候，什么地方被调用执行。
参考博客：
https://www.jb51.net/article/114572.htm #JS回调函数基本定义与用法实例分析
https://blog.csdn.net/chaopingyao/article/details/106481895 #Ajax请求的五个步骤
https://cloud.tencent.com/developer/article/1605450?from=15425 # 前端基础-Ajax框架的封装
https://baijiahao.baidu.com/s?id=1704404768648603231&wfr=spider&for=pc
