AJAX（2）异步

经过昨天的一天AJAX的学习，今天对AJAX的起手写法已经烂熟于心了，那么现在开始新的AJAX的学习

异步

什么是异步？对它我的理解是，如果能直接拿到结果的，就是同步，如果不能直接拿到结果的，就是异步。

• 我们可以举个例子

对于异步的这个操作，我们可以有两种操作的方法：回调和轮询，还是用举例来说：

异步用在AJAX

在AJAX中，我们在request.send之后，并不能直接得到response,必须等到readyState变成4之后，通过回调函数onreadstatechange,我们才能得到request,这就是一个异步操作用回调函数解决的案例

• 异步和回调的关系

• 区别

• 判断同步异步
  • setTimeOut
  • AJAX
  • AddEventListener
  • Promise.then

以上几个全是异步的，其他没说的都是同步的（还有好多，一下子想不起来了，具体情况具体分析）
通过回调来写一个摇骰子

function f1(x){
	console.log(x)
}
function 摇骰子(fn){
	setTimeOut(()=>{
   	fn(Math.random()*6+1)
   },1000)
   
这个代码还可以简化
摇骰子(console.log)

此时，f1就是个回调函数，用来获得摇骰子方法中的值。
总结一下：

• 异步任务不能拿到结果
• 于是我们写一个回调给异步任务
• 异步任务完成时调用回调
• 调用的时候把结果作为参数传给回调
• 回调执行，将结果处理后返回

回调的参数过多

如果回调的参数不止一个，比如有两个，此时我应该怎么办？
那就搞两个回调fn(参数1=>{},参数2=>{}),或者接收两个参数，fn((参数1，参数2)=>{}),此时就会出现各种各样的解决方法，有人用第一种，有人用第二种。 而且过多的回调，会导致出现回调地狱，此时代码就变得十分难懂

getA(a=>{
	getB(a,b=>{
    	    b.forEach((c)=>{
        	   c.map((x)=>{
            	     x.id = a}).forEach((x)=>{x++})	
        })
    })
})

这就是成堆的回调造成的回调地狱，这样很难进行错误的处理。 于是就有人抄袭了Promise,用Promise来解决这个问题,Promise到时候会再次做出一个总结，这边只给出封装的结果

ajax = (url,fn1,fn2)=>{
	return new Promise((resolve,reject)=>{
	const request = new XMLHttpRequest();
    request.open('get',url)
    request.send()
    request.onreadystatechange = ()=>{
    if (request.readyState === 4){
        if (request.status >= 200 && request.status < 300){
            resolve.call(null,request.response)
        }else{
            reject.call(null,request)
        }
    }
  }.then((e)=>{
      fn1()
  },(e)=>{
      fn2()
  })
}

因为Promise的then返回一个Promise对象，所以可以链式调用，如果还要接着在上一个结果中调用函数，直接一个接下去用then就好了，非常的方便。但是这个封装还是很有问题的：我们无法指定请求头，比如说应对同源策略的的CORS。于是针对上述的问题，我们想到了运用库去解决——比如JQuery的ajax,以及现在常用的axios。jQuery的库现在已经很少前端在使用了，主要用的就是axios,所以我们这也开始直接用axios来解决问题。 axios的使用有点长，回头单独写一篇文章介绍吧