promise使用及实现、async,await、generator函数（详解）

╰半夏微凉° 2022-12-24 00:39 134阅读 0赞

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

### 文章目录 ###

*  前言
 *  一、promise使用及实现、async,await、generator函数的概念
 *  二、使用
 *   *  1.Promise
     *  2.async,await
     *  generator函数
 *  总结

--------------------

# 前言 #

这节课给大家介绍一下promise使用及实现、async,await、generator函数（详解）,具体见下文

--------------------

提示：以下是本篇文章正文内容，下面案例可供参考

# 一、promise使用及实现、async,await、generator函数的概念 #

**Promise概念：**  
promise（首字母小写）对象指的是“Promise实例对象”

Promise首字母大写且单数形式，表示“Promise构造函数”

Promises首字母大写且复数形式，用于指代“Promises规范”

Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。

Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。

**async,await概念：**

async+await是es7提出来的概念，它也是为了解决回调地狱的问题，它只是一种语法糖，从本质上讲，await函数仍然是promise，

值得注意的是，async和await必须要一起使用。

用法：首先在 function 前面加 async 用来说明这个函数是一个异步函数

**generator函数的概念：**  
Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

Generator函数有多种理解角度。**从语法上**，首先可以把它理解成，Generator函数一个状态机，封装了多个内部状态。

执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。

**形式上**，Generator函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号，二是，函数体内部使用yield语句，定义不同的内部状态。(yield语句在英语里的意思就是“产出”)

# 二、使用 #

## 1.Promise ##

怎么回答mromise问题或者从哪几个方面回答？

0.promise写法上的体现  
1.什么是promise  
2.解决地狱回调  
3.可以链式调用  
4.有三种状态。  
5.promise有哪些API.  
6.应用场景：封装ajax,axios的get,post封装，微信小程序中封装wx.request()，uniapp开发中uni.request()

1.写法上=====================================================
    promise（首字母小写）对象指的是“Promise实例对象”
    
    Promise首字母大写且单数形式，表示“Promise构造函数”
    
    Promises首字母大写且复数形式，用于指代“Promises规范”
    2.是什么？=====================================================
    Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
    从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。
    Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。
    3.**不讲武德了啊，在这么写，我就去世了,简单说说吧**。。。。。。。。。。
    4.特点
      1）pending 初始状态
    
      2）fulfilled 成功状态
    
      3）rejected 失败状态
    5.api=====================================================
    then()方法
    
    then 方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。
    
    而 Promise 的优势就在于这个链式调用。我们可以在 then 方法中继续写 Promise 对象并返回，然后继续调用 then 来进行回调操作。
    
    可有两个参数，第一个是成功 resolve 调用的方法，第二个是失败 reject 调用的方法
    reject()方法：
    
    上面样例我们通过 resolve 方法把 Promise 的状态置为完成态（Resolved），这时 then 方法就能捕捉到变化，并执行“成功”情况的回调。
    而 reject 方法就是把 Promise 的状态置为已失败（Rejected），这时 then 方法执行“失败”情况的回调（then 方法的第二参数）
    catch()方法：
    
    它可以和 then 的第二个参数一样，用来指定 reject 的回调
    它的另一个作用是，当执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么也不会报错卡死 js，而是会进到这个 catch 方法中。
    all()方法：
    
    Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
    
    比如下面代码，两个个异步操作是并行执行的，等到它们都执行完后才会进到 then 里面。同时 all 会把所有异步操作的结果放进一个数组中传给 then。
    race()方法：
    race 按字面解释，就是赛跑的意思。race 的用法与 all 一样，只不过 all 是等所有异步操作都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。
    
    注意：其它没有执行完毕的异步操作仍然会继续执行，而不是停止。
    6.应用场景=====================================================
    传统回调模式
    promise模式
    Promise 写法

## 2.async,await ##

代码如下（示例）：速记吧，嘻嘻================================================

async/await:异步等待（优化promise）  
async函数返回一个promise对象  
1.async放函数前  
2.调用方法和普通函数一样  
3.阻塞式（async await会阻止代码往下执行）

//我们来详细说明一下async/await的作用。await操作符后面可以是任意值，当是Promise对象的时候，会暂停async function执行。也就是说，必须得等待await后面的Promise处理完成才能继续：
    
    
     function testAsy(x){ 
       return new Promise(resolve=>{ setTimeout(() => { 
           resolve(x);
         }, 3000)
        }
       )
    }
    async function testAwt(){     
      let result =  await testAsy('hello world');
      console.log(result);    // 3秒钟之后出现hello world
    }
    testAwt();

//阻塞式理解
    function testAsy(x){ 
       return new Promise(resolve=>{ setTimeout(() => { 
           resolve(x);
         }, 3000)
        }
       )
    }
    async function testAwt(){     
      let result =  await testAsy('hello world');
      console.log(result);    // 3秒钟之后出现hello world
      console.log('tangj')   // 3秒钟之后出现tangj
    }
    testAwt();
    console.log('tangSir')  //立即输出tangSir

## generator函数 ##

fGenerator 函数组成  
Generator 有两个区分于普通函数的部分：

一是在 function 后面，函数名之前有个 \* ；

函数内部有 yield 表达式。

其中 \* 用来表示函数为 Generator 函数，yield 用来定义函数内部的状态。

function* func(){ 
     console.log("one");
     yield '1';
     console.log("two");
     yield '2'; 
     console.log("three");
     return '3';
    }

**执行机制**  
调用 Generator 函数和调用普通函数一样，在函数名后面加上()即可，但是 Generator 函数不会像普通函数一样立即执行，而是返回一个指向内部状态对象的指针，所以要调用遍历器对象Iterator 的 next 方法，指针就会从函数头部或者上一次停下来的地方开始执行。

f.next();
    // one
    // {value: "1", done: false}
     
    f.next();
    // two
    // {value: "2", done: false}
     
    f.next();
    // three
    // {value: "3", done: true}
     
    f.next();
    // {value: undefined, done: true}

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

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

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

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

**函数返回的遍历器对象的方法  
next 方法**

一般情况下，next 方法不传入参数的时候，yield 表达式的返回值是 undefined 。当 next 传入参数的时候，该参数会作为上一步yield的返回值。

function* sendParameter(){ 
        console.log("start");
        var x = yield '2';
        console.log("one:" + x);
        var y = yield '3';
        console.log("two:" + y);
        console.log("total:" + (x + y));
    }

next不传参

除了使用 next ，还可以使用 for… of 循环遍历 Generator 函数生产的 Iterator 对象。

--------------------

**return 方法**

return 方法返回给定值，并结束遍历 Generator 函数。

return 方法提供参数时，返回该参数；不提供参数时，返回 undefined 。

yield\* 表达式

yield\* 表达式表示 yield 返回一个遍历器对象，用于在 Generator 函数内部，调用另一个 Generator 函数。  
Reflect.ownKeys() 返回对象所有的属性，不管属性是否可枚举，包括 Symbol。

jane 原生是**不具备 Iterator 接口**无法通过 for… of遍历。这边用了 Generator 函数加上了 Iterator 接口，所以就可以遍历 jane 对象了。

# 总结 #

本文简单的讲了一下promise和async wait 异步操作以及generator函数,具体详情内容请至官网解答，感谢阅读