当前位置: 首页 > news >正文

js的Promise

目录

  • 异步任务
    • 回调地域
    • Promise
  • Promise的三种状态
    • resolve传入值
  • Promise的实例方法
    • then
      • then的返回值
      • 返回Promise的状态
    • catch
      • catch的返回值
    • finally
  • Promise的类方法
    • resolve
    • reject
    • all
    • allSettled
    • race
    • any

异步任务

js中,有些任务并不是立即执行的,如setTimeOut或者发送网络请求等等
这些任务或多或少的延时,而这些延时都可能会导致js代码实际的执行顺序和我们预计的不一样
有些时候我们也会需要这些任务完成后的返回值来进行进一步的操作
如下面代码所示

function ajax(url) {setTimeout(function () {if (url == "http://yes") {return true} else {return false}}, 1000)
}
var data = ajax("http://yes")console.log(data)

这段代码中我们模拟了一个网络请求,希望data能接受到服务器返回的结果,可打印的结果却是undefined
结果

回调地域

为了保证代码的执行顺序,也为了保证我们能拿到需要的返回值,解决以上问题的方法就是使用回调函数
我们将以上的代码改写一下

function ajax(url, success, fail) {setTimeout(function () {if (url == "http://yes") {success("请求成功")} else {fail("请求失败")}}, 1000)
}
ajax("http://yes", function (res) {console.log(res)}, function (err) {console.log(err)
})

结果

结果
我们会在1秒之后拿到结果

现在,我们的需求变成了需要监听页面中的一个按钮,当用户点击了这个按钮的1秒后发送网络请求
代码就变成了下面这样

function ajax(url, success, fail) {setTimeout(function () {if (url == "http://yes") {success("请求成功")} else {fail("请求失败")}}, 1000)
}
document.querySelector("button").addEventListener("click", function () {setTimeout(function () {ajax("http://yes", function (res) {console.log(res)}, function (err) {console.log(err)})}, 1000)
})

这种回调函数嵌套回调函数的做法被称之为回调地域,为了能保证任务的执行顺序,以上代码都是通过硬编码的形式解决
我们将setTimeOut硬编码到click中,再将ajax硬编码到setTimeOut中,以此类推
这种硬编码所带来的无法复用以及难以处理每个步骤中发生的异常情况的问题是回调地域真正问题所在

Promise

ES6之后规定了一种新的编程范式Promise,它可以很轻松的解决以上问题
通过new创建Promise对象时,我们需要传入一个回调函数,这个回调函数被称之为executor
这个回调函数会立即执行,并且在传入2个回调函数resolvereject
当调用resolve方法时会调用Promise对象的then方法传入的回调函数
当调用reject方法时就会调用Promise对象的catch方法传入的回调函数

Promise的三种状态

var promise = new Promise((resolve, reject) => {resolve("success")reject("fail")
})
promise.then((res) => {console.log(res)
}).catch((err) => {console.log(err)
}) 

Promise的使用过程中会出现三种状态

  1. fulfilled
    也叫做兑现状态,位于这种状态时表示Promise中的操作成功完成,即调用了resolve方法
  2. rejected
    也被叫做拒绝状态,位于这种状态时表示Promise中的操作失败,即调用了reject方法
  3. pending
    也被叫做初始状态,这种状态意味着此时Promise既没有兑现也没有拒绝,当Promise没有调用resolvereject方法时Promise位于这种状态
    值得注意的是Promise可以从pending状态变成fulfilledrejected状态
    Promise无法从fulfilled/rejected变为pendingrejected/fulfilled状态
    这意味着如果我们在Promise中同时调用了resolvereject方法,那么只会执行最先调用的那个方法
    剩下的方法并不是无法执行,而是状态被锁死无法改变
    如上面的代码所示,控制台结果如下

结果

resolve传入值

  1. 传入一个普通对象或一个普通值
    这个值将会作为then方法的回调函数的参数,并且也会将这个Promise的状态置为fulfilled
  2. 传入一个Promise
    这个新的Promise的状态将会决定原来Promise的状态
  3. 传入一个对象,对象中有then方法
    也叫做thenable对象,执行这个then方法,并根据then方法的结果来决定Promise的状态

Promise的实例方法

Promise实例方法具体有以下三个

then

then方法接收两个参数,一个是成功的回调函数,一个是失败的回调函数

var promise = new Promise((resolve, reject) => {resolve("success")reject("fail")
})
promise.then((res) => {console.log(res)
}, (err) => {console.log(err)
})

这种写法等价于上面演示的写法

一个Promisethen方法可以多次调用

var promise = new Promise((resolve, reject) => {resolve("success")
})
promise.then((res) => {console.log("res1", res)
})
promise.then((res) => {console.log("res2", res)
})

