ES6的学习(下)

promise:异步操作同步化

同步 -- 串行 简单、方便
异步 -- 并行 性能高、体验好
promise的是为了解决回调地狱的问题
注意：要了解具体详细的内容，请点击这里

generator:生成器

generator与普通的函数有所不同的是它可以将函数分块执行，返回的是一个generator对象，通过next继续往下执行，其中，函数体里面的yeild可以作为分割函数执行的标识，有以下两个操作:
    (1)、yeild可以作为参数

function* show() {
    alert("aaa");
    let a = yield;
    alert("bbb"+a);
}
let gen = show();
gen.next();
gen.next("最近过得还好吗");
执行结果：先弹出aaa，再弹出bbb最近过得还好吗

    (2)、yeild可以作为返回值进行使用，类似与return

function* show() {
    alert("aaa");
    yield "哈哈";
    alert("bbb");
    return "函数执行完毕";
}
let gen = show();
let res1 = gen.next(); console.log(res1); //{value: "哈哈", done: false}
let res2 = gen.next(); console.log(res2); //{value: "函数执行完毕", done: true}

async/await

async和await也是一种将异步操作同步化的方式，是新的语法糖，使得代码更加简洁，逻辑更加清晰

//使用async和await处理异步逻辑，代码简洁，逻辑清晰
async function show(){
    let data1 = await $.ajax({url: "1.txt", dataType: "json"});
    let data2 = await $.ajax({url: "2.txt", dataType: "json"});
    let data3 = await $.ajax({url: "3.txt", dataType: "json"});
    console.log(data1,data2,data3);
}
show();

await可以用以接收peomise、generator等等

function sleep(sec){
    return new Promise(resolve => {
        setTimeout(()=>{
            resolve();
        },sec*1000)
    })
}
(async function(){
    alert("aaa");
    await sleep(1);
    alert("bbb");
    await sleep(1);
    alert("ccc");
})()
执行结果：先弹出aaa，隔1s弹出bbb，再隔1s弹出ccc

async/await的错误处理机制，直接使用try{}catch(e){}操作即可

async function show(){
    try{
        let data1 = await $.ajax({url: "1.txt", dataType: "json"});
        let data2 = await $.ajax({url: "2.txt", dataType: "json"});
        let data3 = await $.ajax({url: "3.txt", dataType: "json"});
        console.log(data1,data2,data3);
    }catch(e){
        console.log("请求数据失败了");
    }
}
show();