ajax异步请求，以及ajax异步返回的数据的处理方案

为什么JS会有同步任务和异步任务：
js是单线程，会按照顺序执行一个一个的任务，如果遇到某个任务像网络请求一类的需要延长执行回调函数，那么页面就会阻塞，所以引入了异步的概念。

同步任务：同步任务不需要进行等待可立即看到执行结果，比如console
异步任务：异步任务需要等待一定的时候才能看到结果，比如setTimeout、网络请求

为什么要监听异步任务：
不是所有异步任务都像定时器一样按时完成，所以我们通过消息队列（事件监听），监听异步任务的状态，如果已经可以执行回调函数，则将其放入事件队列（主线程执行栈）

异步任务中的宏任务和微任务：
微任务是存在于宏任务下的需要优先执行的任务。
遇到宏任务将其加入宏任务队列，微任务则立即执行
每当一个宏任务执行完，就将执行微任务队列中的所有任务。
即同步任务>异步任务（微任务>宏任务）

宏任务：HTML解析、鼠标事件、键盘事件、网络请求、执行主线程js代码和定时器（new Promise(xxx)中xxx是同步代码）

微任务：promise.then，dom渲染

异步数据的处理方案：
1、回调函数
2、promise
3、事件监听
4、发布/订阅(观察者模式)

ajax异步请求的实现：
核心对象XMLHttpRequset
步骤：
1、创建xhr实例对象
2、xhr.open（method,url,async）设置连接的参数
3、xhr.setRequestHeader（）设置发送数据的头部
4、xhr.send（数据）发送请求
5、监听readystate状态码

<script type="text/javascript">
        function ajax(){
            var xhr =new XMLHttpRequest()

            xhr.open('POST','http://rap2api.taobao.org/app/mock/287968/login/745595613',true)
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send("username=1&password=2")
            
            xhr.onreadystatechange = function(){
                console.log('xhr状态码：',xhr.readyState)
                if(xhr.readyState === 4){
                    if(xhr.status === 200){
                        console.log('返回的数据：',xhr.responseText)
                    }
                }
            }
        }
    </script>

一、利用回调函数处理ajax异步返回的数据

<script type="text/javascript">
        function ajax(fn){
            var xhr =new XMLHttpRequest()

            xhr.open('POST','http://rap2api.taobao.org/app/mock/287968/login/745595613',true)
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send("username=1&password=2")
            
            xhr.onreadystatechange = function(){
                //console.log('xhr状态码：',xhr.readyState)
                if(xhr.readyState === 4){
                    if(xhr.status === 200){
                        //console.log('返回的数据：',xhr.responseText)
                        return fn(xhr.responseText)
                    }
                }
            }
        }
        console.log('同步操作')
        ajax((data)=>console.log('回调完成',data))
    </script>

二、利用promise代替回调函数
promise可以解决回调地狱问题（回调函数多层嵌套）
promise包含三种状态
pending、fulfilled、rejected

function request(method,url,data=''){
            return new Promise((resolve,reject)=>{
                var xhr = new XMLHttpRequest()
                xhr.open(method,url,true)
                xhr.send(data)

                xhr.onreadystatechange = () => {
                    if(xhr.readyState === 4){
                        if(xhr.status === 200){
                            resolve(xhr.responseText)
                        }
                        else reject('出错')
                    }
                }
            })
        }
        const fn = () => request('POST','http://rap2api.taobao.org/app/mock/287968/login/745595613')
        fn().then((data)=>{
            console.log('执行了then方法',data)
        }).catch(err =>{
            console.log(err)
        })

三、axios也是ajax的封装，并包含promise中的API