结果如下
结果

then的返回值

then方法也具有返回值,他会返回一个Promise
因为返回的是一个Promise所以能进行链式调用
而如果想要继续调用接下来的then方法就需要在这个Promise中调用resolve方法
resolve方法可以传入参数,这里的参数就是最开始的then方法的回调函数的返回值

有以下三种情况

  1. 回调函数返回一个普通值

    var promise = new Promise((resolve, reject) => {resolve("success")
    })
    promise.then((res) => {console.log(res)return "aaa"
    }).then((res) => {console.log(res)
    })
    

    相当于then方法返回一个PromisePromise调用了resolve方法,resolve方法将aaa作为参数传递给了下一个then方法
    控制台结果如下
    结果

  2. 回调函数返回一个Promise

    var promise = new Promise((resolve, reject) => {resolve("success")
    })
    promise.then((res) => {console.log(res)return new Promise((resolve, reject) => {resolve("aaa")})
    }).then((res) => {console.log(res)
    })
    

    如果返回的是一个Promise的会先等新的Promise调用resolve之后将resolve的结果传递给下一个then
    控制台结果同上

  3. 回调函数返回一个含有then方法的对象

    var promise = new Promise((resolve, reject) => {resolve("success")
    })
    promise.then((res) => {console.log(res)return {then: function (resolve) {resolve("aaa")}}
    }).then((res) => {console.log(res)
    })
    

    如果返回的是一个thenable对象的话会等resolve之后将对应的值返回给下一个then
    控制台结果同上

返回Promise的状态

在运行then中的回调函数Promise的状态为pending
在回调函数返回一个结果Promise的状态为fulfilled
then方法抛出一个异常Promise的状态为rejected

catch

catch方法和then方法一样可以多次调用

var promise = new Promise((resolve, reject) => {reject("error")
})
promise.catch((res) => {console.log("res1", res)
})
promise.catch((res) => {console.log("res2", res)
})

控制台结果如下
结果

catch的返回值

catch方法也会返回一个Promise,所以我们也能在catch后面链式调用thencatch
值得注意的是,catch的回调执行完后返回的Promise默认状态为fulfilled
即会在catch调用完后在接下来的链式调用中跳过catch调用then
如果想要调用接下来的catch则需要抛出一个异常

var promise = new Promise((resolve, reject) => {reject("error")
})
promise.catch((res) => {console.log("res1", res)throw new Error("error")
}).catch((res) => {console.log("res2", res)return "success"
}).catch((res) => {console.log("res3", res)return "error"
}).then((res) => {console.log("res4", res)
})

控制台结果如下
结果

finally

finally是在ES9中新增的一个方法
表示无论Promise对象无论变成fulfilled还是rejected状态,最终都会执行的代码
finally方法不接收参数

var promise = new Promise((resolve, reject) => {resolve("success")
})
promise.catch((res) => {console.log("res1", res)
}).then((res) => {console.log("res2", res)
}).finally(() => {console.log("res3")
})

控制台结果如下
结果

Promise的类方法

Promise除了有实例方法之外还有类方法

resolve

resolve方法会将一个现成的内容转换成Promise来使用

var promise = Promise.resolve("success")
promise.then((res)=>{console.log(res)
})

相当于

var promise = new Promise((resolve, reject) => {resolve("success")
})
promise.then((res) => {console.log(res)
})

控制台结果如下
结果

reject

resolve类似,只不过会调用reject方法

var promise = Promise.reject("error")
promise.catch((res) => {console.log(res)
})

相当于

var promise = new Promise((resolve, reject) => {reject("error")
})
promise.catch((res) => {console.log(res)
})

控制台结果如下
结果

all

all方法会将多个Promise包裹成一个新的Promise新的Promise状态由包裹的所有Promise决定
当包裹的所有Promise的状态都为fulfilled时,新Promise的状态为fulfilled,并且会将包裹的所有Promise的返回值组成一个数组返回
如果包裹的Promise中有一个状态为reject时,新Promise状态为reject,并且会将第一个reject返回值返回

var p1 = new Promise((resolve, reject) => {resolve("p1 success")
})
var p2 = new Promise((resolve, reject) => {resolve("p2 success")
})
var p3 = new Promise((resolve, reject) => {reject("p3 error")
})
var p4 = Promise.all([p1, p2])
p4.then((res) => {console.log(res)
})
var p5 = Promise.all([p2, p3])
p5.catch((res) => {console.log(res)
})

控制台结果如下
结果

allSettled

allSettled方法和all方法类似,但不同的是allSettted方法会等待所有Promise有结果后才会有最终的状态,并且最终的状态一定为fulfilled

