三种解决异步回调的方法带你逃离回调地狱

柔光的暖阳◎ 2023-08-17 15:59 121阅读 0赞

### 回调地狱 ###

![在这里插入图片描述][20190927165900447.png]  
因为Javascript的异步特性，每个开发者都无法避免会碰到一些callback hell，同时在代码的迭代过程当中因为这样一些callback hell导致代码越来越不可维护。尤其是当回调过程中去参杂一些同步逻辑判断，那都是迭代过程中的代码杀手。

#### 基于ES6的promise ####

Promise有三种状态：pending/reslove/reject 。pending就是未决，resolve可以理解为成功，reject可以理解为拒绝。  
同时Promise常用的三种方法  
`then` 表示异步成功执行后的数据状态变为reslove ，  
`catch` 表示异步失败后执行的数据状态变为reject  
`all`表示把多个没有关系的Promise封装成一个Promise对象使用then返回一个数组数据。  
下面一起来看看如何使用Promise

封装为一个promise方法
    console.log(111);
        let promise = new Promise((resolve, reject) => {
            setTimeout(function () {
                console.log(222);
                resolve("hello word")
            },3000)
        })
        
    promise.then((data)=>{
    		console.log(333);
    		console.log(data);
    }).catch(()=>{
    console.log(444);
    })

输出结果为  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70]  
Promise 构造函数有两个变量 resolve 用于返回异步执行成功的函数 reject 用于返回异步执行失败的函数。配合then与catch一起使用

### Generator ###

如果过多的使用then 也会照成新的执行流程问题。  
ES6 新引入了 Generator 函数，可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案

function *g(){
        console.log('start');
        yield 1;
     console.log('middle');
        yield 2;
        console.log('end');
        return 3;
    }
    var g1 = g();
    console.log(g1.next()); 
    console.log(g1.next()); 
    console.log(g1.next()); 
    console.log(g1.next());

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 1]根据输出结果，我们看到，在函数g中，碰到yield关键词，运行的程序会停下来。只有调用 next()方法，才会继续执行函数g中的代码。所以函数g本身有暂停状态。

> 第一次调用 next 方法时，从 Generator 函数的头部开始执行，先是打印了 one ,执行到 yield 就停下来，并将yield 后边表达式的值 1，作为返回对象的 value 属性值，此时函数还没有执行完， 返回对象的 done 属性值是 false。

> 第二次调用 next 方法时，同上步 。

> 第三次调用 next 方法时，先是打印了 three ，然后执行了函数的返回操作，并将 return 后面的表达式的值，作为返回对象的 value 属性值3，此时函数已经结束，多以 done 属性值为true 。

> 第四次调用 next 方法时， 此时函数已经执行完了，所以返回 value 属性值是 undefined ，done 属性值是 true 。如果执行第三步时，没有 return 语句的话，就直接返回 \{value: undefined, done: true\}。

*  #### Generator与Koa ####

Koa是基于Node.js的Web应用框架。在Koa中，处理的异步程序主要是网络请求（HTTP）、文件读取和数据查询。这里面的异步场景较多，如果再加上程序分层，采用传统的callback方式，那回调多了去了。

这样写法对于程序维护及其不利，毫无便捷性可言。在有了generator后，我们便可以像上面那种方式来写程序。Koa最初的版本就是通过这种方式，让中间处理程序都转成一个个"yield"(中间件)。通过中间件的形式去处理客户端请求，让开发App应用更加灵活，不受框架自身限制。

在最新的Koa2中，已经抛弃了Genetator，转而使用async/await。

### async ###

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

async function helloAsync(){
    
        return "helloAsync";
      }
    console.log(helloAsync()) 
    
      // Promise {"helloAsync"}
      
    helloAsync().then(data=>{
    
       console.log(data); 
       
       // helloAsync        
    })

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。

结果为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 2]

[20190927165900447.png]: /images/20230810/9d534ed11eeb439dbf079bd3a7b064a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70]: /images/20230810/88e8ada0c9254822b2bb64b4b2bd5fa6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 1]: /images/20230810/502dbd290026412eb8bf3e32c90204f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70 2]: /images/20230810/0cca1701bd8841378520d1535c20b35d.png