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

07.axios封装实例

一.简易axios封装-获取省份列表

1. 需求:基于 Promise 和 XHR 封装 myAxios 函数,获取省份列表展示到页面

在这里插入图片描述

2. 核心语法:

function myAxios(config) {return new Promise((resolve, reject) => {// XHR 请求// 调用成功/失败的处理程序})
}myAxios({url: '目标资源地址'
}).then(result => {}).catch(error => {})

3. 步骤:

  1. 定义 myAxios 函数,接收配置对象,返回 Promise 对象
  2. 发起 XHR 请求,默认请求方法为 GET
  3. 调用成功/失败的处理程序
  4. 使用 myAxios 函数,获取省份列表展示

4. 核心代码如下:

/*** 目标:封装_简易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', () => {// 3. 调用成功/失败的处理程序if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})
}// 4. 使用myAxios函数,获取省份列表展示
myAxios({url: 'http://hmajax.itheima.net/api/province'
}).then(result => {console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')
}).catch(error => {console.log(error)document.querySelector('.my-p').innerHTML = error.message
})

二.简易axios封装-获取地区列表

1. 需求:

在上个封装的建议 axios 函数基础上,修改代码支持传递查询参数功能

2. 修改步骤:

  1. myAxios 函数调用后,判断 params 选项
  2. 基于 URLSearchParams 转换查询参数字符串
  3. 使用自己封装的 myAxios 函数显示地区列表

3. 核心代码:

function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()// 1. 判断有params选项,携带查询参数if (config.params) {// 2. 使用URLSearchParams转换,并携带到url上const paramsObj = new URLSearchParams(config.params)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()})
}// 3. 使用myAxios函数,获取地区列表
myAxios({url: 'http://hmajax.itheima.net/api/area',params: {pname: '辽宁省',cname: '大连市'}
}).then(result => {console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')
})

三.封装_简易axios-注册用户

1. 需求:

修改 myAxios 函数支持传递请求体数据,完成注册用户功能

2. 修改步骤:

  1. myAxios 函数调用后,判断 data 选项
  2. 转换数据类型,在 send 方法中发送
  3. 使用自己封装的 myAxios 函数完成注册用户功能

3. 核心代码:

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))}})// 1. 判断有data选项,携带请求体if (config.data) {// 2. 转换数据类型,在send中发送const jsonStr = JSON.stringify(config.data)xhr.setRequestHeader('Content-Type', 'application/json')xhr.send(jsonStr)} else {// 如果没有请求体数据,正常的发起请求xhr.send()}})
}document.querySelector('.reg-btn').addEventListener('click', () => {// 3. 使用myAxios函数,完成注册用户myAxios({url: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {username: 'itheima999',password: '666666'}}).then(result => {console.log(result)}).catch(error => {console.dir(error)})
})

小结

1. 自己封装的 myAxios 如何设置默认请求方法 GET?

config.method 判断有值就用,无值用‘GET’方法

2. 外面传入查询参数对象,myAxios 函数内如何转查询参数字符串?

使用 URLSearchParams 对象转换

3. 外面传入 data 选项,myAxios 函数内如何携带请求体参数?

判断外面传入了这个属性,自己转成 JSON 字符串并设置请求头并在 send 方法中携带

相关文章:

07.axios封装实例

一.简易axios封装-获取省份列表 1. 需求&#xff1a;基于 Promise 和 XHR 封装 myAxios 函数&#xff0c;获取省份列表展示到页面 2. 核心语法&#xff1a; function myAxios(config) {return new Promise((resolve, reject) > {// XHR 请求// 调用成功/失败的处理程序}) …...

【Linux】第四十一站:线程控制

一、Linux线程VS进程 1.进程和线程 进程是资源分配的基本单位线程是调度的基本单位线程共享进程数据&#xff0c;但也拥有自己的一部分数据:线程ID一组寄存器&#xff08;上下文&#xff09;栈errno信号屏蔽字调度优先级 2.进程的多个线程共享 同一地址空间,因此Text Segment、…...

ChatGPT提示词工程:prompt和chatbot

ChatGPT Prompt Engineering for Developers 本文是 https://www.deeplearning.ai/short-courses/chatgpt-prompt-engineering-for-developers/ 这门课程的学习笔记。 ChatGPT提示词工程&#xff1a;prompt和chatbot 文章目录 ChatGPT Prompt Engineering for DevelopersWhat …...

java算法

常见的七种查找算法&#xff1a; 数据结构是数据存储的方式&#xff0c;算法是数据计算的方式。所以在开发中&#xff0c;算法和数据结构息息相关。 1. 基本查找 也叫做顺序查找 说明&#xff1a;顺序查找适合于存储结构为数组或者链表。 基本思想&#xff1a;顺序查找也称…...

铭文资产是比特币生态破局者 or 短暂热点?

比特币作为加密货币的鼻祖&#xff0c;一直以来都扮演着数字资产市场的引领者角色。最近几年&#xff0c;随着 BRC20 项目的兴起&#xff0c;我们看到了更多与比特币相互关联的创新。在比特币生态中&#xff0c;BRC20 项目不仅仅是数字资产的代表&#xff0c;更是一种对于区块链…...

Java基础 - 8 - 算法、正则表达式、异常

一. 算法 什么是算法&#xff1f; 解决某个实际问题的过程和方法 学习算法的技巧&#xff1f; 先搞清楚算法的流程&#xff0c;再直接去推敲如何写算法 1.1 排序算法 1.1.1 冒泡排序 每次从数组中找出最大值放在数组的后面去 public class demo {public static void main(S…...

gRPC-第二代rpc服务

在如今云原生技术的大环境下&#xff0c;rpc服务作为最重要的互联网技术&#xff0c;蓬勃发展&#xff0c;诞生了许多知名基于rpc协议的框架&#xff0c;其中就有本文的主角gRPC技术。 一款高性能、开源的通用rpc框架 作者作为一名在JD实习的Cpper&#xff0c;经过一段时间的学…...

Node.js是什么?

概念&#xff1a;Node.js1运行在服务器端的js&#xff0c;用来编写服务器 特点&#xff1a;单线程、异步、非阻塞、统一API 是一个构建在V8引擎之上的js运行环境&#xff0c;它使得js可以运行在浏览器以外的地方&#xff0c;相对于大部分的服务器端语言来说&#xff0c;Node.J…...

java SSM厂房管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM厂房管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S…...

uniapp实现---类似购物车全选

目录 一、实现思路 二、实现步骤 ①view部分展示 ②JavaScript 内容 ③css中样式展示 三、效果展示 四、小结 注意事项 一、实现思路 点击商家复选框&#xff0c;可选中当前商家下的所有商品。点击全选&#xff0c;选中全部商家的商品 添加单个多选框&#xff0c;在将多选…...

Java:List列表去重有序和无序

目录 待去重列表HashSet去重&#xff08;不保证顺序&#xff09;TreeSet去重&#xff08;不保证顺序&#xff09;LinkedHashSet去重(保证顺序)遍历List去重&#xff08;保证顺序&#xff09;Java8中Stream流处理&#xff08;保证顺序&#xff09;参考文章 待去重列表 // 列表 …...

Python绘图-12地理数据可视化

Matplotlib 自 带 4 类别 地理投影&#xff1a; Aitoff, Hammer, Mollweide 及 Lambert 投影&#xff0c;可以 结 合以下四 张 不同 的 图 了解四 种 不同投影 区别 。 12.1Aitoff投影 12.1.1图像呈现 12.1.2绘图代码 import numpy as np # 导入numpy库&#xff0c;用于…...

NineData与OceanBase完成产品兼容认证,共筑企业级数据库新生态

近日&#xff0c;云原生智能数据管理平台 NineData 和北京奥星贝斯科技有限公司的 OceanBase 数据库完成产品兼容互认证。经过严格的联合测试&#xff0c;双方软件完全相互兼容、功能完善、整体运行稳定且性能表现优异。 此次 NineData 与 OceanBase 完成产品兼容认证&#xf…...

旅游专业VR虚拟仿真情景教学实训

一、生动的情景模拟 VR技术能够创建出高度逼真的虚拟环境&#xff0c;使学生能够身临其境地体验旅游场景。无论是古色古香的古代建筑&#xff0c;还是充满异国情调的热带雨林&#xff0c;亦或是繁华的都市风光&#xff0c;VR都能一一呈现。这种沉浸式的体验&#xff0c;使得学…...

解决方案TypeError: string indices must be integers

文章目录 一、现象&#xff1a;二、解决方案 一、现象&#xff1a; PyTorch深度学习框架&#xff0c;运行bert-mini&#xff0c;本地环境是torch1.4-gpu&#xff0c;发现报错显示&#xff1a;TypeError: string indices must be integers 后面报字符问题&#xff0c;百度过找…...

【论文阅读】Segment Anything论文梳理

Abstract 我们介绍了Segment Anything&#xff08;SA&#xff09;项目&#xff1a;新的图像分割任务、模型和数据集。高效的数据循环采集&#xff0c;使我们建立了迄今为止最大的分割数据集&#xff0c;在1100万张图像中&#xff0c;共超过10亿个掩码。 该模型被设计和训练为可…...

接口自动化测试框架搭建:基于python+requests+pytest+allure实现

众所周知&#xff0c;目前市面上大部分的企业实施接口自动化最常用的有两种方式&#xff1a; 1、基于代码类的接口自动化&#xff0c;如&#xff1a; PythonRequestsPytestAllure报告定制 2、基于工具类的接口自动化&#xff0c;如&#xff1a; PostmanNewmanJenkinsGit/svnJme…...

蓝桥杯(3.9)

1210. 连号区间数 蓝桥杯暴力过80% import java.util.Arrays; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int[] res new int[n];int[] copy new int[n];for(int i0;i&…...

万物皆可Find My,伦茨科技ST17H6x芯片赋能产品苹果Find My功能

苹果的Find My功能使得用户可以轻松查找iPhone、Mac、AirPods以及Apple Watch等设备。如今Find My还进入了耳机、充电宝、箱包、电动车、保温杯等多个行业。苹果发布AirTag发布以来&#xff0c;大家都更加注重物品的防丢&#xff0c;苹果的 Find My 就可以查找 iPhone、Mac、Ai…...

UHF无线麦克风方案的特点

U段无线麦克风方案是一种基于UHF频段的无线音频传输技术。相比于传统的VHF频段和2.4GHZ频段&#xff0c;U段频谱资源更为宽阔&#xff0c;信号传输更加稳定可靠。 1.广阔的频谱资源&#xff1a;U段频段通常指450MHZ至900MH之间的频谱范围&#xff0c;相比于VHF频段的100MH至30…...

Mac上从零配置VSCode + CMake + gcc,搞定C++多文件项目(附完整配置流程)

Mac上打造专业级C开发环境&#xff1a;VSCodeCMakegcc全攻略 刚接触Mac开发的C程序员常会遇到一个尴尬问题&#xff1a;系统自带的clang编译器对某些库支持不完善。比如当你兴冲冲想尝试并行计算&#xff0c;在代码里加入#include <omp.h>时&#xff0c;clang会毫不留情地…...

lite-server实战:如何快速搭建Angular项目的热重载开发环境

lite-server实战&#xff1a;如何快速搭建Angular项目的热重载开发环境 【免费下载链接】lite-server Lightweight node server 项目地址: https://gitcode.com/gh_mirrors/li/lite-server 在现代前端开发中&#xff0c;快速的开发反馈循环至关重要。lite-server作为一款…...

用于 VoIP 隐写分析的校准感知跨视图注意力网络

Calibration-Aware Cross-View Attention Network for VoIP Steganalysis 用于 VoIP 隐写分析的校准感知跨视图注意力网络&#xff08;CACVAN&#xff09; PyTorch implementation for VoIP steganalysis in low-bit-rate speech codecs. 1. 项目简介 本仓库开源了本人论文 Ca…...

告别几十个ECU!手把手拆解车身域控制器(附SPC58NH/S32G方案选型指南)

车身域控制器实战指南&#xff1a;从传统ECU到集中式架构的硬件整合 车身电子系统正经历一场从分散到集中的革命。想象一下&#xff0c;一辆现代汽车内部可能分布着上百个独立工作的电子控制单元(ECU)&#xff0c;它们各自为政&#xff0c;通过复杂的线束网络相互连接。这不仅增…...

HAKE模型实战:用极坐标嵌入搞定知识图谱的层级关系预测

HAKE模型实战&#xff1a;极坐标嵌入在知识图谱层级关系预测中的应用 知识图谱作为结构化的人类知识库&#xff0c;在智能搜索、推荐系统和问答系统等领域展现出巨大价值。然而&#xff0c;现实中的知识图谱往往面临数据不完整的问题——大量有效三元组缺失。传统基于规则或统计…...

C#连接OPC UA服务器的三种身份验证方式详解:匿名、用户名密码和证书(附完整代码)

C#连接OPC UA服务器的三种身份验证方式详解&#xff1a;匿名、用户名密码和证书&#xff08;附完整代码&#xff09; 在工业自动化领域&#xff0c;数据安全传输一直是系统集成中的核心挑战。OPC UA作为新一代工业通信标准&#xff0c;其安全机制设计尤为关键。本文将深入解析三…...

从.map文件看透你的STM32程序:一份给嵌入式工程师的‘程序体检报告’解读指南

STM32程序体检报告&#xff1a;用.map文件透视嵌入式系统的健康密码 当你完成一个STM32项目的编译&#xff0c;除了熟悉的.hex或.bin文件&#xff0c;编译器还会生成一份名为.map的"体检报告"。这份看似晦涩的文本文件&#xff0c;实际上是了解程序在芯片内部真实运行…...

SolidWorks参数化设计避坑指南:为什么你的VBA宏跑一次就报错?

SolidWorks参数化设计实战避坑&#xff1a;从VBA宏崩溃到工业级稳定的进阶指南 当你的参数化设计宏第一次成功运行时&#xff0c;那种成就感就像看着亲手组装的机器终于运转起来。但很快&#xff0c;现实会给你当头一棒——第二次运行就报错&#xff0c;第三次直接导致SolidWor…...

AGI记忆遗忘机制比训练更重要:2026奇点大会披露首套可控遗忘算法框架(ForgetNet v1.0),支持GDPR合规级记忆擦除

第一章&#xff1a;2026奇点智能技术大会&#xff1a;AGI与记忆系统 2026奇点智能技术大会(https://ml-summit.org) 本届大会首次将“记忆系统”确立为AGI架构的核心支柱&#xff0c;而非传统意义上的辅助模块。研究者指出&#xff0c;具备可演化、可检索、可因果回溯的长期记…...

从航模到创客:手把手教你用Arduino UNO和好盈40A电调DIY一个小型动力测试台

从航模到创客&#xff1a;用Arduino UNO和好盈40A电调构建专业级动力测试平台 当无刷电机从航模领域走向创客工作台&#xff0c;如何安全高效地测试其性能成为每个硬件爱好者的必修课。本文将带你用Arduino UNO和好盈40A电调打造一个可测量转速、绘制特性曲线、适配多种负载的…...