当前位置: 首页 > 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;还为程序员提供了更…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

Python爬虫实战:研究Restkit库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的有价值数据。如何高效地采集这些数据并将其应用于实际业务中,成为了许多企业和开发者关注的焦点。网络爬虫技术作为一种自动化的数据采集工具,可以帮助我们从网页中提取所需的信息。而 RESTful API …...