Javascript教程第十六章：异步编程

一.异步编程

1.Promise微任务处理机制

Promise会创建微任务列表，宏任务列表会优先让微任务列表进行处理

new Promise((resolve,reject)=>{
    resolve("加载成功");
    // regect("加载失败")
}).then(
    value => {
        console.log("加载成功的业务处理1");
    },
    reason => {
        console.log("加载失败的业务处理1");
    }
).then(
    value => {
        console.log("加载成功的业务处理2");
    },
    reason => {
        console.log("加载失败的业务处理2");
    }
)

2.Promise的任务优先级

//宏任务区域快
setTimeout(()=>{
    console.log("setTimeout tast");
},0)


new Promise((resolve,reject)=>{

    /*同步代码块*/
    consolo.log("Promise task")
    resolve("加载成功");
    // regect("加载失败")
}).then(

    /*在收到resolve后，加入微任务列表*/

    value => {
        console.log("加载成功的业务处理1");
    },
    reason => {
        console.log("加载失败的业务处理1");
    }
)

console.log("Tsy")              //同步区域


输出顺序：
1.同步执行：Promise task
2.同步执行：Tsy
3.微任务执行：加载成功的业务处理1
4.宏任务执行：setTimeout task

3.使用Promise封装Ajax异步请求

function ajax(url){
    return new Promise((resolve,reject) =>{
        let xml = new XMLHttpRequest();  
        xml.onreadystatechange = function(){
            if(xml.readyState == 4){
                if((xml.status >= 200 && xml.status < 300) || xml.status == 304){
                    resolve(JSON.parse(this.response))
                }else{
                    reject("加载失败")
                }
            }
        }
        xml.open("GET",url,true) 
        xml.send(null);
    })
}

4.Promise多种错误监视与catch使用

new Promise((resolve,reject)=>{
    reject("加载失败");
}).then(
    value => {
        console.log("加载成功的业务处理1");
    },
).then(
    value => {
        console.log("加载成功的业务处理1");
    },
).catch(error => {
    console.log(error);
})

5.使用Promise.resolve缓存后台数据

当我们需要频繁的向服务器发送请求获取同一个数据的时候，我们可以将该数据设置为缓存来减小服务器的压力，这里我们使用Promise.resolve();

function query(name){
    //缓存对象
    let cache = query.cache || (query.cache = new Map())

    if(cache.has(name)){
        console.log("走缓存，直接获取数据")
        return Promise.resolve(cache.get(name));
    }
    return ajax(`http://localhost:8888/Myfile/user.php?name=${name}`)
        .then(value => {
            cache.set(name,value);
            console.log("没走缓存")
            return value;
        }) 
}

注意：这里我们将Ajax封装成了一个Promise对象，详情见126

6.使用Promise.all()和Promise.settled()批量处理数据

使用方式：

Promise.all()       //要求获得的Promise对象均为resolved或者rejected

Promise.settled()  //始终返回的是正确的，不会有失败的情况

Promise.race()     //哪个数据返回的快用哪个，只接收一个
Promise.race()    //可以处理后台请求超时，当请求时间超过2秒我们可以设置为超时


Promise.all([Promise1,Promise2]).then()

Promise.race([Promise1,Promise2]).then()

7.Promise队列原理

队列中的每个成员都必须是Promise

new Promise((resolve,reject) =>{
    resolve();
}).then(value => {
    return new Promise((resolve,reject) =>{
        reject()
    })
}).then(null,reason => {
    return new Promise((resolve,reject) =>{
        reject()
    })
})

8.使用Map实现Promise队列

9.使用reduce实现Promise队列

10.async和await语法糖

async是Promise,await是then

async function hd(){
    let name = await new Promise((resolve,reject)=>{
        resolve("后盾人");
    })
    let site = await new Promise((resolve,reject)=>{
        console.log(name + "houdunren.com");
    })
}
console.dir(hd())