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

最新推荐文章于 2024-07-20 23:55:03 发布

Mark sheng

最新推荐文章于 2024-07-20 23:55:03 发布

阅读量1.1k

点赞数 2

分类专栏：前后端 javascript js高级文章标签： js javascript es6

本文链接：https://blog.csdn.net/qq_37430247/article/details/110143159

版权

前后端同时被 3 个专栏收录

37 篇文章 4 订阅

订阅专栏

javascript

35 篇文章 1 订阅

订阅专栏

js高级

22 篇文章 0 订阅

订阅专栏

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

文章目录

前言
一、promise使用及实现、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不传参

var sendp1 = sendParameter();
sendp1.next();
// start
// {value: "2", done: false}
sendp1.next();
// one:undefined
// {value: "3", done: false}
sendp1.next();
// two:undefined
// total:NaN
// {value: undefined, done: true}
next传参
var sendp2 = sendParameter();
sendp2.next(10);
// start
// {value: "2", done: false}
sendp2.next(20);
// one:20
// {value: "3", done: false}
sendp2.next(30);
// two:30
// total:50
// {value: undefined, done: true}