ES6-异步处理专题

同步异步概念

同步方法会在主线程里面依次执行，异步方法会放在异步线程里面，异步方法会在同步方法执行之后在依次执行，需要延迟执行的就是异步方法如ajax，seTimeout和setIntval，下列代码打印出来的顺序就是。1，5，2，3，4

<script type="text/javascript">
    console.log( "1" );
    setTimeout(function() {
        console.log( "2" )
    }, 0 );
    setTimeout(function() {
        console.log( "3" )
    }, 0 );
    setTimeout(function() {
        console.log( "4" )
    }, 0 );
    console.log( "5" );
    // 1，5，2，3，4
</script>

回调地狱：函数作为参数层层嵌套，缺点不利于代码维护

Promise

es6中处理异步的对象，有3种状态pendding（未执行前的状态）、resolve（成功的状态）、reject（失败时的状态）

promise成功的函数会在.then()里面返回，错误会在.catch()方法里面返回。 then里的2种参数：onresolved,onjected;

    let p1 = new Promise((resolve,reject)=>{
        resolve("成功");
        // reject("错误");
    }).then(res=>{
        // return 111;
        return new Promise(resolve=>resolve("返还的值"))
    }).then(res=>{
        console.log(res)
    }).catch(err=>{
        console.log("catch",err);
    })

Promise基础方法

Promise.all([]) 把多个Promise方法放到一起执行，把每个Promise返回的成功值放到一个数组里面，使用all方法要注意所有promise对象要执行成功。

Promise.race([]) 与all方法类似，返回第一个 执行成功的Promise

Promise.finally([]) 不管Promise返回成功或者失败都是执行finally

  let p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("1111");
            // reject("失败")
        },2000)
    })
    let p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("222");
            // reject()
        },1000)
    })

    Promise.all([p1,p2]).then(res=>{
        console.log(res);
    })

    Promise.race([p1,p2]).then(res=>{
        console.log(res)
    })
    
    // finally
    p1.then(res=>{
        console.log(res);
    }).finally(()=>{
        console.log("执行了")
    })

async和await

ES7新出的语法，作用是用同步的写法去改写异步。基于promise去改造的

    const p1 = function myp1() {
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                resolve("p1");
                // reject("错误")
            }, 1000)
        })
    }

    const p2 = function myp2() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve("p2");
            }, 1000)
        })
    }
    
     async function asyncFn() {
        try {
            let res1 = await p1();
            console.log(res1);
            let res2 = await p2();
            console.log(res2);
        } catch (err) {
            console.log("??",err);
        }

    }
    asyncFn();