JS期约和异步

最新推荐文章于 2022-11-03 10:53:45 发布

报道先生归也

最新推荐文章于 2022-11-03 10:53:45 发布

阅读量428

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_54244773/article/details/124555995

版权

期约和异步函数

异步编程

1：异步执行的函数需要在更新x的值以后通知其他代码。 —》如果程序不需要这个值，那就只管继续执行，不必等待这个结果

2:早期的异步编程模式

在早期的JS中，只支持定义回调函数来表明异步操作完成

—串联多个异步操作是一个常见的问题，通常需要深度嵌套的回调函数(回调地狱)

术语：

消息队列

回调函数

调度异步操作

嵌套异步回调

异步返回值又依赖另一个异步返回值

—这种是较为老套的异步操作

原里为：

函数(A)封装一个可以调用回调函数的函数（比如setTimeout()）

A接收三个参数 (value, success,failure) 值，成功的回调函数的引用，失败的回调函数的引用

在setTimeout的回调函数里面

调用 success 或 failure

—这种缺点很明显:

在初始化的时候需要提前定义好 success 和 failure 在 setTimeout的回调函数里面的 “行为”–》也就是需要预先指定

—切记 success–》指向传递进来的函数—》调用success 等于调用外面的函数

— 根据传递的函数引用不同，再 setTimeout 的回调函数里面调用 success 会产生不同的行为

2：—而嵌套调用

就是在 success 或 failure 里面再调用 A(封装函数)

期约

1:期约状态机

1：期约是一个有状态的对象，一个实例化后的期约对象，可能处于以下三种状态之一

1：pending 待定

2: fulfilled/resolved 兑现/解决

3: rejected 拒绝
2：期约状态是私有的，不能通过js 检测到

待定

1:pending 是期约的最初始状态.

在这个状态下：期约可以转换

1：pending–>fulfilled

2: pending -->rejected

3: pending–>pending 保持待定状态

—期约的状态的落定是不可逆转的。

----期约的状态转化只可以从 pending 开始。

且每个期约可以转化 0 或 1 次

期约的作用

主要的两大用途

1：期约抽象地表示一个异步操作。

2：期约的状态表示期约(异步操作) 是否完成。

—期约封装的异步操作会实际生成某个值，程序在期约状态改变的时候，可以拿到这个异步操作生成的值

期约状态切换为兑现 --》就会有一个私有的内部值

期约状态切换为拒绝–》就会有一个私有的内部理由

--所以在调用 reject() 的时候不仅会切换状态，还会抛出一个错误–>这个错误后面可以接收处理

通过执行函数控制期约状态

1: 由于期约状态是"私有", 所以只能在内部操作–》影响这个 “状态”

2: 内部操作在 “期约的执行器函数” 中完成

promise.resolve()

1:期约并非一开始就必须处于待定状态，然后通过执行器函数才能转化为螺钉状态

2: 可以将任何值转化为一个期约

3: 这个解决期约的值对应着传给 promise.resolve() 的第一个参数, 多余参数自动忽略

4: promise.resolve（）是一个幂等方法

如果传入的参数是一个期约，那么它的行为就类似于一个空包装

5:—幂等性 --》会保留传进来的期约的状态

promise.reject()

1: 会实例化一个拒绝的期约并抛出一个异步的错误（这个错误不能通过try/catch捕获，只能通过拒绝程序捕获）

----因为 try catch 是同步处理，拒绝的期约抛出的错误需要异步模式捕获

2: 没有幂等性，如果给它传入一个期约对象，这个期约会成为它返回的拒绝期约的理由

