前言

本文简单介绍了三种异步处理方式，整理了async await的底层原理实现，如果对答案有不一样见解的同学欢迎评论区补充讨论，当然有问题，也欢迎在评论区指出。

学习就是这么简单，你听懂了吗？

1、处理异步的方式

（1）回调函数

概念：被作为实参传入另一函数，并在该外部函数内被调用（有先后顺序），用以来完成某些任务的函数，称为回调函数。

缺点：容易出现回调地狱

（2）Promise

Promise 是异步编程的一种解决方案：

Promise是一个对象，它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。
Promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态) ；状态一旦改变，就不会再变。创造Promise实例后，它会立即执行，通过.then()或.catch()返回成功或失败结果。

（3）async、await

async 函数是 Generator 函数的语法糖。async await就等于Generator+自动执行器

async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。

2、async await

（1）async await基本使用

//promise实现将异步promise化，来处理异步
function request(value,delay){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(value)
        },delay)
    })
}

//串行化执行
async function run(){
    const test1 = await request('test1',2000);
    console.log(test1)
    const test2 = await request('test2',1000);
    console.log(test2)
    const test3 = await 'test3';
    console.log(test3)
}
run()
//2s后执行test1
//3s后执行test2 、test3

（2）async await底层原理实现

// generator生成器
function* fun() {
    yield request('test1',2000);
    yield request('test2',1000);
    yield 'test3'
}

// 1.。。。。。正常情况执行
let gen = fun();
Promise.resolve(gen.next().value).then(res=>{
    console.log(res)
    Promise.resolve(gen.next().value).then(res=>{
        console.log(res)
        Promise.resolve(gen.next().value).then(res=>{
            console.log(res)
        })
    })
})
//2s后执行test1
//3s后执行test2 、test3


async只是generator的语法糖。async 就等于**Generator+自动执行器**
// 2。。。。。。。自动执行器---递归实现
function run(gen){
    let res = gen.next();
    // console.log(res) //{ value: Promise { <pending> }, done: false }
    if(res.done) return;
    Promise.resolve(res.value).then(data=>{
        console.log(data)
        run(gen)
    })
}
run(fun())

总结

觉得写得好的，对你有帮助的，可以分享给身边人，知识越分享越多，千万不要吝啬呀

后续更新promise处理异步的方法使用以及底层原理实现，请关注我，整理好，分享给你们，我们一起学前端。

async await一种优雅的处理异步方式

前言