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\ …

【FAQ】HarmonyOS SDK 闭源开放能力 — Vision Kit(2)

1.问题描述: 人脸活体检测返回上一页App由沉浸式变为非沉浸式多了上下安全区域。 解决方案: 检测结束后需要自己去设置沉浸式配置。 2.问题描述: Vision Kit文字识别是本地识别,还是上传至服务器,由服务器来识别文…

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启动成功…

lua debug相关方法详解

lua debug相关方法详解 1. debug.debug()2. debug.getinfo(func | level [, what])3. debug.getlocal(func-or-level, localindex)4. debug.setlocal(level, local_number, value)5. debug.getupvalue(func, upvalue_index)6. debug.setupvalue(func, upvalue_index, value)7. …

《计算机网络(第7版)-谢希仁》期末考试复习题和答案(总结整理)

目录 前言: 一、选择题。 二、填空题。 三、名词解释。 四、简答题。 前言: 这个自动标题自己带了序号,一开始想全部选项和题号都改过来的,结果一看一百多个全是,懒得改了 一、选择题。 1、广域网覆盖的地理范围…

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

一、引言 在软件开发过程中,我们常常面临着创建大量细粒度对象的情况,这可能会导致内存占用过高、性能下降等问题。享元模式(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的生成树计算结…

企业数字化转型中如何区分“IT投入”和“业务投入”

在数字化转型的浪潮中,企业往往面临一个关键问题:如何区分“IT投入”和“业务投入”?在很多企业中,这两个概念往往被混淆,不少公司甚至认为“数字化转型”就是“IT的事情”,但实际上,它们之间有…

【Spring AI】Spring AI Alibaba的简单使用

提示:文章最后有详细的参考文档。 前提条件 SpringBoot版本为3.x以上JDK为17以上申请api-key,地址:百炼平台 引入依赖 说明:我的springboot版本为3.2.4,spring-ai-alibaba-starter版本为1.0.0-M2.1(对应spring-ai版本…

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

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

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

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

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

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