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

前端学习---(6)js基础--4

Promise
Promise 是异步编程的一种新的解决方案和规范。
Promise优点:

1、可以很好地解决ES5中的回调地狱的问题(避免了层层嵌套的回调函数)。
2、统一规范、语法简洁、可读性和和可维护性强。
3、Promise 对象提供了简洁的 API,使得管理异步任务更方便、更灵活。

Promise的基本使用

// 封装异步任务
function requestData(url) {// resolve 和 reject 这两个单词是形参,可以自由命名。大家的习惯写法是写成 resolve 和 rejectconst promise = new Promise((resolve, reject) => {const res = {retCode: 0,data: 'qiangu yihao`s data',errMsg: 'not login',};setTimeout(() => {if (res.retCode == 0) {// 网络请求成功resolve(res.data);} else {// 网络请求失败reject(res.errMsg);}}, 1000);});return promise;
}// 调用异步任务
requestData('www.qianguyihao.com/index1').then(data => {console.log('异步任务执行成功:', data);
}).catch(err=> {console.log('异步任务执行失败:', err);
})// 再次调用异步任务
requestData('www.qianguyihao.com/index2').then(data => {console.log('异步任务再次执行成功:', data);
}).catch(err=> {console.log('异步任务再次执行失败:', err);
})

Promise 的回调函数

onst promise = new Promise(executor);
// 【划重点】下面这两行代码是等价的,选其中一种写法即可。这两种写法没有区别,只是写法形式上的区别
promise.then(onFulfilled, onRejected);
promise.then(onFulfilled).catch(onRejected);

有了 Promise 之后,我们不需要传入回调函数,而是:
先将 promise 实例化;
然后在原来执行回调函数的地方,改为执行对应的改变 promise 状态的函数;
并通过 then … catch 或者 then …then 等写法,实现链式调用,提高代码可读性。
promise 在写法上的大致区别是:定义异步函数的时候,将 callback 改为 resolve 和 reject,待状态改变之后,

Promise 实例提供了如下方法:
promise.then():异步任务成功的回调函数。
promise.catch():异步任务失败的回调函数。
promise.finaly():异步任务无论成功与否,都会执行的回调函数。

Promise 的链式调用写法