问题: promise.resolve() 和 promise.reject() 的作用是什么? 为什么要让期约状态直接落定?

  将值包装为一个期约，这个 值为  期约的值,
  然后在 .then 里面使用这个期约的值？
  
  答案:
  相当于  为什么使用true或者false的时候直接打字，而不是new Boolean(true)
  new Promise()时候会初始化，相当于前置任务，根据前置任务完成情况选择处理方式
  promise.resovle() 一般 是 结合着  new promise(执行器函数) 使用的
  例子1：如果，是一种只想顺序执行，借用.then链的简单异步，就可以用promise.resovle().then.then..来执行
  例子2：如果是发起请求，就得考虑失败处理  必须得 new promise
  也就是 直接获得一个 promise的实例，对这个实例 使用.then链式调用 进行简单的异步
  原话： “直接Promise.resolve，我就没用过”

期约的异步特性

期约是同步对象（在同步执行模式中使用)，但期约也是异步执行模式的 “媒介”

1: 拒绝期约抛出的错误没有抛到同步执行代码的线程里，而是通过浏览器异步消息队列来处理的

因此： try/catch 块不能捕获该异步错误 —》毕竟 try/catch 存在于同步线程，处理同步代码（同步错误）

—重点：

代码一旦开始以异步模式执行，则唯一与之交互的方式就是使用异步结构

----------也就是：使用期约的方法 --》处理异步代码！

—所以综上： promise.reject() 返回的异步错误，只能用期约的处理程序处理

期约的实例方法

定义：期约实例的方法是连接外部同步代码和内部异步代码之间的桥梁

这些方法：可以访问异步操作返回的数据，处理期约成功和失败的结果，

可以连续对期约求值，添加只有期约进入终止状态时才会执行的代码

1：Thenable接口

在ECMAScript 暴露的异步结构中，任何对象都有一个 then() 方法。 --》这个方法实现了 Thenable接口

注意: Thenable接口不是 Promise专属的。 Promise类型实现了thenable接口

1:promise.prototype.then()

1：promise.prototype.then() 是为期约实例添加处理程序的主要方法

2：then() 的参数情况

1：传给then() 任何非函数类型的参数都会被静默忽略

2：如果指向提供onRejected参数，那么最好在 onResolved 参数的位置上传入 undefined --这样有助于避免在内存中创建多余对象

3:then() 返回值 --一个新的期约实例

1:基于onResolvedc处理程序

这个实例基于onResolved 处理程序的返回值构建。 —》该处理程序的返回值会通过 Promise.resolve() 包装来生成新期约

2: 如果没有提供 onResolved这个处理程序则Promise.resolve() 就会包装上一个期约解决之后的值

—详细：就是如果期约调用then() 的时候不传处理程序：则： let p2 = p1.then() === let p2 = promise.resove(p1的期约的值) -->原样向后传递

3: 如果onResolved（）这个处理程序中没有显示的返回语句，则 Promise.resolve() 会包装默认的返回值 undefined

4: 在处理程序中抛出异常就会返回一个拒绝的期约

1：throw 抛出异常 —》throw抛出之后如果没有catch接住，后面的代码就会跳过

切记：此处是异步抛出异常 --》不可能用catch接住，只能用 onResoved 或.catch 处理异步异常

2: 返回错误值

– return Error(“bar”)

不会触发拒绝行为，而是返回一个基于该错误包装的 “解决”的期约中

—也就是返回的是一个状态为 “解决的期约” 而非 throw异常抛出返回的 “拒绝的期约”

2: 基于onRejected处理程序

onRejected 在捕获错误之后一般是返回一个解决的期约

-----这个处理程序返回期约的规则和 onResolved 几乎差不多

只不过这个处理程序用来处理 “拒绝”的期约 ----》切记：抛出错误会返回一个 “拒绝“的期约、

onResolved 用来处理 "解决"的期约

promise.prototype.catch()

1: 这个方法用于给期约添加拒绝处理程序 ----这个方法只接受一个参数 onRejected 处理程序

这个方法相当于—语法糖: 调用它相当于调用 Promise.prototype.then(null,onRejected)

—所以目前如果期约抛出错误，有两个方法处理

1：onRejected 处理程序处理错误

