ES6知识总结------第4篇（promise、generator函数、async）

学习前端的渣渣

已于 2022-07-28 00:22:56 修改

阅读量258

点赞数 1

分类专栏： # es6 文章标签： es6 javascript 前端

于 2022-07-10 22:01:59 首次发布

本文链接：https://blog.csdn.net/fangqi20170515/article/details/125710799

版权

es6 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细介绍了ES6中的Promise、Generator和Async/Await的使用，通过实例解析它们如何解决异步编程问题，包括Promise的状态转换、Generator的暂停与传递参数、Async/Await的简洁语法，以及在处理多个并发请求时的应用。同时，展示了如何利用这些特性解决回调地狱，实现优雅的数据渲染和请求管理。

摘要由CSDN通过智能技术生成

一、promise

promise就是为了解决异步请求

promise是一个对象，是一个容器，装的就是异步的操作(未来才会产生的事情)

let p1 = new Promise((resolve, reject) => {
        //resolve异 步操作成功时需要执行的
        //reject异步操作失败时需要执行的
        if (true) {
            resolve('成功')
        } else {
            reject('失败')
        }
    });
    p1.then((res) => {
        //成功时需要执行的
        console.log(res);
    }), (err) => {
        //失败是需要执行的
        console.log(err)
    }

整个promise对象是有三种状态

pending 等待
resolved 成功后
rejected 失败后

promise的特点:

状态不受外界的影响，
状态的变化只有两种可能
pending–resolved
pending–rejected

all的特点必须，所有异步操作全部执行完毕，才会执行then

then可以一直往下走可以多个

catch错误执行的代码只能有一个

代码示例1： 解决回调地狱

    $.ajax({
        url:'a.txt',
    }).then((res)=>{
        return $.ajax({
            url:'b.txt',
            data:{
                a:res
            }
        })
    }).then(res=>{
        return $.ajax({
            url:'c.txt',
            data:{
                b:res
            }
        })
    }).then(res=>{
        console.log(res);
    })

代码示例2：发送请求成功后统一渲染数据

let p1 = new Promise((resolve, reject) => {
        $.ajax({
            url: 'a.txt',
            success(res) {
                resolve(res);
            }
        })
    });
    let p2 = new Promise((resolve, reject) => {
        $.ajax({
            url: 'b.txt',
            success(res) {
                resolve(res);
            }
        })
    });
    let p3 = new Promise((resolve, reject) => {
        $.ajax({
            url: 'c.txt',
            success(res) {
                resolve(res);
            }
        })
    })
    Promise.all([p1, p2, p3]).then(res => {
        console.log(res);
    })

//简写（通过jquery发起的ajax返回的本来就是Promise对象）

let p1 = $.ajax({url: 'a.txt'});
    let p2 = $.ajax({url: 'b.txt'});
    let p3 = $.ajax({url: 'c.txt'});
    Promise.all([p1, p2, p3]).then(res => {
        console.log(res);
    })

在这里插入图片描述

二、generator函数

generator也是函数，普通函数一路到底，中间不会停，generator可以暂停

function *函数名(){

}

1、yield

作用
1、暂停

分成n断需要n-1和yield，需要n个next

function* show() {
        alert(1);
        yield; //暂停
        alert(2);
    }
    let obj = show();
    obj.next();
    //暂停后需要继续继续的话就需要再写一个 obj.next();

2、能传中间参数

第一个next不能传参

function* show(a) {
    alert(a);
    let b=yield; //接收参数
    alert(b);
}
let obj = show(1);
obj.next();
obj.next(9);

3、能返回中间结果

function* show(a) {
    alert(a);
    let b=yield "aaaaaa"; //返回中间结果
    alert(b);
    let c=yield "cccccc";
    alert(c)
    return '完成'
}
let obj = show(1);
console.log(obj.next());//{value: 'aaaaaa', done: false}
console.log(obj.next(6666));//{value: 'cccccc', done: false}
console.log(obj.next());//{value: undefined, done: true}

三、async

async是Generator函数的语法糖。

async function 函数名0) {
Let a1 = await操作;
Let a2 = await操作;
return stockPrice ;
}

async function get(){
        let a=await $.ajax({url:'a.txt'})
        let b=await $.ajax({url:'b.txt',data:{a}})
        /*console.log(a);
        console.log(b);*/
        return await $.ajax({url:'c.txt',data:{b}})//返回的是一个promise对象
    }

    get().then(res=>{
        console.log(res);//这是一个ccccccccc文件
    });