#Js篇:Promise

定义

Promise是异步操作解决方案,为异步操作提供统一接口。

Promise英文意思是“承诺”,表示其他手段无法改变。

返回

所有异步任务都返回一个Promise实例。

Promise实例有一个then方法,用于指定下一步的回调函数。

状态

异步操作未完成 pending(进行中)

异步操作成功 fulfilled(已完成)

异步操作失败 rejected(已失败)

  • 从“未完成”到“成功”
  • 从“未完成”到“失败”

优点

可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。

缺点

无法取消Promise,一旦新建它就会立即执行,无法中途取消。

如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。

当处于pending状态是,无法得知目前进展到哪一阶段。

基本用法

ES6规定,Promise对象是一个构造函数,用来生成Promsise实例。

const promise = new Promise((resolve,reject) => {
	if (/* 异步操作成功 */) {
    resolve(value)
	} else {
    reject(error)
  }
})

resolve函数作用是,将Promise对象的状态从“未完成”变为“成功”----pending到resolved

Reject函数作用是,将Promise从“未完成”变成“失败”

—pending到rejected

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});

下面是异步加载图片的例子

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}

Promise.prototype.then()

作用是为Promise实例添加状态改变时的回调函数。

返回: t hen方法返回一个新的Promise实例。

Promise.prototype.catch()

指定发生错误时的回调函数

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误!', error);
});

如果状态变为resolve则调用**then()**方法执行的回调函数;

如果异步操作抛出错误,状态就会变味rejected则会调用catch()方法指定的回调函数,处理这个错误。

Promise.prototype.finally()

指定不管Promise对象最后状态如何,都会执行的操作。

Promise.all()

定义

用于将多个Promise实例,包装成一个新的Promise实例。

const p = Promise.all([p1, p2, p3]);
特点
  1. p1p2p3都是 Promise 实例
  2. 如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。

p的状态由p1 p2 p3决定

  1. 3种都变成fulfilled, === p变成fulfilled;
  2. 3种中有一个变成rejected,====p变成fulfilled

Promise.all()方法只适合所有异步操作都成功的情况,如果有一个操作失败,就无法满足要求。

Promise.race()

定义

将多个Promise实例,包装成一个新的Promise实例。

特点

p的状态

只要p1 p2 p3之中有一个实例率先改变状态,p的状态就跟着改变。

只要有一个 Promise 对象率先解决或拒绝,整个 Promise.race() 就会解决或拒绝。

Promise.allSettled()

定义

只有等到参数数组的所有 Promise 对象都发生状态变更(不管是fulfilled还是rejected),返回的 Promise 对象才会发生状态变更。

const promises = [
  fetch('/api-1'),
  fetch('/api-2'),
  fetch('/api-3'),
];

await Promise.allSettled(promises);
removeLoadingIndicator();

上面示例中,数组promises包含的三个请求,只有等到三个请求都结束了,removeLoadingIndicator()才会执行。

== 用于获取多个Promise对象的最终状态和结果==

== 而 Promise.finally()用于在Promise最终解决或拒绝时执行一段逻辑 ==

Promise.any()

特点
  1. 只要参数实例一个变成fulfilled–成功状态,包装对象就会变成fulfilled—成功状态
  2. 如果所有参数实例都变成rejected状态,包装对象实例就会变成rejected状态

Promise.resolve()

定义

需要将现有对象转为Promise对象

Promise.reject()

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【2023 云栖】阿里云田奇铣:大模型驱动 DataWorks 数据开发治理平台智能化升级

云布道师 本文根据 2023 云栖大会演讲实录整理而成,演讲信息如下: 演讲人:田奇铣 | 阿里云 DataWorks 产品负责人 演讲主题:大模型驱动 DataWorks 数据开发治理平台智能化升级 随着大模型掀起 AI 技术革新浪潮,大数…

nrm安装及使用

一、介绍 nrm 是一个 Node.js 的 registry 管理工具,它允许你快速地在不同的 npm registry 之间进行切换。通过使用 nrm,你可以方便地将 npm 的 registry 切换为淘宝镜像、npm 官方镜像或者其他定制的镜像,以加快包的下载速度。nrm仓库请点击…

leetcode-python刷题集

系列文章目录 记录一下自己的学习过程 文章目录 系列文章目录基础知识链表链表两数相加 回文 11.16罗马数字转换 11.16最长公共前缀 11.16队列 基础知识 链表 节点定义: class Node:def __init__(self,data None, next None):self.data dataself.next next节…

Fedora 36 ARM 镜像源更换与软件安装

1、什么是Fedora Fedora Linux是较具知名度的Linux发行套件之一,由Fedora专案社群开发、红帽公司赞助,目标是建立一套新颖、多功能并且自由的作业系统。 Fedora是商业化的Red Hat Enterprise Linux发行版的上游原始码。 2、Fedora软件安装 64 位 .deb&a…

MyBatisPlus入门介绍