2:Promise.catch(onRejected) 方法处理错误 -->接收onRejected作为参数

传递解决值和拒绝理由

1：状态落定后, 期约会提供其解决值（或兑现）或其拒绝理由给相关状态的处理程序

2：拿到返回值后，就可以对期约提供的值/拒绝理由进行操作

期约提供的值 -->在 resolve(A) rejected(B) --> 这两个返回 —》onResolve 和 onReject 这两个处理程序

—这个值也叫：期约的值 Promise < 状态 >: 值

4：Promise.prototype.finally()

1:给期约添加onFinally处理程序 --》在期约转换为解决或拒绝状态时都会执行

—可以避免 onResolved 和 onRejected 处理程序中出现冗余状态

—onFinally 无法知道期约的状态是解决还是拒绝

--所以主要用于添加清理代码

2:返回一个新的期约

3：与状态无关的方法

大多数情况下它将表现为父期约的传递

—finally 可以和 new Promsie() 一起使用，当状态转化之后触发 finally

5：非重入期约方法

1：当期约进入落定状态时，与该状态相关的处理程序仅仅会被排期，而非立即执行

2：跟在添加这个处理程序的代码之后的同步代码一定会在处理程序之前先执行

–1：在解决期约上调用then() 会把 onResolved 处理程序推进消息队列

但这个处理程序在当前线程上的同步代码执行完成前不会执行 —因此跟在then() 后面的同步代码一定先于处理程序执行

–2：即使期约状态变化发生在添加处理程序之后，处理程序也会等到运行的消息队列让它出列是才会执行

期约连锁与期约合成

1 :期约连锁

--把期约逐个地串联起来

—每个期约实例的方法都会返回一个新的期约对象，而这个新期约又有自己的实例方法。这样连缀方法调用就可以构成所谓的 “期约连锁”

1：相对同步任务 —> 返回期约的时候期约状态的落定是“同步”代码 (then() 处理程序里面的代码都是异步微任务！所以“相对”)

2：串行化异步任务 --》返回期约的时候 then()里面的异步代码决定返回期约的状态 --》期约状态落定才能触发下一个 .then() 任务

1：一个期约可以有任意多个处理程序

2：所以期约连锁可以构建有向非循环图的结构

2: 期约合成

Promise.all() 和 Promise.race() 方法

-----Promise类提供的将多个期约实例组合成一个期约的静态方法

—合成后期约的行为取决于内部期约的行为

1:promise.all()

promise.all() 静态方法创建的期约会在一组期约全部解决之后再解决。

这个静态方法接收一个可迭代对象，返回一个新期约

1:课迭代对象中的元素会通过Promise.resolve() 转换为期约

2: 合成的期约只会在每个包含的期约都解决之后才解决

3：有一个包含的期约待定，则合成的期约也会待定

4：有一个包含的期约拒绝，则合成的期约也会拒绝

5：如果合成的期约解决，则其解决值就是包含期约解决值的数组

6：如果合成的期约拒绝，则第一个拒绝的期约的拒绝理由会作为合成期约的拒绝理由。之后的…不会再影响最终期约的拒绝理由

2:Promise.race()

1：返回一个包装期约，是一组集合中最先解决或拒绝的期约的镜像。

2：接收一个课迭代对象，返回一个新期约

3: 第一个状态落定的期约，就会包装其解决值或拒绝理由返回相应的新期约（解决/拒绝）

异步函数

特性：

用async关键字声明异步函数 --》可以用在：函数声明，函数表达式，箭头函数和方法上

1：异步函数始终返回期约对象。 —》利用Promise.resolve() 包装函数 return 的返回值

2: 异步函数具有异步特征，但是仍然具有 js函数的正常行为

在没有 await 关键字之前，代码仍然是同步

3：在异步函数中抛出错误会返回拒绝的期约

拒绝期约的错误不会被异步函数捕获

2：await关键字

使用await 关键字可以暂停异步函数代码的执行，等待期约解决

