33·灵魂前端工程师养成-[前后分离]异步与promise

## 如果能直接拿到结果，那就是同步
# 例如：
# 1.在医院挂号，你拿到号才会离开
# 2.QQ的在线发送文件，对方发送完，你接收完文件才能关闭QQ


## 如果不能直接拿到结果，那就是异步
# 例如：
# 1.你在餐厅门口等位，叫号，你拿到号可以去逛街
# 那么什么时候才能去吃饭呢？
# 你可以每隔几分钟回去问一次，还剩几个。（轮询）
# 你也可以扫码用微信接收通知。（回调）
# 2.QQ的离线发送文件。

## 以AJAX为例
# request.send()之后，并不能直接得到respone
# 不信，可以console.log(request.respone)试试
# 必须等到readyState变为4后，浏览器回头调用request.onreadystatechange函数
# 我们才能得到request.response
# 这跟餐厅给你发微信提醒的过程类似


## 回调callback
# 你写给自己用的函数，不是回调
# 你写给别人用的函数，就是回调
# request.onreadystatechange就是我写给浏览器调用的
# 意思就是，你（浏览器）回头调用一下这个函数。
# 在中文中「回头」也有「将来」的意思，如：「我回头请你吃饭」

## 关联
# 异步任务需要在得到结果时通知JS来拿结果
# 怎么通知呢？
# 可以让JS写留一个函数地址（电话号码）给浏览器
# 异步任务完成时，浏览器调用该含税地址即可（拨打电话）
# 同时把 结果作为参数传给该函数（电话说，可以来吃饭了）
# 这个函数是我写给浏览器调用的，所以是回调函数

## 区别
# 异步任务需要用到回调函数来通知结果。
# 但回调函数不一定只用在异步任务里
# 回调可以用到同步任务里
# array.forEach(n=>console.log(n))就是同步回调

getJSON.onclick = () =>{
    const request = new XMLHttpRequest()
    request.open('GET','/zls.json',false)
    request.onreadystatechange = () =>{
        if(request.readyState === 4 ){
            if(request.status >= 200 && request.status < 300){
                console.log(request.response)
                const object = JSON.parse(request.response)
                myName.textContent = object.name
            }
        }
    }
    request.send()
}

getJSON.onclick = () =>{
    const request = new XMLHttpRequest()
    request.open('GET','/zls.json')
    request.onreadystatechange = () =>{
        if(request.readyState === 4 ){
            if(request.status >= 200 && request.status < 300){
                console.log(request.response)
                const object = JSON.parse(request.response)
                myName.textContent = object.name
            }
        }
    }
    request.send()
}

fs.readFile('./1.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，表示成功和失败

getUser(user=>{
    getGroups(user,(group)=>{
        groups.forEach((g)=>{
            g.filter(x => x.ownerId === user.id).forEach(x => console.log(x))
        })
    })
})

ajax = (method,url,options)=>{
    const {success,fail} = options //析构赋值
    const request = new XMLHttpRequest()
    request.open(method,url)
    request.onreadystatechange = () =>{
        if(request.readyState === 4){
            //成功就调用 success，失败就用 fail
            if(request.status < 400){
                success.call(null,request.respone)
            }else if(request.status >= 400){
                fail.call(null,request,request.status)
            }
        }
    }
    request.send()
}

// 调用封装函数
ajax('get','/xxx',{
    success(response){},fail:(request,status)=>{}
})

//左边是function缩写，右边是箭头函数，记下来，别再问我

// 先改一下调用姿势
ajax('get','/xxx',{
    success(respone){},fail:(request,status)=>{}
})

// 上面代码，用到了两个回调，还是用了 success 和 fail

// 改成Promise写法
ajax('get','/xxx').then((respone)=>{},(request)=>{})

// 虽然也是回调
// 但是不用记success和fail了
// then的第一个参数就是success
// then的第二个参数就是fail

// 请问ajax()返回了个啥？
// 返回了一个含有.then()方法的对象呗
// 那么再请问，如何得到这和个含有.then()的对象呢？
// 那就要改造ajax的源码了,如下:

ajax = (method,url,options)=>{
    return new Promise((resolve,reject)=>{
        const {suuccess,fail} = options
        const request = new XMLHttpRequest()
        request.open(method,url)
        request.onreadystatechange = () =>{
            if(request.readyState === 4){
                if(request.status < 400){
                    resolve.call(null,request.respone)
                }else if(request.status >= 400){
                    reject.call(null,request)
                }
            }
        }
        request.send()
    })
}

return new Promise((resolve,reject)=>{}

axios.get('/5.json')
    .then(respone =>
        console.log(response)
    )