目录 一、MyBatisPlus介绍 润物无声 效率至上 丰富功能 二、Spring集成MyBatisPlus 三、SpringBoot集成MyBatisPlus 一、MyBatisPlus介绍 MyBatis-Plus(简称 MP)是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变&#xff0c…

2023.11.25更新关于mac开发APP(flutter)的笔记与整理(实机开发一)

我自己写的笔记很杂,下面的笔记是我在chatgpt4的帮助下完成的,希望可以帮到正在踩坑mac开发APP(flutter)的小伙伴 目标:通过MAC电脑使用flutter框架开发一款适用于苹果手机的一个APP应用 本博客的阅读顺序是&#xf…

brat文本标注工具——安装

目录 一、Linux系统安装 1. centOS系统 2. Ubuntu系统 3. macOS系统 4.说明 二、Google Chrome安装 1. 打开命令行,切换到管理者权限 2. 安装依赖 3. 下载Google浏览器的安装包 4. 安装Google Chrome 三、yum更新 四、Apache安装 安装Apache 启动Apac…

CPU、GPU、TPU内存子系统架构

文章目录 CPU、GPU、TPU内存子系统架构概要CPUGPUTPU共同点和差异: CPU、GPU、TPU内存子系统架构 概要 Memory Subsystem Architecture,图源自TVM CPU CPU(中央处理器)的内存子系统:隐式管理 主内存(…

BUUCTF [SWPU2019]伟大的侦探 1

BUUCTF:https://buuoj.cn/challenges 题目描述: 下载附件,解压提示需要密码,但解压出一个密码.txt文件。 密文: 解题思路: 1、打开密码.txt文件,提示如下。 压缩包密码:摂m墷m卪倕ⅲm仈Z 呜呜呜…

Oracle的安装及使用流程

Oracle的安装及使用流程 1.Win10安装Oracle10g 1.1 安装与测试 安装版本: OracleXEUniv10.2.1015.exe 步骤参考:oracleXe下载与安装 安装完成后测试是否正常 # 输入命令连接oracle conn sys as sysdba; # 无密码,直接按回车 # 测试连接的s…

运维高级--centos7源码安装Apache

安装必要的依赖项: sudo yum groupinstall "Development Tools" sudo yum install pcre pcre-devel zlib zlib-devel openssl openssl-devel这将安装编译和构建所需的基本工具,以及 Apache HTTP Server 所需的一些依赖项。 下载 Apache HTT…

【GPT-3.5】通过python调用ChatGPT API与ChatGPT对话交流

文章目录 一、引言二、AIGC简介三、OpenAI介绍四、GPT-3.5介绍五、获得OpenAI API Key六、调用ChatGPT API实现与ChatGPT对话七、参考链接 一、引言 ChatGPT 的火爆,成功带火了AIGC,让它进入大众的视野。 ChatGPT 和Whisper API 开发者现在可以通过API将…

ctfshow刷题web入门--1--ljcsd

文章目录 ctf.show。信息搜集web1web2web3web4web5web6web7web8web9web10web11web12web13web14web15web16web17web18web19web20。爆破。知识1.1 播种随机数生成器-mt_srand。参考web21--重点web22--做不出来web23web24web25web26web27web28。。。命令执行。知识1 绕过正则表达式…

SQL sever2008中的游标

目录 一、游标概述 二、游标的实现 三、优缺点 3.1优点: 3.2缺点: 四、游标类型 4.1静态游标 4.2动态游标 4.3只进游标 4.4键集驱动游标 4.5显示游标: 4.6隐式游标 五、游标基本操作 5.1声明游标 5.1.1.IS0标准语法 5.1.1.1语…

在 Go 中使用 Protocol Buffers

各位准备好了吗!这一次,我们将深入探讨 Protocol Buffers(protobuf)及其在数据序列化中的超能力所在。 介绍 Protocol Buffers,也被称为 protobuf,是由谷歌开发的一种语言无关的二进制序列化格式。其主要…

1.前端--基本概念【2023.11.25】

1.网站与网页 网站是网页集合。 网页是网站中的一“页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。 2.Web的构成 主要包括结构(Structure) 、表现(Presentation)和行为(Behavior&#xff…

cmake install接口常用方式介绍

cmake install接口常用方式介绍 1 Synopsis2 Introduction2.1 DESTINATION <dir>2.2 PERMISSIONS <permission>...2.3 CONFIGURATIONS <config>...2.4 COMPONENT <component>2.5 EXCLUDE_FROM_ALL2.6 RENAME <name>2.7 OPTIONAL 3 Signatures4 E…

Three.js 3D模型爆炸分解

你是否曾想展示一些很酷的发动机的 3D 模型? 这是一种可行的方法,使用一些非常基本的数学:一个简单的分解视图。 为此,我们将使用 React-Three-Fiber,但它可以与原生 Three.js 配合使用(它与 r3f 生态系统没有深度绑定,只是对我来说迭代速度更快)。 1、准备3D模型 首…

从0到0.01入门 Webpack| 005.精选 Webpack面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

nodejs微信小程序+python+PHP-健身俱乐部在线管理平台的设计与实现-安卓-计算机毕业设计

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…