ES学习Promise对象(九)

这里写目录标题

  • 一、概念
  • 二、示例
    • 基本使用
    • 使用 Promise 对象封装Ajax
    • then() 方法
    • catch() 方法

一、概念

  • 简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
  • Promise 是一个对象,Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。axios 的内部实现原理就是通过 Promise 实现的。
  • Promise对象有以下两个特点:
    • 对象的状态不受外界影响。有三种状态:pending(进行中)、fulfilled(成功)和rejected(失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
    • 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为resolved和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。
  • Promise对象是一个构造函数,用来生成Promise实例,带有一个回调函数,回调函数的两个参数是 resolve(成功) 和 reject(失败),这两个参数他们也是函数。

二、示例

基本使用

        function timeOut(ms) {// Promise对象是一个构造函数,用来生成Promise实例// 闭包函数:一个函数里面返回一个函数return new Promise((resolve, reject) => {// ... 模拟执行异步操作,后端返回的数据let res = {code: 200,//code:201data: {name: 'ES6学习!'},error: '失败了!'}setTimeout(() => {// 异步执行成功if (res.code === 200) {resolve(res.data);// 异步执行失败} else {reject(res.error);}},ms);});}// then方法的第一个参数是resolved状态的回调函数,// 第二个参数是rejected状态的回调函数,它们都是可选的。timeOut(4000).then((val)=>{console.log(val); //这里的值接收的是 resolved() 的值},(err)=>{console.log(err);//这里的值接收的是 rejected() 的值,输出 失败了});

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由JavaScript引擎提供,不用自己部署。
resolve函数的作用是,将Promise对象的状态从“未完成”变成“成功”(即从pending变为resolved),在异步操作成功时调用,并将异步操作的结果作为参数传递。
reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从pending变为rejected),在异步操作失败时嗲用,并将异步操作报出的错位u传递出去。
Promise 实例生成以后,可以用 then方法分别指定resolved状态和 rejected状态的回调函数。

使用 Promise 对象封装Ajax

        const getJson = function (url) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open('GET', url);xhr.resposeType = 'json';xhr.setRequestHeader('Accept', 'application/json');xhr.send();xhr.onreadystatechange = function() {//console.log("READYSTATE"+ xhr.readyState);if (xhr.readyState === 4) {  console.log("READYSTATE"+ xhr.status);             if (xhr.status === 200) { resolve(this.responseText);} else {reject(new Error(xhr.statusText))}}}})}getJson('http://timor.tech/api/holiday/year/2024').then((data) => {console.log(data);}, (error) => {console.log(error);})

then() 方法

如果一个promise执行完后 返回的还是一个promise 实例(注意,不是原来那个Promise实例),会把这个promise 的执行结果,传递给下一次then中。因此可以采用链式写法,即then方法后面再调用另一个then方法。

catch() 方法

catch(err=>{})方法等价于then(null,err=>{}),用于指定发生错误时的回调函数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/64159.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kibana:LINUX_X86_64 和 DEB_X86_64两种可选下载方式的区别

最近需要在vm(操作系统是 Ubuntu 22.04.4 LTS,代号 Jammy。这是一个基于 x86_64 架构的 Linux 发行版)上安装一个7.17.8版本的Kibana,并且不采用docker方式。 在下载的时候发现有以下两个选项,分别是 LINUX_X86_64 和 …

CMake 构建项目并整理头文件和库文件

本文将介绍如何使用 CMake 构建项目、编译生成库文件,并将头文件和库文件整理到统一的目录中以便在其他项目中使用。 1. 项目结构 假设我们正在构建一个名为 rttr 的开源库,初始的项目结构如下: D:\WorkCode\Demo\rttr-master\|- src\ …

AIA - IMSIC之二(附IMSIC处理流程图)

本文属于《 RISC-V指令集基础系列教程》之一,欢迎查看其它文章。 1 ​​​​​​​通过IMSIC接收外部中断的CSR 软件通过《AIA - 新增的CSR》描述的CSR来访问IMSIC。 machine level 的 CSR 与 IMSIC 的 machine level interrupt file 可相互互动;而 supervisor level 的 CSR…

Vue单页应用的配置

前面通过几篇文章了解并掌握了 Vue 项目构建及运行的前期工作 。接下来我们可以走进 Vue 项目的内部,一探其内部配置的基本构成。 1. 路由配置 由于 Vue 这类型的框架都是以一个或多个单页构成,在单页内部跳转并不会重新渲染 HTML 文件,其路…

CocosCreator-引擎案例-TS:spine

工程1:LoadSpine:简单加载spine资源 建立工程,在层级上建立一个空对象,改名spine 在spine上添加spine组件: 添加组件>渲染组件>spine 在spine上挂上脚本loadspine onLoad () {cc.resources.load(loadSpine/ali…

使用FreeNAS软件部署ISCSI的SAN架构存储(IP-SAN)练习题

一,实验用到工具分别为: VMware虚拟机,安装教程:VMware Workstation Pro 17 安装图文教程 FreeNAS系统,安装教程:FreeNAS-11.2-U4.1安装教程2024(图文教程) 二,新建虚…

【ANGULAR网站开发】初始环境搭建

1. 初始化angular项目 1.1 创建angular项目 需要安装npm和nodejs,这边不在重新安装 直接安装最新版本的angular npm install -g angular/cli安装指定大版本的angular npm install -g angular/cli181.2 启动angular 使用idea启动 控制台启动 ng serve启动成功…

【再谈设计模式】享元模式~对象共享的优化妙手

一、引言 在软件开发过程中,我们常常面临着创建大量细粒度对象的情况,这可能会导致内存占用过高、性能下降等问题。享元模式(Flyweight Pattern)就像是一位空间管理大师,它能够在不影响功能的前提下,有效地…

Milvus×EasyAi:如何用java从零搭建人脸识别应用

如何从零搭建一个人脸识别应用?不妨试试原生Java人工智能算法:EasyAi Milvus 的组合拳。 本文将使用到的软件和工具包括: EasyAi:人脸特征向量提取Milvus:向量数据库用于高效存储和检索数据。 01. EasyAi:…

NS3学习——tcpVegas算法代码详解(2)

NS3学习——tcpVegas算法代码详解(1)-CSDN博客 目录 4.TcpVegas类中成员函数 (5) CongestionStateSet函数 (6) IncreaseWindow函数 1.检查是否启用 Vgas 2.判断是否完成了一个“Vegas 周期” 2.1--if:判断RTT样本数量是否足够 2.2--e…

GitLab 将停止为中国区用户提供服务,60天迁移期如何应对? | LeetTalk Daily

“LeetTalk Daily”,每日科技前沿,由LeetTools AI精心筛选,为您带来最新鲜、最具洞察力的科技新闻。 GitLab作为一个广受欢迎的开源代码托管平台,近期宣布将停止服务中国大陆、澳门和香港地区的用户提供服务。根据官方通知&#x…

华为实训课笔记 2024 1223-1224

华为实训 12/2312/24 12/23 [Huawei]stp enable --开启STP display stp brief --查询STP MSTID Port Role STP State Protection 实例ID 端口 端口角色 端口状态 是否开启保护[Huawei]display stp vlan xxxx --查询制定vlan的生成树计算结…

《Java源力物语》-3.空值猎手

~犬📰余~ “我欲贱而贵,愚而智,贫而富,可乎? 曰:其唯学乎” \quad 夜色渐深,在一处偏僻小径上,月光透过浓密的源力云层,在地面上投下斑驳的光影。String正独自练习着刚从…

科技云报到:人工智能时代“三大件”:生成式AI、数据、云服务

科技云报到原创。 就像自行车、手表和缝纫机是工业时代的“三大件”。生成式AI、数据、云服务正在成为智能时代的“新三大件”。加之全球人工智能新基建加速建设,成为了人类社会数字化迁徙的助推剂,让新三大件之间的耦合越来越紧密。从物理世界到数字世…

hiprint结合vue2项目实现静默打印详细使用步骤

代码地址是:vue-plugin-hiprint: hiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑 本地安装包地址:electron-hiprint 发行版 - Gitee.com 1、先安装hipint安装包在本地 2、项目运行npm(socket.…

CUDA各种内存和使用方法

文章目录 1、全局内存2、局部内存3、共享内存3.1 静态共享内存3.2 动态共享内存 4、纹理内存5、常量内存6、寄存器内存7、用CUDA运行时API函数查询设备CUDA 错误检测 1、全局内存 特点:容量最大,访问延时最大,所有线程都可以访问。 线性内存…

Chapter 03 复合数据类型-1

1.列表 Python内置的一种有序、可变的序列数据类型; 列表的定义: [ ]括起来的逗号分隔的多个元素组成的序列 列表对象的创建: (1)直接赋值 >>> list1 []#创建一个空列表赋值给list1 >>> list…

【后端】LNMP环境搭建

长期更新各种好文,建议关注收藏! 本文近期更新完毕。 LNMPlinuxnginxmysqlphp 需要的资源 linux服务器 web服务软件nginx 对应的语言编译器代码文件 数据库mysql安装 tar.gz包或者命令行安装 进入root: sodu 或su mkdir path/{server,soft}…

基于PyQt5的UI界面开发——多界面切换

介绍 最初,因为课设的缘故,我只是想做一个通过按键进行切面切换而已,但是我看网上资料里面仅是语焉不详,让我困惑的很,但后面我通过摸索才发现这件事实在是太简单了,因此我想要记录下来。 本博客将介绍如…

操作002:HelloWorld

文章目录 操作002:HelloWorld一、目标二、具体操作1、创建Java工程①消息发送端(生产者)②消息接收端(消费者)③添加依赖 2、发送消息①Java代码②查看效果 3、接收消息①Java代码②控制台打印③查看后台管理界面 操作…