什么是异步？什么是同步
异步
如果能直接拿到结果 ----> 同步
比如在医院挂号，拿了号才会离开窗口
拿不到结果是不会离开的
如果不能直接拿到结果 ---> 异步
比如你在餐厅门口等位，你拿到号可以去逛街
什么时候才能真正吃饭?
你可以每10分钟去餐厅问一下(轮询)
你也可以扫码用微信接收通知(回调)
异步举例
getHTML.onclick = ()=>{
const request = new XMLHttpRequest()
request.open('get','/3.html')
request.onreadystatechange = ()=>{
if(request.readyState === 4 && request.status===200){
const div = document.createElement('div')
div.innerHTML = request.response
document.body.appendChild(div)
}else{ }
}
request.send()
console.log(request.response)
}
request.send() 之后，不能直接得到response，如图
request.response里面是没有内容的
等到readyState变为4后，浏览器回头调用request.onreadystatechange函数，我们才能能到request.response
回调callback
写给别人用的函数，就是回调
request.onreadystatechange就是我写给浏览器调用的，意思是浏览器回头调一下这个函数
function f1(){}
function f2(fn){
fn()
}
f2(f1)
f1我定义了，没有调用，将f1传给f2，f2调用了f1，f1是回调
异步和回调的关系
关联
异步任务需要在得到结果是通知JS来拿结果
怎么通知?
可以让JS写留一个函数地址给浏览器，异步任务完成是浏览器调用该函数的地址即可
同时把结果作为参数传给该函数，这个函数是我写给浏览器调用的，所以是回调函数
区别
异步任务需要用到回调函数来通知结果
但回调函数不一定只用在异步任务了里
回调可以用到同步任务里
array.forEach(n=>console.log(n))就是同步回调
如何知道一个函数是同步还是异步的
如果一个函数的返回值处于
setTimeout
AJAX(XMLHttpRequest)
addEventListener
这三个东西内部，那么这个函数就是异步函数
不要将AJAX设置为同步,这样会使请求期间页面卡主
如果异步任务有两个结果成功或失败，怎么办
方法一： 回调接受两个参数
fs.readFile('./1.txt',(erro,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=>{
getGroups(user,(groups)=>{
groups.forEach((g)=>{
g.filter(x=>x.ownerId === user.id)
.forEach(x=>console.log(x))
})
})
})
AJAX未用Promise
ajax = (method,url,options)=>{
const {success,fail} = options
cosnt request = new XMLHttpRequest()
request.open(method,url)
request.onreadystatechange = ()=>{
if(request.readyState === 4){
//成功就调用success，失败就调用fail
if(request.status < 400) {
success.call(null,request.response)
}else if(request.status >= 400){
fail.call(null,request,request.statues)
}
}
}
request.send()
}
ajax('get','/xxx',{success(response){}, fail: (request,statuts)=>{}})
//对象里写得函数，这两种都可以
AJAX使用Promise
//Promise写法
ajax('get','/xxx').then((response)=>{},(request,status)=>{})
//虽然都是回调，但是不需要success和fail这个函数名了，then的第一个参数就是success，then的第二个参数就是fail
// ajax()返回了一个含有.then()方法的对象，
//返回有.then()的对象
ajax = (method,url,options)=>{
return new Promise((resolve,reject)=>{
const {success,fail} = options
cosnt request = new XMLHttpRequest()
request.open(method,url)
request.onreadystatechange = ()=>{
if(request.readyState === 4){
//成功就调用success，失败就调用fail
if(request.status < 400) {
resolve.call(null,request.response)
}else if(request.status >= 400){
reject.call(null,request,request.statues)
}
}
}
request.send()
})
}
记住：return new Promise((resolve,reject)=>{})
任务成功则调用resolve(result)
任务失败则调用reject(error)
resolve和reject会再去调用成功和失败函数
使用.then(success,fail) 传入成功和失败函数