—期约解决 --》得到期约的解决的值

概念：

解包 — 尝试“解包”对象的值

await关键字尝试 “解包”对象的值，然后将这个值传给表达式，再异步恢复异步函数的执行

1: await 后面跟的对象

await期待一个实现 thenable接口的对象 -------注意：实现thenable接口的对象不一定是 promsie

1:实现thenable 接口的对象被await"解包" ----》也就是有 then() 这个方法的对象， —疑惑：什么是解包

2: 未实现，则把这个值当作已经解决的期约 —》（获取这个已经解决的期约的值

2: await 等待会抛出错误的同步操作，会返回拒绝的期约

3: await + 拒绝期约可以被异步函数捕获

例如：

async function foo(){

await Promise.reject(3);

}

foo().catch((x)=>{

console.log(x);

})

-----这样异步函数foo 会返回一个拒绝的期约然后可以利用 .catch() 异步函数捕获错误的方法处理报错

3:await的限制

1：await关键字必须在异步函数中使用 await和async是一对的

2: 异步函数的特质不会扩展到嵌套函数‘

以对 async await 只会影响一层函数

4：停止和回复执行函数

1：js运行时在碰到await关键字时候，会记录在哪里暂停执行

等到 await 右侧的值可用 ----》什么叫“可用” （不立即可用的值例如期约的值）

js运行时会向消息队列中推送一个任务，这个任务会恢复异步函数的值

– 因此：就算 await 后面跟着一个立即可用的值（例如常数）, 函数的其余部分也会被异步求值

–总结： await后面的代码会被异步执行！

新版本：

promise.resolve() 只会生成一个异步任务

await暂停恢复的方法如下:

1:await 将右边的异步任务推入消息队列，等待得到其值

2：得到右侧的值之后，开始执行await 后面的代码（以异步形式）—也就是 await 后面的代码也是推入到消息队列中

简单理解：

await 右侧的对象：会被同步执行（比如promise执行器函数），但是会异步取得其值

await 取得右侧的值之后， await之后的代码都是异步执行

----多个异步函数，多个await之间

遵循同步 --》微任务-》宏任务

消息队列（异步任务队列 --》先被扫描到的异步任务会先进入这个队列，被先执行）

（异步任务执行的时候可能会产生新的异步任务）

总结: 异步

1：异步：

定时器

promise.resolve() 取得期约的值

.then() 等期约的方法里面的处理程序

async修饰的函数 await右侧标志的取得了其“值” 和await后面的代码

----目前来说：异步就是这些东西

—期约的核心：

个人觉得：将“任务“ 转为异步任务 —》不阻塞JS主线程

监听任务的返回值-- 正确返回 /错误返回

都有对应的处理程序接应

为期约标记状态，状态对应着里面代码的执行情况

--更富有语义化

构成一套异步操作，比如：一连串的异步任务队列

等待上一个异步任务完成，才执行下一个异步任务…

总结：利用Promise 来实现JS异步操作

—await

1：一般搭配 promise来使用

2：await 后面的代码要等到 promise这个异步任务的值落定之后才会执行

—这其实也是一种合理的异步操作

你想：你要想进行await后面的代码，你是不是应该先接收到某个值？因为这个值是 promise提供的（异步）

所以 await 后面的代码理应也是异步执行的

不然 …就阻塞了主线程了！

报道先生归也

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS期约和异步

期约和异步函数异步编程1：异步执行的函数需要在更新x的值以后通知其他代码。 —》如果程序不需要这个值，那就只管继续执行，不必等待这个结果2:早期的异步编程模式在早期的JS中，只支持定义回调函数来表明异步操作完成 —串联多个异步操作是一个常见的问题，通常需要深度嵌套的回调函数(回调地狱)术语：消息队列回调函数调度异步操作嵌套异步回调异步返回值又依赖另一个异步返回值—这种是较为老套的异步操作
复制链接

扫一扫