var p1 = new Promise((resolve, reject) => {resolve("p1 success")
})
var p2 = new Promise((resolve, reject) => {resolve("p2 success")
})
var p3 = new Promise((resolve, reject) => {reject("p3 error")
})
var p4 = Promise.allSettled([p1, p2, p3])
p4.then((res) => {console.log(res)
})

控制台结果如下
结果
其中statusPromise的状态,value为这个Promise的返回值

race

race同样将多个Promise组合成一个新Promise
在这些Promise如果有一个结果新Promise的状态就由这个有结果的Promise决定

var p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve("p1 success")}, 2000);
})
var p2 = new Promise((resolve, reject) => {setTimeout(() => {resolve("p2 success")}, 3000);
})
var p3 = new Promise((resolve, reject) => {setTimeout(() => {reject("p3 error")}, 100);
})
var p4 = Promise.race([p1, p2, p3])
p4.then((res) => {console.log(res)
}).catch((res) => {console.log(res)
})

控制台结果如下
结果

any

race方法相似,不同的地方在于any方法会一直等到第一个fulfilled状态Promise出现再来决定新Promise的状态
如果所有的Promise均为reject就会报一个AggregateError的错误

var p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve("p1 success")}, 2000);
})
var p2 = new Promise((resolve, reject) => {setTimeout(() => {resolve("p2 success")}, 3000);
})
var p3 = new Promise((resolve, reject) => {setTimeout(() => {reject("p3 error")}, 100);
})
var p4 = Promise.any([p1, p2, p3])
p4.then((res) => {console.log(res)
})
var p5 = Promise.any([p3])
p5.catch((res) => {console.log(res)
})

控制台结果如下
在这里插入图片描述

相关文章:

js的Promise

目录 异步任务回调地域Promise Promise的三种状态resolve传入值 Promise的实例方法thenthen的返回值返回Promise的状态 catchcatch的返回值 finally Promise的类方法resolverejectallallSettledraceany 异步任务 在js中,有些任务并不是立即执行的,如set…...

2.4g无线芯片G350规格书详细介绍

G350是一款高度集成的2.4GHz无线收发芯片,旨在为各种应用提供低成本、高性能的无线通信解决方案。该芯片通过降低功耗,在保持寄存器值条件下,实现最低电流为5μA,从而显著提高了电池寿命。它内置了发射接收FIFO寄存器,…...

React中使用mobx管理状态数据使用样例

MobX 是一个身经百战的库,它通过运用透明的函数式响应编程(Transparent Functional Reactive Programming,TFRP)使状态管理变得简单和可扩展。官网地址:关于 MobX | MobX中文文档 | MobX中文网 安装依赖 mobx-react-…...

《HeadFirst设计模式(第二版)》第五章代码——单例模式

