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

9 天前(已编辑)

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

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

一.异步编程 ==

1.Promise微任务处理机制

Promise会创建微任务列表,宏任务列表会优先让微任务列表进行处理 js 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(); ```js 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()批量处理数据

使用方式: ```js 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 js 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())

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...