【ajax核心03】封装底层axios函数
目录
一:步骤总结
二:获取数据需求:
三:查找数据需求:
四:发送数据需求:
一:步骤总结
- 定义myAxios函数,接收配置对象,返回Promise对象
- 发送XHR请求,设置默认请求方式为GET
- 调用成功/失败处理程序
- 使用myAxios函数,获取数据
function myAxios(config){return new Promise((resolve,reject)=>{//XHR请求//调用成功/失败的处理程序})
}
myAxios({
}).then(result=>{}).catch(error=>{})
其实底层部分源码框架是这样的,只不过不同的需求,往函数中传入的配置对象有些许不同
二:获取数据需求:
/**
* 目标:封装_简易axios函数_获取省份列表
* 1. 定义myAxios函数,接收配置对象,返回Promise对象
* 2. 发起XHR请求,默认请求方法为GET
* 3. 调用成功/失败的处理程序
* 4. 使用myAxios函数,获取省份列表展示
*/
//* 1. 定义myAxios函数,接收配置对象,返回Promise对象function myAxios(config) {return new Promise((resolve, reject) => {//* 2. 发起XHR请求,默认请求方法为GETconst xhr = new XMLHttpRequest()xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})}//* 3. 调用成功/失败的处理程序myAxios({url: 'https://hmajax.itheima.net/api/province1',}).then(//* 4. 使用myAxios函数,获取省份列表展示result => {console.log(result);document.body.innerHTML = result.list.join('<br>')}).catch(error => {document.body.innerHTML = error.message})
三:查找数据需求:
/**
* 目标:封装_简易axios函数_获取地区列表
* 1. 判断有params选项,携带查询参数(核心)
* 2. 使用URLSearchParams转换,并携带到url上(核心)
* 3. 使用myAxios函数,获取地区列表
*/
function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()if (config.params) {//核心// 2.使用URLSearchParams,将传参对象中的params查询对象进行转化,并携带到url上const paramsObj = new URLSearchParams(config.params)console.log(paramsObj);const queryString = paramsObj.toString()//把查询字符串拼接在url?后面config.url += `?${queryString}`//核心}xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})}myAxios({url: "https://hmajax.itheima.net/api/area",params: {pname: "辽宁省",cname: '大连市'}}).then(result => {console.log(result);document.body.innerHTML = result.list.join('<br>')})
四:发送数据需求:
/**
* 目标:封装_简易axios函数_注册用户
* 1. 判断有data选项,携带请求体
* 2. 转换数据类型,在send中发送
* 3. 使用myAxios函数,完成注册用户
*/
function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()if (config.params) {const paramsObj = new URLSearchParams(config.params)const queryString = paramsObj.toString()config.url += `?${queryString}`}xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})//发送数据需求if (config.data) {xhr.setRequestHeader('Content-Type', 'application/json')//2.转换数据类型,将data中的对象转换为json字符串,在send中发送const jsonStr = JSON.stringify(config.data)xhr.send(jsonStr)} else {xhr.send()}})}
//发送数据需求document.querySelector('.reg-btn').addEventListener('click', () => {myAxios({url: 'https://hmajax.itheima.net/api/register',method: 'post',data: {username: 'itheima9999',password: '123456'}}).then(result => {console.log(result);}).catch(error => {console.log(error);})})
相关文章:
【ajax核心03】封装底层axios函数
目录 一:步骤总结 二:获取数据需求: 三:查找数据需求: 四:发送数据需求: 一:步骤总结 定义myAxios函数,接收配置对象,返回Promise对象发送XHR请求&#…...
python科学计算
文章目录 一、科学计算介绍二、NumPy2.1、NumPy是什么2.2、NumPy使用场景2.3、NumPy特点2.4、NumPy如何使用 三、数组3.1、数组介绍3.2、创建数组3.3、数组的大小3.4、通过索引访问数组3.5、变换数组的形态3.6、常用的ufunc运算 一、科学计算介绍 python语言提供了array模块&am…...
Leetcode - 132双周赛
目录 一、3174. 清除数字 二、3175. 找到连续赢 K 场比赛的第一位玩家 三、3176. 求出最长好子序列 I 四、3177. 求出最长好子序列 II 一、3174. 清除数字 本题可以使用栈来模拟,遇到数字弹出栈顶元素,遇到字母入栈。 代码如下: //使用字…...
Mongodb在UPDATE操作中使用$push向数组中插入数据
学习mongodb,体会mongodb的每一个使用细节,欢迎阅读威赞的文章。这是威赞发布的第69篇mongodb技术文章,欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题,欢迎在文章下面点个赞,或者关…...
ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 锐化效果
ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 锐化效果 核心代码完整代码在线示例ArcGIS Maps SDK for JavaScript 从 4.29 开始增加 RenderNode 类,可以添加数据以及操作 FBO(ManagedFBO); 通过操作 FBO,可以通过后处理实现很多效果,官方提供了几个示例,…...
信息系统项目管理师 | 信息系统安全技术
关注WX:CodingTechWork 信息安全概念 安全属性 秘密性:信息不被未授权者知晓。完整性:信息是正确的、真实的、未被篡改的、完整无缺。可用性:信息可以随时正常使用。 安全分层 设备安全 设备的稳定性:在一定时间…...
Java数据类型与运算符
1. 变量和类型 变量指的是程序运行时可变的量,相当于开辟一块空间来保存一些数据。 类型则是对变量的种类进行了划分,不同类型的变量具有不同的特性。 1.1 整型变量(重点) 基本语法格式: int 变量名 初始值;代码示…...
网络虚拟化考题
vrrp讲过吗??? d 每一层都是什么设备啊 abcd 为啥流量不可控不可视 c是啥意思 讲过吗 abc aNET网络虚拟化是啥啊 为啥?? 啥是CDN?????...
《C++ Primer》导学系列:第 7 章 - 类
7.1 定义抽象数据类型 7.1.1 类的基本概念 在C中,类是用户定义的类型,提供了一种将数据和操作这些数据的函数(成员函数)组合在一起的方法。类定义了对象的属性和行为,通过实例化类来创建对象。 7.1.2 定义类 定义类…...
idea intellij 2023打开微服务项目部分module未在左侧项目目录展示(如何重新自动加载所有maven项目model)
项目场景: springcloud微服务项目,部分模块暂时不需要用到,就在pom.xml文件中注释掉相应的模块,突然有一天打开项目,部分项目module 在idea intellij工具左侧文件夹找不到了,重新file->open本地项目也还是部分模块…...
生成视频 zeroscope_v2_576w 学习笔记
目录 生成视频代码: 维度报错: 解决方法,修改代码: 已开源: 视频生成模型 Zeroscope开源 免费无水印 视频生成模型 Zeroscope_v2_576w 开源 - 腾讯云开发者社区-腾讯云 生成视频代码: import torch fro…...
H3C综合实验
实验拓扑 实验要求 1、按照图示配置IP地址 2、sw1和sw2之间的直连链路配置链路聚合 3、 公司内部业务网段为VLAN10和VLAN20; VLAN 10是市场部,vlan20是技术部,要求对VLAN进行命名以便识别;PC1属于vlan10,PC2属于vlan20…...
QThread 与QObject::moveToThread在UI中的应用
1. QThread的两种用法 第一种用法就是继承QThread,然后覆写 virtual void run(), 这种用法的缺点是不能利用信号槽机制。 第二种用法就是创建一个线程,创建一个对象,再将对象moveToThread, 这种可以充分利用信号槽机制ÿ…...
安卓逆向案例——X酷APP逆向分析
X酷APP逆向分析 这里介绍一下两种不同的挂载证书的方法。 chls.pro/ssl无法在浏览器中下载证书是什么原因解决方法: 法一 1. 挂载系统分区为读写 使用正确的挂载点来挂载系统分区为读写: su mount -o remount,rw /dev/uijISjR/.magisk/block/syste…...
创新案例|星巴克中国市场创新之路: 2025目标9000家店的挑战与策略
星巴克创始人霍华德舒尔茨:“为迎接中国市场的全面消费复苏,星巴克2025年推进9000家门店计划,将外卖、电商以及家享和外出场景咖啡业务纳入中国新一轮增长计划中。”在面临中国市场同店增长大幅下滑29%背景下,星巴克通过DTC用户体…...
计算机网络 MAC地址表管理
一、理论知识 1.MAC地址表:交换机使用MAC地址表来记录各MAC地址对应的端口,用于帧转发的目的。 2.老化机制:交换机会为每一条MAC地址表项设置老化时间,老化时间到期后未收到该MAC地址报文的表项将被删除,释放资源。 …...
【免费API推荐】:各类API资源免费获取【11】
欢迎来到各类API资源的免费获取世界!幂简集成为您提供了一个集合了各种免费API接口的平台。无论您是开发者、数据分析师还是创业者,都可以通过我们的平台轻松免费获取所需的API资源。幂简精心整理了各类API接口,涵盖了不同领域的需求…...
技术驱动会展:展位导航系统的架构与实现
随着会展行业的快速发展,大型会展中心面临着如何提升参展者体验、提高招商效率的挑战。针对客户反馈的展馆面积大、展位查找困难等问题,维小帮提出一套智慧会展导航解决方案,旨在通过先进的室内导航技术提升会展中心的运营效率和参展者的满意…...
适用于轨道交通专用的板卡式网管型工业以太网交换机
是网管型 CompactPCI板卡式冗余环网交换机。前面板带有6个 10/100/1000Base-T(X)M12接口。后面的CPCI接口有 8个10/100/1000Base-T (X) 以太网接口。 是特别为轨道交通行业EN50155标准要求而设计的坚固型交换机。它同时具有以下特性: ● 支持2线以太网距离扩展端口&…...
excel基本操作
excel 若要取消在数据表中进行的所有筛选 步骤操作: 单击“数据”选项卡。在“排序和筛选”组中,找到“清除”按钮。点击“清除”按钮。 图例: 将文本文件的数据导入到Excel工作表中进行数据处理 步骤: 在Excel中,…...
C++系统相关操作2 - 获取系统环境变量
1. 关键词2. sysutil.h3. sysutil.cpp4. 测试代码5. 运行结果6. 源码地址 1. 关键词 C 系统调用 环境变量 getenv 跨平台 2. sysutil.h #pragma once#include <cstdint> #include <string>namespace cutl {/*** brief Get an environment variable.** param na…...
适合小白学习的项目1906java Web智慧食堂管理系统idea开发mysql数据库web结构java编程计算机网页源码servlet项目
一、源码特点 java Web智慧食堂管理系统是一套完善的信息管理系统,结合java 开发技术和bootstrap完成本系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 前段主要技术 bootstra…...
AI通用大模型不及垂直大模型?各有各的好
AI时代,通用大模型和垂直大模型,两者孰优孰劣,一直众说纷纭。 通用大模型,聚焦基础层,如ChatGPT、百度文心一言,科大讯飞星火大模型等,都归属通用大模型,它们可以解答…...
农产品价格信息系统小程序
一键掌握市场脉动 🌾 引言:为何关注农产品价格? 在当今社会,农产品价格的波动直接关系到农民的收入和消费者的生活成本。因此,及时、准确地掌握农产品价格信息,对于农民合理安排生产、消费者做出购买决策都…...
【LLM-多模态】高效多模态大型语言模型综述
一、结论写在前面 模型规模的庞大及训练和推理成本的高昂,限制了MLLMs在学术界和工业界的广泛应用。因此,研究高效轻量级的MLLMs具有巨大潜力,特别是在边缘计算场景中。 论文深入探讨了高效MLLM文献的领域,提供了一个全面的视角…...
ASP .Net Core创建一个httppost请求并添加证书
ASP .Net Core创建一个httppost请求并添加证书 创建.net Core程序,使用自签名证书,可以处理https的get和post请求。 创建证书 创建自签名证书的流程可以在这里查看: https://blog.csdn.net/GoodCooking/article/details/139815278创建完毕…...
Redis入门篇
目录 传送门一、前言二、NoSQL1、ont only sql,特点:2、NoSQL的四大分类: 三、Redis概念四、五大数据类型: 传送门 SpringMVC的源码解析(精品) Spring6的源码解析(精品) SpringBoot3框架&#…...
变电站智能巡检机器人解决方案
我国拥有庞大的电网体系,变电站数量众多,且近年来快速增长。然而目前我国变电站巡检方式仍以人工为主,存在效率低下、监控不全面等问题。变电站通常是一个封闭的系统空间,设备种类繁多、占地面积广阔,这对巡检人员实时…...
Linux Kernel入门到精通系列讲解(QEMU-虚拟化篇) 2.5 Qemu实现RTC设备
1. 概述 上一章节起(5.4小节),我们已经把整个Naruto Pi都跑通了,从BL0到kernel再到Rootfs都通了,目前可以说已经具备学习Linux得基础条件,剩下得都只是添砖加瓦,本小节我们将添加RTC,如果你还没有添加RTC,你可以试试不添加RTC时,Linux的时间戳会很奇怪,加了RTC后,…...
【自动驾驶】通过下位机发送的加速度、角速度计算机器人在世界坐标系中的姿态
文章目录 原始代码全局变量定义逆平方根函数四元数解算函数理论解释四元数加速度计数据归一化计算方向余弦矩阵的第三行计算误差计算并应用积分反馈应用比例反馈积分陀螺仪数据,更新四元数归一化四元数更新姿态数据整体流程原始代码 #define SAMPLING_FREQ 20.0f // 采样频率…...
Python 设计模式(第2版) -- 第四部分(其他设计模式)
Python 设计模式(第2版) 最后介绍下其他设计模式。 模型—视图—控制器(MVC)-- 复合模式 根据 GoF 的定义,“复合模式将两个或更多模式组合成解决常见或普遍性问题的解决方案”。复合模式不是同时使用的一组模式,而是一个问题的…...
gitlab升级16.11.3-ee
背景 这是事后一段时间补充记录的博客。 升级目的:修补漏洞CVE-2024-4835 未经认证的威胁攻击者能够利用该漏洞在跨站脚本 (XSS) 攻击中,轻松接管受害者账户。 gitlab版本为14.6.2-ee升级至16.11.3-ee 思路 翻阅文档找升级方法及升级版本路径。使用…...
剑指offer 算法题(搜索二维矩阵)
剑指offer 第二题 去力扣里测试算法 思路一: 直接暴力遍历二维数组。 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {for (unsigned int i{ 0 }; i < matrix.size(); i){for (unsigned int j{ 0 };…...
SaaS平台数据对接为什么要选择API对接?
SaaS平台数据对接是指将一个或多个SaaS平台中的数据集成到其他应用或平台中的过程。在当前的数字化时代,企业越来越倾向于使用SaaS平台来管理他们的业务和数据。然而,这些数据通常散布在不同的SaaS平台中,这对于企业数据的整合和分析来说可能…...
力扣136. 只出现一次的数字
Problem: 136. 只出现一次的数字 文章目录 题目描述思路复杂度Code 题目描述 思路 由于题目要求使用线性时间复杂度和常量级的空间复杂度,再加上找重复元素这个特性,我们可以想到使用位运算来求解: 1.任何数与其本身异或得0,任何…...
重学java 74.Lombok的使用
少点心气,多点干劲 —— 24.6.18 一、lombok的安装使用 1.作用: 简化javabean开发 2.使用: a.下插件 ->如果是idea2022不用下载了,自带 b.导lombok的jar包 安装教程: http://t.csdnimg.cn/wq9MM c.修改设置 二、lombok的介绍 Lombok通过增加一…...
数据结构6---树
一、定义 树(Tree)是n(n>0)个结点的有限集。当n0时成为空树,在任意一棵非空树中: 1、有且仅有一个特定的称为根(Root)的结点; 2、当n>1时,其余结点可分为m(m>日)个互不相交的有限集T1、T2、...、 Tm,其中每一个集合本身又是一棵树,并且称为根的…...
一键制作,打造高质量的数字刊物
随着数字化时代的到来,数字刊物已经成为信息传播的重要载体。它以便捷、环保、互动性强等特点,受到了越来越多人的青睐。然而,如何快速、高效地制作出高质量的数字刊物,成为许多创作者面临的难题。今天,教大家一个制作…...
Java面试题:对比继承Thread类和实现Runnable接口两种创建线程的方法,以及它们的优缺点
Java 中创建线程有两种主要的方法:继承 Thread 类和实现 Runnable 接口。下面我将分别介绍这两种方法,并对比它们的优缺点。 继承 Thread 类 方法: 创建一个继承自 Thread 的子类。重写 Thread 类的 run 方法。创建子类的实例并调用 start…...
编译原理-各章典型题型+思路求解
第2章文法和语言习题 基础知识: 思路: 基础知识: 思路: 基础知识: 编译原理之 短语&直接短语&句柄 定义与区分_编译原理短语,直接短语,句柄-CSDN博客 思路: 题目: 基础解释:…...
【绝对有用】C++ vector排序
在 C 中,有多种方法可以对向量(即 std::vector)进行排序。最常用的方法是使用标准库中的 std::sort 函数。以下是一些例子: 使用 std::sort 函数 std::sort 函数是标准库 <algorithm> 中的一个函数,可以对向量…...
linux——VScode安装
方法一:使用snap一键安装 Snap Store 是 Ubuntu、Debian、Fedora 和其他几个 Linux 发行版中的一个应用商店,提供了数千个应用程序和工具的安装。Snap Store 使用 Snap 包格式,这是一种通用的 Linux 软件包格式,使得在不同的 Lin…...
X-LoRA:高效微调 LoRA 系列,实现不同领域知识专家混合模型
📜 文献卡 X-LoRA: Mixture of Low-Rank Adapter Experts, a Flexible Framework for Large Language Models with Applications in Protein Mechanics and Molecular Design作者: Eric L. Buehler; Markus J. BuehlerDOI: 10.48550/arXiv.2402.07148摘要:We report…...
基于卷积神经网络的目标检测
卷积神经网络基础知识 1.什么是filter 通常一个6x6的灰度图像,构造一个3*3的矩阵,在卷积神经网络中称之为filter,对6x6的图像进行卷积运算。 2.什么是padding 假设输出图像大小为nn与过滤器大小为ff,输出图像大小则为(n−f1)∗(…...
Mysqld数据库管理
一.Mysqld数据库类型 常用的数据类型 int 整型 无符号[0-4294967296(2的32次方)-1],有符号[-2147483648(2的31次方)-2147483647]float单精度浮点 4字节32位double双精度浮点 8字节64位char固定长度的字符类型…...
Wifi通信协议:WEP,WPA,WPA2,WPA3,WPS
前言 无线安全性是保护互联网安全的重要因素。连接到安全性低的无线网络可能会带来安全风险,包括数据泄露、账号被盗以及恶意软件的安装。因此,利用合适的Wi-Fi安全措施是非常重要的,了解WEP、WPA、WPA2和WPA3等各种无线加密标准的区别也是至…...
开源【汇总】
开源【汇总】 前言版权推荐开源【汇总】最后 前言 先占个位 2024-6-21 21:29:33 以下内容源自《【创作模板】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话 本文首次发布于CSDN平台 作者是CSDN日星月云 博客主页是https://jsss-1.blog.csdn.net 禁止其他平台发…...
英文字母表
目录 一 设计原型 二 后台源码 一 设计原型 二 后台源码 namespace 英文字母表 {public partial class Form1 : Form{public Form1(){InitializeComponent();}private void Form1_Load(object sender, EventArgs e){foreach (var item in panel1.Controls){if (item ! null)…...
Redis缓存穿透
缓存穿透: 查询一个不存在的数据,mysql查询不到数据也不会直接写入缓存,就会导致每次请求都查数据库。 方法一: 方法二: 布隆过滤器: 简单来说就是一个二进制数组,用0和1来判断数组中是否存在…...
SHELL脚本学习(十一)正则表达式
一、锚点字符 1.1 锚点行首 脱字符(^)指出行首位置 $ cat < file1 test line1 test line2 test line3 line4 test#打印所有包括文本 test的行 $ sed -n /test/p file1 test line1 test line2 test line3 line4 test#打印所有以test为首的行 $ sed -n /^test/p file1 test…...