XMLHttpRequest与Axios详解

 XMLHttpRequest发送请求

在JavaScript中，使用XMLHttpRequest()发送多个参数通常涉及到设置HTTP请求的Content-Type头部，并且将参数作为请求体的一部分发送。以下是一个示例，展示了如何发送包含多个参数的POST请求：

var xhr = new XMLHttpRequest();
var url = "your_endpoint_url";xhr.open("POST", url, true);// 设置请求头部，指定内容类型为表单数据
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// 构建参数字符串
var params = "param1=value1&param2=value2&param3=value3";// 发送请求
xhr.send(params);xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {// 请求成功console.log(xhr.responseText);}
};-----------------------------------------------------------------//发送JSON类型数据
// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();// 配置请求类型、URL 以及是否异步处理POST!!!!!
xhr.open('POST', 'your_server_endpoint', true);// 设置请求头，告知服务器内容类型是 JSON
xhr.setRequestHeader('Content-Type', 'application/json');// 定义发送数据到服务器的 success 函数
xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE) {if (xhr.status === 200) {// 请求成功console.log(xhr.responseText);} else {// 请求出错console.error('Error: ' + xhr.status);}}
};// 创建要发送的 JSON 数据字符串
var jsonData = JSON.stringify({key1: 'value1',key2: 'value2'
});// 发送 JSON 数据
xhr.send(jsonData);

在这个例子中，我们使用x-www-form-urlencoded内容类型，这是一种常见的Web表单数据编码格式。每对键值由&字符分隔，并且使用=字符分隔键和值。这种格式适用于大多数后端服务器语言，如PHP、Python、Ruby等。如果你需要发送JSON数据，可以将内容类型设置为application/json，(POST请求)并相应地序列化你的数据为JSON字符串。

 axios发送请求

Axios 是一个基于 promise (Promise其实也不难-CSDN博客)的 HTTP 库，可以在浏览器和 node.js 中使用

// 发送 GET 请求
axios.get('https://api.example.com/data').then(response => {console.log(response.data);}).catch(error => {console.error(error);});// 发送 POST 请求
axios.post('https://api.example.com/data', {key1: 'value1',key2: 'value2'
})
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});-------------------------------------------------
//可选配置
const config = {headers: {'Authorization': 'Bearer your-token'}
};
axios.get('https://api.example.com/data', config);--------------------------------------------------
//并发请求
axios.all([axios.get('https://api.example.com/data1'),axios.get('https://api.example.com/data2')
]).then(axios.spread((response1, response2) => {// 处理两个响应
}));-------------------------------------------------
//axios拦截器
// 添加请求拦截器
axios.interceptors.request.use(config => {// 在发送请求之前做些什么return config;
}, error => {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
axios.interceptors.response.use(response => {// 对响应数据做点什么return response;
}, error => {// 对响应错误做点什么return Promise.reject(error);
});
import axios from 'axios'
import { Notification, MessageBox, Message, Loading } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from "@/utils/ruoyi";
import cache from '@/plugins/cache'
import { saveAs } from 'file-saver'
import qs from 'qs'let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = { show: false };// axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 对应国际化资源文件后缀
axios.defaults.headers['Content-Language'] = 'zh_CN'
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: process.env.VUE_APP_BASE_API,// 超时timeout: 100000
})// request拦截器
service.interceptors.request.use(config => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === false//此处以下为重点//headers中的content-type 默认的大多数情况是  application/json，就是json序列化的格式config.headers['Content-Type'] = 'application/json'//为了判断是否为formdata格式，增加了一个变量为type,如果type存在，而且是form的话，则代表是formData的格式if (config.type && config.type === 'form') {config.headers['Content-Type'] = 'application/x-www-form-urlencoded'//data是接收的数据，接收的数据需要通过qs编码才可以直接使用if (config.data) {config.data = qs.stringify(config.data)}}// 是否需要防止数据重复提交const isRepeatSubmit = (config.headers || {}).repeatSubmit === falseif (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改}// get请求映射params参数if (config.method === 'get' && config.params) {let url = config.url + '?' + tansParams(config.params);url = url.slice(0, -1);config.params = {};config.url = url;}if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {const requestObj = {url: config.url,data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,time: new Date().getTime()}const sessionObj = cache.session.getJSON('sessionObj')if (sessionObj === undefined || sessionObj === null || sessionObj === '') {cache.session.setJSON('sessionObj', requestObj)} else {const s_url = sessionObj.url;                  // 请求地址const s_data = sessionObj.data;                // 请求数据const s_time = sessionObj.time;                // 请求时间const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {const message = '数据正在处理，请勿重复提交';console.warn(`[${s_url}]: ` + message)return Promise.reject(new Error(message))} else {cache.session.setJSON('sessionObj', requestObj)}}}return config
}, error => {console.log(error)Promise.reject(error)
})// 响应拦截器
service.interceptors.response.use(res => {// 未设置状态码则默认成功状态const code = res.data.code || 200;// 获取错误信息const msg = errorCode[code] || res.data.msg || errorCode['default']// 二进制数据则直接返回if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {return res.data}if (code === 401) {if (!isRelogin.show) {isRelogin.show = true;MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {isRelogin.show = false;store.dispatch('LogOut').then(() => {location.href = process.env.VUE_APP_CONTEXT_PATH + "index";})}).catch(() => {isRelogin.show = false;});}return Promise.reject('无效的会话，或者会话已过期，请重新登录。')} // else if (code === 500) {//   Message({ message: msg, type: 'error' })//redis错误，待解决//   return Promise.reject(new Error(msg))// } else if (code === 601) {Message({ message: msg, type: 'warning' })return Promise.reject('error')} else if (code !== 200) {Notification.error({ title: msg })return Promise.reject('error')} else {return res.data}},error => {console.log('err' + error)let { message } = error;if (message == "Network Error") {message = "后端接口连接异常";} else if (message.includes("timeout")) {message = "系统接口请求超时";} else if (message.includes("Request failed with status code")) {message = "系统接口" + message.substr(message.length - 3) + "异常";}Message({ message: message, type: 'error', duration: 5 * 1000 })return Promise.reject(error)}
)// 通用下载方法
export function download(url, params, filename, config) {downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })return service.post(url, params, {transformRequest: [(params) => { return tansParams(params) }],headers: { 'Content-Type': 'application/x-www-form-urlencoded' },responseType: 'blob',...config}).then(async (data) => {const isBlob = blobValidate(data);if (isBlob) {const blob = new Blob([data])saveAs(blob, filename)} else {const resText = await data.text();const rspObj = JSON.parse(resText);const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']Message.error(errMsg);}downloadLoadingInstance.close();}).catch((r) => {console.error(r)Message.error('下载文件出现错误，请联系管理员！')downloadLoadingInstance.close();})
}export default service

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/10129.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Paddle 实现DCGAN

Paddle 实现DCGAN

传统GAN 传统的GAN可以看我的这篇文章&#xff1a;Paddle 基于ANN&#xff08;全连接神经网络&#xff09;的GAN&#xff08;生成对抗网络&#xff09;实现-CSDN博客 DCGAN DCGAN是适用于图像生成的GAN&#xff0c;它的特点是&#xff1a; 只采用卷积层和转置卷积层&#x…
阅读更多...
nvm切换node版本命令

nvm切换node版本命令

nvm切换node版本命令 使用 nvm 切换 Node.js 版本的命令如下&#xff1a;12 查看 nvm 支持安装的 Node 版本。进入命令行界面&#xff0c;输入 nvm list available&#xff0c;这会显示可以安装的 Node.js 版本。安装指定版本的 Node.js。输入 nvm install <版本号>&…
阅读更多...
优先队列——大小堆—— priority_queue

优先队列——大小堆—— priority_queue

本人博客主页 本篇博客相关博客 二叉树--讲解 文章目录 目录 文章目录 前言 一、priority_queue是什么&#xff1f; 二、priority_queue的使用 1、相关函数 2、代码使用 3、堆的插入删除 三、模拟实现 1、大框架 2、仿函数 3、向下调整 4、向下调整 总结 前言 在我们学习二叉…
阅读更多...
免费SSL证书怎么签发

免费SSL证书怎么签发

大家都知道SSL证书好&#xff0c;作用大&#xff0c;安全性高&#xff0c;能加权重&#xff0c;等保必须的参考值。但是如何选择合适且正确的证书也是至关重要的&#xff0c;网站更适合单域名证书、多域名证书、泛域名证书、还是多域名通配符证书。 首先大家要清楚&#xff0c…
阅读更多...
网站访问提示不安全怎么办？？

网站访问提示不安全怎么办？？

当网站访问时提示“不安全”&#xff0c;这通常与网站的SSL证书有关&#xff0c;或者是网站本身存在一些安全风险。以下是一些解决步骤和建议&#xff1a; 1、检查URL前缀&#xff1a;首先&#xff0c;检查URL是否以https://开头。如果仍然是http://&#xff0c;则网站没有使用…
阅读更多...
python 新特性

python 新特性

文章目录 formatted字符串字面值formatted字符串支持 字符串新方法变量类型标注二进制表示中数字为1的数量统计字典的三个方法新增mapping属性函数zip()新增strict参数dataclass字典合并match 语法 formatted字符串字面值 formatted字符串是带有’f’字符前缀的字符串&#xf…
阅读更多...
HashMap在JDK1.8的优化

HashMap在JDK1.8的优化

目录 数据结构上的优化 Hash碰撞问题解决方案的优化 Hash值算法的优化
阅读更多...
我必须要吹一波MATLAB 2024a，太牛逼了！|福利：附安装教程及下载地址

我必须要吹一波MATLAB 2024a，太牛逼了！|福利：附安装教程及下载地址

最近逛MATLAB官网&#xff0c;发现MATLAB 2024a版本已经Pre-release了&#xff0c;翻了下release note&#xff0c;不得不感叹&#xff0c;实在是太强了&#xff01; 这次重点更新了四个工具箱&#xff1a; Computer Vision Toolbox Deep Learning Toolbox Instrument Contro…
阅读更多...
图像下载的新趋势：Kotlin技术探索与实践

图像下载的新趋势：Kotlin技术探索与实践

随着互联网的迅速发展和智能设备的普及&#xff0c;图像下载作为一项重要的技术应用&#xff0c;也在不断演进和创新。在这篇文章中&#xff0c;我们将探讨图像下载的新趋势&#xff0c;并使用Kotlin语言进行实践探索。 引言 图像下载是指从网络上获取图像并保存到本地设备的…
阅读更多...
鸿蒙内核源码分析(文件句柄篇) | 你为什么叫句柄

鸿蒙内核源码分析(文件句柄篇) | 你为什么叫句柄

句柄 | handle int open(const char* pathname,int flags); ssize_t read(int fd, void *buf, size_t count); ssize_t write(int fd, const void *buf, size_t count); int close(int fd);只要写过应用程序代码操作过文件不会陌生这几个函数,文件操作的几个关键步骤嘛,跟把大…
阅读更多...
HashMap扩容机制

HashMap扩容机制

HashMap数组的初始容量16和负载因子为0.75。当HashMap中元素个数超过负载因子loadFactor时就会触发扩容，loadFactor默认大小为0.75，默认情况下数组大小为16，当hashmap中元素个数超过16 * 0.75 = 12时，数组的大小扩展为2 * 16=32 即扩大一倍，新建一个扩容后大小的数组，然后…
阅读更多...
《intel开发手册卷1》学习笔记3

《intel开发手册卷1》学习笔记3

1、数据传输指令 MOV 指令在内存和处理器寄存器之间执行基本的加载数据和存储数据操作&#xff0c;并在寄存器之间执行数据移动操作。MOV 指令不能将数据从一个内存位置移动到另一个内存位置&#xff0c;也不能将数据从一个段寄存器移动到另一个段寄存器。内存到内存的移动使用…
阅读更多...
通过wget下载ftp文件

通过wget下载ftp文件

通过wget下载ftp文件 基础用法带密码的http文件带密码的ftp文件补充 基础用法 在下载的过程中会显示进度条&#xff0c;包含百分比&#xff0c;已下载字节&#xff0c;下载速度&#xff0c;剩余时间。 # 下载单个文件 wget [url_file]# 下载目录全部文件 wget [url_dir/*] wg…
阅读更多...
Linux开发--Bootloader应用分析

Linux开发--Bootloader应用分析

Bootloader应用分析 一个嵌入式 Linux 系统从软件的角度看通常可以分为四个层次&#xff1a; 引导加载程序。包括固化在固件( firmware )中的 boot 代码(可选)&#xff0c;和 Boot Loader 两大部分。 Linux 内核。特定于嵌入式板子的定制内核以及内核的启动参数。 文件系统…
阅读更多...
H264 SP帧等知识笔记

H264 SP帧等知识笔记

H.264是一种广泛使用的视频编码标准&#xff0c;它使用多种类型的帧来实现高效的视频压缩。在H.264中&#xff0c;参考帧和重建帧是两个重要的概念&#xff0c;它们之间既有区别又有联系。 参考帧&#xff1a; 参考帧是用于预测其他帧的帧。在H.264中&#xff0c;编码器会利用…
阅读更多...
大华智能物联综合管理平台 fastjson远程代码执行漏洞复现

大华智能物联综合管理平台 fastjson远程代码执行漏洞复现

0x01 产品简介 大华ICC智能物联综合管理平台对技术组件进行模块化和松耦合，将解决方案分层分级，提高面向智慧物联的数据接入与生态合作能力。 0x02 漏洞概述 由于大华智能物联综合管理平台使用了存在漏洞的FastJson组件,未经身份验证的攻击者可利用 /evo-runs/v1.0/auths/…
阅读更多...
解释Java中的注解（Annotations）及其用途

解释Java中的注解（Annotations）及其用途

Java 注解&#xff08;Annotations&#xff09;是从 Java 5 开始引入的一种元数据形式&#xff0c;它提供了一种将额外信息&#xff08;metadata&#xff09;与代码&#xff08;类、方法、变量等&#xff09;相关联的方法。注解不直接影响代码的操作&#xff0c;但可被编译器、…
阅读更多...
【Qt】界面定制艺术：光标(cursor)、字体(font)、提示(toolTip)、焦点(focusPolicy)与样式表(styleSheet)的深度探索

【Qt】界面定制艺术：光标(cursor)、字体(font)、提示(toolTip)、焦点(focusPolicy)与样式表(styleSheet)的深度探索

文章目录 前言&#xff1a;1. cursor: 设置按钮的光标2. front&#xff1a;设置字体3. toolTip: 鼠标悬停提示4. focusPolicy&#xff1a;设置控件获取到焦点的策略5. styleSheet : 样式表总结&#xff1a; 前言&#xff1a; 在现代软件开发中&#xff0c;用户界面(UI)的设计和…
阅读更多...
【MySQL 数据宝典】【事务锁】- 002 事务控制的演进

【MySQL 数据宝典】【事务锁】- 002 事务控制的演进

一、事务处理思路 1.1 排队 排队处理是事务管理最简单的方法&#xff0c;就是完全顺序执行所有事务的数据库操作&#xff0c;不需要加锁&#xff0c;简单的说就是全局排队。序列化执行所有的事务单元&#xff0c;数据库某个时刻只处理一个事务操作&#xff0c;特点是强一致性…
阅读更多...
Java刷题-基础篇

Java刷题-基础篇

目录 题目1&#xff1a;打印1~100内奇数和、偶数和 题目2&#xff1a;计算5的阶乘 题目3&#xff1a;计算 1!2!3!4!5! 的和 题目4&#xff1a;找1~100之间即能被3整除&#xff0c;又能被5整除的数字&#xff0c;要求必须使用break/continue 题目5&#xff1a;实现猜数字小…
阅读更多...
最新文章

Copyright @ 2022~2023