// 【公共方法层】封装 ajax 请求的伪代码。传入请求地址、请求参数,以及回调函数 success 和 fail。
function requestAjax(url, params, success, fail) {var xhr = new xhrRequest();// 设置请求方法、请求地址。请求地址的格式一般是:'https://api.example.com/data?' + 'key1=value1&key2=value2'xhr.open('GET', url);// 设置请求头(如果需要)xhr.setRequestHeader('Content-Type', 'application/json');xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {success && success(xhr.responseText);} else {fail && fail(new Error('接口请求失败'));}};
}// 【model层】将接口请求封装为 Promise
function requestData1(params_1) {return new Promise((resolve, reject) => {requestAjax('https://api.qianguyihao.com/url_1', params_1, res => {// 这里的 res 是接口返回的数据。返回码 retCode 为 0 代表接口请求成功。if (res.retCode == 0) {// 接口请求成功时调用resolve('request success' + res);} else {// 接口请求异常时调用reject({ retCode: -1, msg: 'network error' });}});});
}// requestData2、requestData3的写法与 requestData1类似。他们的请求地址、请求参数、接口返回结果不同,所以需要挨个单独封装 Promise。
function requestData2(params_2) {return new Promise((resolve, reject) => {requestAjax('https://api.qianguyihao.com/url_2', params_2, res => {if (res.retCode == 0) {resolve('request success' + res);} else {reject({ retCode: -1, msg: 'network error' });}});});
}function requestData3(params_3) {return new Promise((resolve, reject) => {requestAjax('https://api.qianguyihao.com/url_3', params_3, res => {if (res.retCode == 0) {resolve('request success' + res);} else {reject({ retCode: -1, msg: 'network error' });}});});
}requestData1(params_1).then(res1 => {console.log('第一个接口请求成功:' + JSON.stringify(res1));// 【关键代码】继续请求第二个接口。如果有需要,也可以把 res1 的数据传给 requestData2()的参数return requestData2(res1);
}).then(res2 => {console.log('第二个接口请求成功:' + JSON.stringify(res2));// 【关键代码】继续请求第三个接口。如果有需要,也可以把 res2 的数据传给 requestData3()的参数return requestData3(res2);
}).then(res3 => {console.log('第三个接口请求成功:' + JSON.stringify(res3));
}).catch(err => {console.log(err);
})

就先了解一下吧! 等用的时候再详细学习

相关文章:

前端学习---(6)js基础--4

Promise Promise 是异步编程的一种新的解决方案和规范。 Promise优点: 1、可以很好地解决ES5中的回调地狱的问题(避免了层层嵌套的回调函数)。 2、统一规范、语法简洁、可读性和和可维护性强。 3、Promise 对象提供了简洁的 API,使得管理异步…...

241026-RHEL如何以root身份卸载Docker

在 RHEL 8.8 中,以 root 身份卸载 Docker 可以通过以下步骤完成: 停止 Docker 服务(如果已启动): sudo systemctl stop docker删除 Docker 包: 运行以下命令卸载 Docker 引擎及其依赖包(docker-…...

iPhone当U盘使用的方法 - iTunes共享文件夹无法复制到电脑怎么办 - 如何100%写入读出

效果图 从iPhone复制文件夹到windows电脑 步骤windows 打开iTunes通过USB连接iPhone和电脑手机允许授权iTunes中点击手机图标,进入到点击左边“文件共享”,在右边随便选择一个App(随意...)写入U盘:拖动电脑的文件&am…...

jenkins ssh 免密报错Host key verification failed.

jenkins 发布项目,ssh连接远程服务器时报错:Host key verification failed. 解决: 原因是生成的sshkey不是用的jenkins用户,所以切换用户到:jenkins重新生成sshkey su jenkins ssh-keygen -t rsa ssh-copy-id -i ~/…...

智能科学与技术(一级学科)介绍

智能科学与技术:探索智能的边界与未来 智能科学与技术的起源与发展学科定位与内涵学科范围与研究方向培养目标相关学科 在当今这个信息爆炸的时代,人工智能(AI)已经成为科技创新的重要驱动力。随着技术的不断进步,智能…...

iOS调试真机出现的 “__llvm_profile_initialize“ 错误

一、错误形式&#xff1a; app启动就崩溃&#xff0c;如下&#xff1a; Demo__llvm_profile_initialize:0x1045f7ab0 <0>: stp x20, x19, [sp, #-0x20]!0x1045f7ab4 <4>: stp x29, x30, [sp, #0x10]0x1045f7ab8 <8>: add x29, sp, #0x100x1…...

Android SELinux——neverallow问题处理(十六)

上一篇我们介绍了通过添加允许策略处理问题,这里我们主要来看一些 neverallow 策略问题该怎么处理。 一、neverallow介绍 遇到 neverallow 规则问题,千万别急着去注释/剔除里面原有的规则(原生的尽量别动)。增加 allow 规则是常见的解决办法,但是随着 android 版本的升级…...

Vue 关于路由

关于路由 路由的模式与区别 路由的两种模式&#xff1a; hashhistory 区别&#xff1a; 表象不同 hash 模式中&#xff0c;在地址里以 /#/ 分隔&#xff1b;history 模式中&#xff0c;地址里以 / 分隔。关于找不到当前页面发送请求的问题 history 模式会给后端发送一次请…...

香港海洋投资启动创新海洋牧场,领航全球海洋经济

香港&#xff0c;这座国际大都市&#xff0c;以其独特的地理位置和深厚的海洋文化底蕴&#xff0c;再次站在了全球海洋经济发展的前沿。近日&#xff0c;香港海洋投资发展有限公司&#xff08;以下简称“香港海洋投资”&#xff09;在万众瞩目中&#xff0c;正式宣布启动其创新…...

C/C++ 每日一练:二分查找

二分查找是一种高效的查找算法&#xff0c;用于在有序数组中定位目标元素的位置。它的核心思想是每次查找时将范围缩小一半。 题目要求 实现一个二分查找算法。给定一个递增排序的整型数组 arr 和一个目标值 target&#xff0c;编写一个函数 binarySearch&#xff0c;若 targe…...

Linux基础IO--重定向--缓冲区

1&#xff0c;为什么语言喜欢做封装&#xff1f; 我们先知道一个概念&#xff0c;显示器叫做字符设备&#xff0c;根据ACSLL码来打印数据&#xff0c;所以我们从键盘输入的 1234&#xff0c;在显示器看来就是一个一个的字符(1,2,3,4)而不是一千两百三十四: 下图输入字符类型数…...

Conda 安装与使用指南

Conda 是一个开源的软件包管理和环境管理系统&#xff0c;主要解决一个系统上同时要使用python2&#xff0c;python3等等多个python环境的切换问题&#xff0c;支持多种编程语言&#xff08;如 Python、R 等&#xff09;&#xff0c;可以在 Windows、macOS 和 Linux 上运行。它…...

C++中获取硬盘ID的方法

在C++中,直接获取硬盘的ID(通常是硬盘的序列号或唯一标识符)并不是一项简单的任务,因为这通常涉及到低级的硬件访问,这通常是由操作系统或特定的硬件驱动程序管理的。标准C++库并没有提供直接访问硬盘ID的功能。 然而,可以通过以下几种方法来获取硬盘的ID: 操作系统特定…...

OpenRTP 传输增加OpenRTPServer

开源地址 最近增加了OpenRTPServer&#xff0c; 已经修改完成一版放在了目录下&#xff0c;window和linux下编译都成功了&#xff0c;不过由于修改代码CMakefile 需要修改&#xff0c;先放放 OpenRTP开源地址 vlc得纠错传输方式 我发现我代码写错以后&#xff0c;vlc 依然能…...

使用vue3+cesium+earthsdk+supermap实现通视分析(有版本报错问题)

main.js: 这个文件是项目的入口文件,主要进行了以下操作: 使用Vue 3的createApp创建应用实例。加载了element-plus UI 组件库。加载了router和store,以及axios用于发送HTTP请求。将@turf/turf和自定义的bus.js注册到全局属性中,便于在组件中使用。环境配置需求: 你需要安…...

python 轮子是什么

此一词语的由来是因为轮子由人类所发明&#xff0c;且在各方面都带来许多便利。既然轮子已被发明&#xff0c;而且在使用上没有什么缺陷&#xff0c;重新再发明一次轮子是没有意义的&#xff0c;只是浪费时间&#xff0c;分散研究者的资源&#xff0c;使其无法投入更有意义及价…...

农作物大豆病虫害识别分类数据集(猫脸码客第227期)

农作物大豆病虫害识别分类数据集 大豆&#xff0c;作为全球重要的粮食作物之一&#xff0c;不仅承载着人类饮食中的重要角色&#xff0c;还深刻影响着农业经济的发展。然而&#xff0c;大豆的生长过程中&#xff0c;常常面临着来自病害和虫害的双重威胁。这些病虫害不仅会影响…...

如何在算家云搭建GPT-SOVITS(语音转换)

一、模型介绍 GPT-SOVITS是一款强大的小样本语音转换和文本转语音 WebUI工具。它集成了声音伴奏分离、自动训练集分割、中文ASR和文本标注等辅助工具。 具有以下特征&#xff1a; 零样本 TTS&#xff1a; 输入 5 秒的声音样本并体验即时文本到语音的转换。少量样本 TTS&…...

ThinkPad T480拆机屏幕改装:便携式显示器DIY指南

ThinkPad T480拆机屏幕改装&#xff1a;便携式显示器DIY指南 本文记录了将旧笔记本电脑 T480 拆机屏幕改装为便携式显示器的全过程。作者在决定升级设备后&#xff0c;选择通过 DIY 方式利用原有的屏幕资源。文章详细介绍了屏幕驱动板的安装、螺丝孔的剪裁、排线连接及固定的步…...

C++ (8) C++11及更新特性:探索魔法新领域

C11及更新特性&#xff1a;探索魔法新领域 随着C语言的不断进化&#xff0c;C11及其后续版本带来了许多激动人心的新特性&#xff0c;它们就像是魔法世界中新发现的领域&#xff0c;充满了无限的可能性。这些新特性不仅提高了编程的效率和灵活性&#xff0c;还为程序员提供了更…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...