异步和同步
（混淆了异步和回调）
如果能直接拿到结果，即为同步
例如：在医院挂号，拿到号码才离开窗口
同步任务可能消耗10毫秒，也可能需要3秒
没有拿到结果就不会离开
如果不能拿到结果，即为异步
例如：去餐厅拿号，之后可以去逛街
每十分钟去询问次餐厅，即为轮询
用微信接收通知，即为回调
以AJAX为例
request.send()之后，并不能直接得到response
必须等到readyState变为4之后，浏览器回调request.onreadystatechange函数，从才能得到request.response，这与餐厅微信类似
回调callback
写给自己用的函数不是回调
写给别人用的函数就是回调
request.onreadystatechange就是写给浏览器调用的，浏览器回头调用此函数
回调：回头将来调用
回调举例
function f1(){}
function f2(fn){
fn()
}
f2(f1)
把函数1给另一个函数2
调用了f1没有？
答：没有调用
把f1传给f2（别人）没有？
答：传了
f2调用了f1没有？
答：f2调用了f1
那么f1就是写给f2回头调用的函数，所以f1是回调
异步和回调的关系
关联
异步任务需要在得到结果时通知JS来拿结果
通知的方法
可以让JS写一个函数地址给浏览器，异步任务完成时浏览器调用该函数地址，同时把结果作为参数传给该函数
由于此函数是写给浏览器调用的，所以是回调函数
区别
异步任务需要用到回调函数来通知结果
但是回调函数不一定只用在异步任务里，回调可以用到同步任务里
array.forEach(n => console.log(n))就是同步回调
判断同步异步
处于这三种内部，即为异步函数
- setTimeout
- AJAX（即XMLHttpRequest）
- AddEventListener
勿将AJAX设置为同步，这样做会使请求期间页面卡住
还有其他异步API，再另行说明
例如：
function 摇骰子(){
setTimeout(()=>{
return parseInt(Math.random()*6)+1
},1000)
}
摇骰子()里面没有写return，那就是return undefined
箭头函数里有return，返回真正的结果
所以这是一个异步任务（函数）
function 摇骰子(){
setTimeout(()=>{
return parseInt(Math.random()*6)+1
},1000)
}
const n = 摇骰子
console.log(n) //undefined
如何才能拿到异步的结果？
答：可以用回调函数
function 摇骰子(fn){
setTimeout(()=>{
fn(parseInt(Math.random()*6)+1)
},1000)
}
//function f1(x){ console.log(x) }
//摇骰子(f1)
摇骰子(console.log)
如果参数不一致就不能简化
错误简化的例子（面试题）
const a = ['1','2','3'].map(parseInt)
console.log(a)
得到的结果为
['1',NaN,NaN]
非期望结果['1','2','3']
正常非简化应该是
const a = ['1','2','3'].map((item,i,array)=>{
return parseInt(item)
})
console.log(a)
而错误简化就变成了
const a = ['1','2','3'].map((item,i,array)=>{
return parseInt(item,i,array)
})
console.log(a)
所以正确的简化应该存在箭头函数
const a = ['1','2','3'].map(item=>parseInt(item))
console.log(a)
总结
- 异步任务不能拿到结果
- 于是我们传一个回调给异步任务
- 异步任务完成时调用回调
- 调用的时候把结果作为参数
思考：如果异步任务有两个结果，成功或失败，应该怎么办？
方法一：回调接受两个参数
node.js的API都是接受两个参数的
fs.readFile('./readme.txt', (error, data)=>{
if(error){ console.log('失败'); return}
console.log( data.toString()) //此为成功
})
方法二：使用两个回调
ajax('get', './1.json', data=>(){}, error=>(){})
// 前面函数是成功回调，后面是失败，或者以下
ajax('get', './1.json', {
success: ()=>{}, fail: ()=>{}
})
//接受一个对象，对象有两个key表示成功和失败
然而，这些方法均有些问题
- 不规范，名称五花八门，有人用success+error，有人用success+fail，有人用done+fail
- 容易出现 回调地狱，代码变得难懂
- 很难进行错误处理
回调地狱举例
getUser( user => {
getGroup( user, (groups)=>{
groups.forEach( (g)=>{
g.filter( x=> x.ownerId === user.id)
.forEach( x=> console.log(x))
})
})
})
这仅仅才是四层回调，你可以想象四十层回调？
那么有什么办法解决这三个问题
- 规范回调的名字和顺序
- 拒绝回调地狱，让代码可读性更强
- 很方便的捕获错误
于是产生了promise思想
例如：AJAX封装
ajax = (method, url, options) => {
const {success, fail} = options //析构赋值
const request = new XMLHttpRequest()
request.open(method, url)
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status < 400) { //成功就调用success，失败就调用fail
success.call(null, request.response)
} else if (request.status >= 400) {
fail.call(null, request, request.status)
}
}
}
request.send()
}
ajax('get', '/xxx', {
success(response){}, fail: (request, status)=>{}
})//左边是function缩写，右边是箭头函数
现在改为更好的Promise封装：
//首先更改调用
ajax('get', '/xxx')
.then((response)=>{}, (request)=>{})
//虽然也是回调，但是并不需要success和fail
//then的第一个参数就是success，第二个参数为fail
如何得到 .then() 的对象，接下来改造ajax源码
ajax = (method, url, options) => {
return new Promise((resolve, reject) => {
const
{success, fail} = options
const
request = new XMLHttpRequest()
request.open(method, url)
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status < 400) {
resolve.call
(null, request.response)
} else if (request.status >= 400) {
reject.call
(null, request) //成功就调用resolve，失败就调用request
}
}
}
request.send()
}
)
}
return new Promise((resolve, reject) =>()关键改造（背下来）
- 第一步：return new Promise((resolve, reject) =>()，成功就调用resolve，失败就调用request
- 第二部：使用 .then(success,fail)传入成功和失败函数
后面还有更高级的Promise的用法
我们封装的ajax依然有很多的缺点
- 可以花时间把ajax写到完美（花时间）
- 使用jQuery.ajax
- 使用axios（最新）
jQuery.ajax已经非常完美了，可以看jQuery中文文档，但是不用掌握因为没有人用了，现在用axios