异步和Promise

什么是异步？什么是同步

异步

如果能直接拿到结果 ----> 同步

比如在医院挂号，拿了号才会离开窗口

拿不到结果是不会离开的

如果不能直接拿到结果 ---> 异步

比如你在餐厅门口等位，你拿到号可以去逛街

什么时候才能真正吃饭?

你可以每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，如图

image

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表示成功和失败

存在问题

1. 不规范，名称五花八门，如success+error,success+fail,done+fail
2. 容易出现回调地狱
3. 难以进行错误处理

回调地狱

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) 传入成功和失败函数