代码文件目录: 初始版本: package Chapter5_SingletonPattern.origin;/*** Author 竹心* Date 2023/8/5**/public class Singleton {private static Singleton uniqueInstance;private Singleton(){}public static Singleton getInstance(){if(uniqueIn…...

Linux: network: tools: tcpdump,抓取vlan包需要注意的事情;不然会出现LLC协议

https://bugzilla.redhat.com/show_bug.cgi?id498981#c4 https://serverfault.com/questions/544651/vlan-tags-not-shown-in-packet-capture-linux-via-tcpdump 如果不加-e参数,抓取不到 vlan信息,会导致wireshark解析出现问题。因为,抓到…...

大数据离线阶段01:Apache Zookeeper

1.Zookeeper基本知识 ZooKeeper概述 Zookeeper是一个分布式协调服务的开源框架。主要用来解决分布式集群中应用系统的一致性问题。 ZooKeeper本质上是一个分布式的小文件存储系统。提供基于类似于文件系统的目录树方式的数据存储,并且可以对树中的节点进行有效管理…...

数字孪生轨道交通,地铁视频孪生三维可视化管控平台

为促进数字孪生城市领域高质量发展,延续《数字孪生城市应用案例汇编(2022年)》已有研究成果,宣传推广一批创新性强、具有示范效应的优秀案例,为各部委及地方政府推动数字孪生城市建设提供有力支撑,中国信息…...

自定义注解(Annontation)

目录 1.注解定义 2.元注解定义 3. 自定义注解(自定义的注解名称相同的会覆盖原注解) 4.Annotation架构(元注解参数介绍) 1.注解定义 注解是用来将任何的信息或元数据(metadata)与程序元素(类…...

基于粒子群改进BP神经网络的血压评估系统,血压预警系统,pso-bp神经网络

目录 摘要 BP神经网络的原理 BP神经网络的定义 BP神经网络的基本结构 BP神经网络的神经元 BP神经网络的激活函数, BP神经网络的传递函数 粒子群算法的原理及步骤 基于粒子群算法改进优化BP神经网络的血压评估系统 matlab代码 代写下载链接:https://download.csdn.net/downlo…...

Vue中引入外部css导致的全局污染

问题 当在前端使用vue开发时,给特定页面做好了css并且通过import去导入到当前页面;在编译运行之后发现其他页面也受到影响更改了样式,即“全局污染”。 污染方式 单组件污染 单个组件样式,影响到了其他的组件的样式。 单个组件…...

【安装部署】Mysql下载及其安装的详细步骤

1.下载压缩包 官网地址:www.mysql.com 2.环境配置 1.先解压压缩包 2.配置环境变量 添加环境变量:我的电脑--->属性-->高级-->环境变量-->系统变量-->path 3.在mysql安装目录下新建my.ini文件并,编辑my.ini文件 编辑内容如…...

如何循环执行windows和linux上的控制台指令

Linux linux以centos为例做介绍 将以下脚本复制到并命名为repeat.sh #!/bin/bash cmd$1#使用列表for循环 执行1000次相关指令 for variable in seq 1 1000 doecho "execute $variable times "echo $cmd$cmd done 执行指令 ps -ef,执行1000次 sh repeat.sh ps -…...

【Shell】基础语法(三)

文章目录 一、Shell基础语法1. 位置参数和特殊变量2. 输入输出3. 管道4. 文件重定向5. 函数6. 脚本调试方法 二、Shell高级和正则表达式1. sort命令2. uniq命令3. wc命令4. grep命令5. find命令6. xargs7. sed命令8. crontab 一、Shell基础语法 1. 位置参数和特殊变量 $0 …...

linux 服务开机自启

服务开机自启 Centos有两种方式,一是修改/etc/rc.local文件,二是使用chkconfig来管理开机自启(chkconfig无法自启动源码包) # /etc/init.d/目录下必须有启动脚本ls /etc/init.d/httpd# 添加服务,以便让chkconfig指令管理它,开机启…...

【LeetCode】870 . 优势洗牌

870 . 优势洗牌 方法:贪心 思路 这道题的思想类似于 “田忌赛马” ,把 nums1 当成是田忌的马,nums2 当成是齐威王的马。 讨论田忌的下等马(nums1 的最小值): 如果它能比过齐威王的下等马(nums…...

现代C++中的从头开始深度学习【2/8】:张量编程

一、说明 初学者文本:此文本需要入门级编程背景和对机器学习的基本了解。张量是在深度学习算法中表示数据的主要方式。它们广泛用于在算法执行期间实现输入、输出、参数和内部状态。 在这个故事中,我们将学习如何使用特征张量 API 来开发我们的C算法。具…...

uniapp软键盘谈起遮住输入框和头部被顶起的问题解决

推荐: pages.json中配置如下可解决头部被顶起和表单被遮住的问题。 { "path": "pages/debug/protocol/tagWord", "style": { "app-plus": { "soft…...

安防监控视频汇聚EasyCVR平台的FLV视频流在VLC中无法播放的原因排查

众所周知,TSINGSEE青犀视频汇聚平台EasyCVR可支持多协议方式接入,包括主流标准协议国标GB28181、RTSP/Onvif、RTMP等,以及厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。在视频流的处理与分发上,视频监控…...

虹科新闻 | 虹科与Power-MI正式建立合作伙伴关系

近日,虹科与Power-MI正式建立合作伙伴关系,双方就工业预测性维护领域进行深入的交流与合作,未来将共同致力于为亚洲市场提供完整的、更高质量的预测性维护解决方案,解决亚洲客户的工业自动化挑战。 虹科与Power-MI都表示十分期待…...

Xamarin.Android实现加载中的效果

目录 1、说明2、代码如下2.1 图1的代码2.1.1、创建一个Activity或者Fragment,如下:2.1.2、创建Layout2.1.3、如何使用 2.2 图2的代码 4、其他补充4.1 C#与Java中的匿名类4.2 、其他知识点 5、参考资料 1、说明 在实际使用过程中,常常会用到点…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题:安全。文章将详细阐述认证(Authentication) 与授权(Authorization的核心概念,对比传统 Session-Cookie 与现代 JWT(JS…...

大数据治理的常见方式

大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法,以下是几种常见的治理方式: 1. 数据质量管理 核心方法: 数据校验:建立数据校验规则(格式、范围、一致性等)数据清洗&…...

李沐--动手学深度学习--GRU

1.GRU从零开始实现 #9.1.2GRU从零开始实现 import torch from torch import nn from d2l import torch as d2l#首先读取 8.5节中使用的时间机器数据集 batch_size,num_steps 32,35 train_iter,vocab d2l.load_data_time_machine(batch_size,num_steps) #初始化模型参数 def …...