JavaScript promise实例——通过XHR获取省份列表
文章目录
- 需求和步骤
- 代码示例
- 效果
需求和步骤
代码示例
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><!-- 确保IE浏览器使用最新的渲染引擎 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 设置viewport以确保页面在移动设备上正确显示 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Promise管理XHR请求</title><style>body {font-family: Arial, sans-serif;padding: 20px;max-width: 800px;margin: 0 auto;}button {padding: 10px 20px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;}button:hover {background-color: #45a049;}.my-p {margin-top: 20px;padding: 15px;background-color: #f5f5f5;border-radius: 4px;line-height: 1.8;}.log {margin-top: 20px;padding: 15px;background-color: #f8f9fa;border: 1px solid #ddd;border-radius: 4px;font-family: monospace;white-space: pre-wrap;max-height: 300px;overflow: auto;}</style>
</head><body><h2>Promise管理XHR省份列表请求示例</h2><button id="getProvinces">获取省份列表</button><p class="my-p">点击按钮加载省份列表...</p><div class="log" id="log">日志输出:</div><script>// 添加日志输出函数function log(message) {console.log(message);const logElement = document.getElementById('log');logElement.textContent += '\n' + message;}// 监听按钮点击事件document.getElementById('getProvinces').addEventListener('click', () => {log('按钮被点击,开始请求省份列表...');// 调用获取省份列表的函数getProvinceList();});// 获取省份列表函数function getProvinceList() {// 目标:使用Promise管理XHR请求省份列表log('开始创建Promise...');// 1.创建Promise对象const p = new Promise((resolve, reject) => {log('Promise回调函数开始执行');// 2.执行XHR异步代码,获取省份列表const xhr = new XMLHttpRequest();log('创建XHR对象成功');xhr.open('GET', 'http://hmajax.itheima.net/api/province');log('配置请求方法和URL完成');xhr.addEventListener('loadend', () => {log(`XHR请求完成,状态码: ${xhr.status}`);log(`响应数据: ${xhr.response}`);// xhr如何判断响应成功还是失败的?// 2xx开头的都是成功响应状态码if (xhr.status >= 200 && xhr.status < 300) {log('XHR请求成功,触发resolve...');resolve(JSON.parse(xhr.response));} else {log('XHR请求失败,触发reject...');reject(new Error(xhr.response));}});// 监听错误事件// loadend事件只能捕获到服务器返回的错误(如404、500等HTTP错误)// 但无法捕获到请求根本没有到达服务器的情况// error事件填补了这个空缺,处理网络层面的错误xhr.addEventListener('error', () => {log('XHR请求发生网络错误');reject(new Error('网络错误,请检查您的网络连接'));});log('准备发送XHR请求...');xhr.send();log('XHR请求已发送,等待响应...');});// 3.关联成功或失败函数,做后续处理log('关联Promise的成功和失败处理函数...');p.then(result => {log('Promise已成功解决(resolved)');log(`解析后的结果: ${JSON.stringify(result)}`);// 将省份列表显示在页面上document.querySelector('.my-p').innerHTML = result.list.join('<br>');}).catch(error => {log('Promise已拒绝(rejected)');// 错误对象要用console.dir详细打印console.dir(error);log(`错误信息: ${error.message}`);// 服务器返回错误提示消息,插入到p标签显示document.querySelector('.my-p').innerHTML = error.message;});}</script>
</body></html>
效果
相关文章:
JavaScript promise实例——通过XHR获取省份列表
文章目录 需求和步骤代码示例效果 需求和步骤 代码示例 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><!-- 确保IE浏览器使用最新的渲染引擎 --><meta http-equiv"X-UA-Compatible" conten…...
【力扣hot100题】(065)搜索旋转排序数组
难点在于情况真的很多需要逐一判断,画个走向图再写判断条件就行了。 还有处理边界条件也比较麻烦。 class Solution { public:int search(vector<int>& nums, int target) {int left0;int rightnums.size()-1;while(left<right){int mid(leftright)/…...
毕设论文的分类号与UDC查询的网站
毕业论文分类号 中图分类号查询链接 找到自己的细分类,一个一个点就好,然后就找到了 毕业论文UDC UDC查询...
pyqt5实现多个窗口互相调用
使用以下代码可以实现多窗口之间的相互调用: import sys from PyQt5.QtWidgets import QApplication, QMainWindow import win0, win1, win2, win3 # 分别包含 Ui_win0 和 Ui_win1class Win0Window(QMainWindow, win0.Ui_win0):def __init__(self, x, parentNone)…...
Python基于Django的企业it资产管理系统(附源码,文档说明)
博主介绍:✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇dz…...
浅谈在HTTP中GET与POST的区别
从 HTTP 报文来看: GET请求方式将请求信息放在 URL 后面,请求信息和 URL 之间以 ?隔开,请求信息的格式为键值对,这种请求方式将请求信息直接暴露在 URL 中,安全性比较低。另外从报文结构上来看,…...
计算机视觉5——运动估计和光流估计
一、运动估计 (一)运动场(Motion Field) 定义与物理意义 运动场是三维场景中物体或相机运动在二维图像平面上的投影,表现为图像中每个像素点的运动速度矢量。其本质是场景点三维运动(平移、旋转、缩放等&a…...
8. RabbitMQ 消息队列 + 结合配合 Spring Boot 框架实现 “发布确认” 的功能
8. RabbitMQ 消息队列 结合配合 Spring Boot 框架实现 “发布确认” 的功能 文章目录 8. RabbitMQ 消息队列 结合配合 Spring Boot 框架实现 “发布确认” 的功能1. RabbitMQ 消息队列 结合配合 Spring Boot 框架实现 “发布确认” 的功能1.1 回退消息 2.备用交换机3. API说…...
铰链损失函数 Hinge Loss和Keras 实现
一、说明 在为了了解 Keras 深度学习框架的来龙去脉,本文介绍铰链损失函数,然后使用 Keras 实现它们以进行练习并了解它们的行为方式。在这篇博客中,您将首先找到两个损失函数的简要介绍,以确保您在我们继续实现它们之前直观地理解…...
【Tips】Cloudflare用户与网站之间的中介
Cloudflare是一家提供多种网络服务的公司,旨在帮助网站和应用程序提高性能、安全性和可靠性。它为全球网站、应用程序和网络提供一系列网络安全、性能优化和可靠性服务。Cloudflare 的核心使命是让互联网更加安全、快速和可靠。 以下是其主要服务介绍:…...
PDF 转图片,一行代码搞定!批量支持已上线!
大家好,我是程序员晚枫。今天我要给大家带来一个超实用的功能——popdf 现在支持 PDF 转图片了,而且还能批量操作!是不是很激动?别急,我来手把手教你玩转这个功能。 1. 一行代码搞定单文件转换 popdf 的核心就是简单暴…...
可以使用费曼学习法阅读重要的书籍
书本上画了很多线,回头看等于没画出任何重点。 不是所有的触动都是有效的。就像你曾经看过很多好文章,当时被触动得一塌糊涂,还把它们放进了收藏夹,但一段时间之后,你就再也记不起来了。如果让你在一本书上画出令自己…...
基于Flask的笔记本电脑数据可视化分析系统
【Flask】基于Flask的笔记本电脑数据可视化分析系统(完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 该系统采用Python语言进行编写,以Flask为后端框架,利用Echarts实现数…...
JavaScript基础--17-数组的常见方法
数组的方法清单 数组的类型相关 方法描述备注Array.isArray()判断是否为数组toString()将数组转换为字符串Array.from(arrayLike)将伪数组转化为真数组Array.of(value1, value2, value3)创建数组:将一系列值转换成数组 注意,获取数组的长度是用length…...
TDengine 从入门到精通(2万字长文)
第一章:走进 TDengine 的世界 TDengine 是个啥? 如果你首次接触 TDengine,心里可能满是疑惑:这究竟是个什么东西,能派上什么用场?简单来讲,TDengine 是一款开源、高性能且云原生的时序数据库&…...
ctfshow VIP题目限免(前10题)
目录 源码泄露 前台JS绕过 协议头信息泄露 robots后台泄露 phps源码泄露 源码压缩包泄露 版本控制泄露源码 版本控制泄露源码2 vim临时文件泄露 cookie泄露 源码泄露 根据题目提示是源代码泄露,右键查看页面源代码发现了 flag 前台JS绕过 发现右键无法使用了&…...
PyTorch中的各种损失函数的详细解析与通俗理解!
目录 1. 前言 2. 回归任务中的损失函数 2.1 L1损失(Mean Absolute Error, MAE) 2.2 平方损失(Mean Squared Error, MSE) 2.3 平滑L1损失(Smooth L1 Loss) 3. 分类任务中的损失函数 3.1 交叉熵损失&a…...
leetcode53-最大子数组和
leetcode 53 思路 本题使用贪心算法,核心在于对每一个元素进行遍历,在遍历过程里,持续更新当前的子数组和以及最大子数组和 假设 sum 是当前的子数组和,max 是到目前为止最大的子数组和遍历数组时,计算每个位置的当…...
解决Long类型前端精度丢失和正常传回后端问题
在 Java 后端开发中,可能会遇到前后端交互过程中 Long 类型精度丢失的问题。尤其是在 JavaScript 中,由于其 Number 类型是双精度浮点数,超过 16 位的 Long 类型值就会发生精度丢失。 问题背景 假设有如下实体类: public class…...
Green Coding规范:从循环语句到数据库查询的节能写法
本文系统化阐述绿色编码的工程实践方案,通过重构循环控制结构、优化集合操作范式、改进数据库访问模式三大技术路径,实现典型业务系统降低28.6%的CPU指令周期消耗。基于对JVM和SQL解释器的指令级分析,提出循环展开的黄金分割法则、位图索引加…...
Spring Boot整合Elasticsearch
摘要:本文手把手教你如何在Spring Boot项目中整合Elasticsearch(ES),并实现基本的CRUD与搜索操作。包含版本选择、配置、代码示例及常见问题解决。 一、环境准备 1.1 软件版本 Spring Boot: 3.xElasticsearch: 8.x(推…...
2025年渗透测试面试题总结- 某四字大厂面试复盘扩展 一面(题目+回答)
网络安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 某四字大厂面试复盘扩展 一面 一、Java内存马原理与查杀 二、冰蝎与哥斯拉原理对比(技术演…...
java基础自用笔记:文件、递归、常见的字符集、IO流
文件 递归 递归文件夹寻找某个文件,要先判断是否有权限进入文件夹(若无权限返回null)然后再判断文件数量是否不为0 常见的字符集 IO流 字节流 文件字节输入流 当读取到最后一个字节的时候,装在buffer[0]中,如果后面没…...
关于计算机网络的一些疑问
目录 1. HTTP/1.x 中的“队头阻塞”(Head-of-Line Blocking)问题解释什么是队头阻塞?其他相关概念: 2. HPACK 算法是什么?HPACK 的作用:HPACK 的特点:HPACK 提升性能的原因: 3. 如何…...
超大规模数据场景(思路)——面试高频算法题目
目录 用4KB内存寻找重复元素 从40个亿中产生不存在的整数【位】 如果只让用10MB空间存储? 初次遍历 二次遍历 用2GB内存在20亿个整数中查找出现次数最多的数【分块】 从亿万个URL中查找问题【分块 堆】 40亿个非负整数中找出现两次的数【位 不过多个位哈】 …...
高级:性能优化面试题深度剖析
一、引言 在Java应用开发中,性能优化是确保系统高效运行的关键。面试官通过相关问题,考察候选人对性能优化的理解和实践经验。本文将深入探讨Java应用性能优化的方法,包括JVM调优、数据库优化等,结合实际开发场景,帮助…...
【软件】在 macOS 上安装和配置 Apache HTTP 服务器
在 macOS 上安装 Apache HTTP 服务器的步骤: 1.安装 Apache HTTP 服务器 macOS 系统可能已经预装了 Apache HTTP 服务器。你可以通过终端检查它是否已经安装: httpd -v如果系统提示command not found,说明 Apache 未安装。你可以通过 Home…...
数据结构之链表
定义:在计算机科学中,链表是数据元素的线性集合,其每个元素都指向下一个元素,元素存储上并不连续。 链表分类:单向链表(每个元素知道下一个元素是谁)、双向链表(每个元素知道其上一…...
基于Python的懂车帝汽车数据爬虫分析与可视化系统
【Python】基于Python的懂车帝汽车数据爬虫分析与可视化系统 (完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 🚗🔥【视频简介】🔥🚗 大家好&…...
setInterval问题以及前端如何实现精确的倒计时
一、为什么setInterval不能实现 原因有两:1、js是单线程,基于事件循环执行其他任务(这里建议读者可以多去了解一下浏览器线程与事件循环相关知识) 2、setinterval是每隔delay时间,把逻辑放到任务队列中,而…...
Python爬虫教程010:使用scrapy爬取当当网数据并保存
文章目录 3.6 爬取当当网数据3.6.1 创建项目3.6.2 查找要爬取的数据对象3.6.3 保存数据3.6 爬取当当网数据 3.6.1 创建项目 【1、创建项目】: scrapy startproject scrapy_dangdang_095【2、创建爬虫文件】 cd scrapy_dangdang_095\scrapy_dangdang_095\spiders scrapy ge…...
达芬奇预设:复古16mm胶片质感老式电影放映机转场过渡+音效
达芬奇预设:复古16mm胶片质感老式电影放映机转场过渡音效 特征: DaVinci Resolve 宏 8 过渡 幻灯片投影仪效果 可在任何帧速率和分辨率下工作 教程包括 系统要求: 达芬奇 Resolve 18.0...
Spring MVC 的请求处理流程是怎样的?
Spring MVC 请求处理流程的大致可分为以下几个步骤: 1. 请求到达 DispatcherServlet: 所有请求首先到达 DispatcherServlet(前端控制器)。DispatcherServlet 是 Spring MVC 的核心,它负责接收请求,并将请求委派给其他…...
PyTorch 实现图像版多头注意力(Multi-Head Attention)和自注意力(Self-Attention)
本文提供一个适用于图像输入的多头注意力机制(Multi-Head Attention)PyTorch 实现,适用于 ViT、MAE 等视觉 Transformer 中的注意力计算。 模块说明 输入支持图像格式 (B, C, H, W)内部转换为序列 (B, N, C),其中 N H * W多头注…...
STM32单片机入门学习——第17节: [6-5] TIM输入捕获
写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难,但我还是想去做! 本文写于:2025.04.06 STM32开发板学习——第17节: [6-5] TIM输入捕获 前言开发板说明引用解答和科普一…...
P8819 [CSP-S 2022] 星战 Solution
Preface 不可以,总司令 的来源. Description 给定一张 n n n 点 m m m 边的有向图 G G G,有 q q q 次操作分四种: 1 u v:使边 u → v u\to v u→v 失活.2 u:使点 u u u 的所有入边失活.3 u v:使边…...
【spring02】Spring 管理 Bean-IOC,基于 XML 配置 bean
文章目录 🌍一. bean 创建顺序🌍二. bean 对象的单例和多例❄️1. 机制❄️2. 使用细节 🌍三. bean 的生命周期🌍四. 配置 bean 的后置处理器 【这个比较难】🌍五. 通过属性文件给 bean 注入值🌍六. 基于 X…...
Llama 4架构解析与本地部署指南:MoE模型在170亿参数下的效率突破
Meta最新发布的Llama 4系列标志着开源大语言模型(LLM)的重大演进,其采用的混合专家(MoE)架构尤为引人注目。 两大核心模型——Llama 4 Scout(170亿参数含16专家)和Llama 4 Maverick(170亿参数含128专家)——展现了Meta向高效能AI模型的战略转型,这些模型在挑战传统扩…...
`docker run --restart no,always,on-failure,unless-stopped`笔记250406
docker run --restart no,always,on-failure,unless-stopped 笔记250406 docker run --restart 用于配置容器的自动重启策略,当容器意外退出时,Docker 会根据策略自动重新启动容器。这是确保服务高可用的重要参数。 语法 docker run --restart <策略…...
stl的VS的string的内部实现,引用计数的写实拷贝,编码
本章目标 1.stl的vs的string的内部实现 2.引用计数的写实拷贝 3.编码 1.stl的string的内部实现 我们先来看一个例子 string s1; cout<<sizeof(s1)<<endl;我们知道类的内存管理也是遵循内存对齐的规则的. 我们假设当前机器的环境是32位的.string类的内部有三个成…...
Docker 从入门到进阶 (Win 环境) + Docker 常用命令
目录 引言 一、准备工作 1.1 系统要求 1.2 启用虚拟化 二、安装Docker 2.1 安装WSL 2 2.2 安装Docker Desktop 2.3检查是否安装成功 三、配置Docker 3.1 打开Docker配置中心 四、下载和管理Docker镜像 4.1 拉取镜像 4.2 查看已下载的镜像 4.3 运行容器 4.4 查看正…...
C# Winform 入门(12)之制作简单的倒计时
倒计时效果展示 控件展示 以下均是使用label来形成的 label 的 BorderStyle:Fixed3D ForeColor:Red Blackground:Black label 的属性 Name: txtyear txtmonth txtday txttime txtweek txtDays txtHour txtM…...
基于springboot+vue的漫画天堂网
开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:…...
leetcode每日一题:最大整除子集
题目 368. 最大整除子集 给你一个由 无重复 正整数组成的集合 nums ,请你找出并返回其中最大的整除子集 answer ,子集中每一元素对 (answer[i], answer[j]) 都应当满足: answer[i] % answer[j] 0 ,或 answer[j] % answer[i] …...
【Unity】animator检测某state动画播放完毕方法
博主对动画系统很不熟,可能使用的方法比较曲折,但是我确实没找到更有效的方法了。 unity的这个animator在我看来简直有毛病啊,为什么那么难以获取某状态动画的信息呢??? 想要知道动画播完没有只有用norma…...
玄机-应急响应-webshell查杀
题目要求: 要求获取四个flag webshell查杀: 常见的webshell: PHP: eval(), system(), exec(), shell_exec(), passthru(), assert(), base64_decode() ASP: Execute(), Eval(), CreateObject() JSP: Runtime.getRuntime().exec() websh…...
小菜Go:Ubuntu下Go语言开发环境搭建
前置要求Ubuntu环境搭建 文章推荐 此处推荐一个比较好的文章,基本按部就班就欧克~ 安装虚拟机(VMware)保姆级教程(附安装包)_vmware虚拟机-CSDN博客 安装可能遇到的问题 虚拟机安装遇到的问题如:Exception…...
多功能指示牌是否支持多语言交互?
嘿,朋友们!你们知道吗?叁仟多功能指示牌在多语言交互方面可太厉害了,下面就为大家热情介绍一些常见的实现方式和相关说明哦! 显示多语言文字:哇哦,在众多国际化的超棒场所,像那充满…...
2025ArkTS语言开发入门之前言
2025ArkTS语言开发入门之前言(一) 引言 要想学好一门语言,必先会下载对应的编辑器/集成开发环境,ArkTS也是如此,下面我带着大家去下载并安装ArkTS语言的集成开发环境——Dev Eco Studio。 下载 来到华为开发者联盟…...
Python高级爬虫+安卓逆向1.1-搭建Python开发环境
目录 引言: 1.1.1 为什么要安装Python? 1.1.2 下载Python解释器 1.1.3 安装Python解释器 1.1.4 测试是否安装成功 1.1.5 跟大神学高级爬虫安卓逆向 引言: 大神薯条老师的高级爬虫安卓逆向教程: 这套爬虫教程会系统讲解爬虫的初级&…...