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

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

相关文章:

XMLHttpRequest与Axios详解

XMLHttpRequest发送请求 在JavaScript中&#xff0c;使用XMLHttpRequest()发送多个参数通常涉及到设置HTTP请求的Content-Type头部&#xff0c;并且将参数作为请求体的一部分发送。以下是一个示例&#xff0c;展示了如何发送包含多个参数的POST请求&#xff1a; var xhr new X…...

【区块链】智能合约简介

智能合约起源 智能合约这个术语至少可以追溯到1995年&#xff0c;是由多产的跨领域法律学者尼克萨博&#xff08;NickSzabo&#xff09;提出来的。他在发表在自己的网站的几篇文章中提到了智能合约的理念。他的定义如下&#xff1a;“一个智能合约是一套以数字形式定义的承诺&a…...

上海市计算机学会竞赛平台2024年1月月赛丙组成绩等第

题目描述 给定一个在 00 到 100100 之间的整数 &#x1d44e;a&#xff0c;请将它转成等第&#xff0c;规则如下&#xff1a; 9090 或以上为 A8080 或以上为 B7070 或以上为 C6060 或以上为 D5959 或以下为 F 输入格式 单个数字表示 &#x1d44e;a 输出格式 单个字符表示…...

【算法入门教育赛2】C.曼哈顿种类 C++题解与代码

比赛地址&#xff1a;https://www.starrycoding.com/contest/6 题目描述 牢 e e e知道在武汉有 n n n家自助店&#xff0c;第 i i i个自助店用坐标 ( x i , y i ) (x_i, y_i) (xi​,yi​)表示&#xff0c;因为武汉的街道都是互相垂直的&#xff0c;现在他想知道所有自助店之间…...

Electron使用 SQLite

在客户端开发中&#xff0c;无论是 PC 端&#xff0c;还是手机端&#xff0c;为了能够访问离线数据&#xff0c;数据经常需要保存到本地&#xff0c;IndexDB 可以用于存储本地数据&#xff0c;IndexDB 是一个对象存储&#xff0c;数据是以 key:value 的形式进行存储和访问的&am…...

怎样的跨网软件,可以实现网间数据的安全收发?

网络隔离已是较为常见的网络安全保护措施&#xff0c;比如防火墙、网闸、VLAN&#xff0c;云桌面虚拟环境等方面进行隔离。像一些科技研发型企业&#xff0c;不仅仅是内外网隔离&#xff0c;甚至还划分办公网、研发网、测试网、生产网等&#xff0c;防止研发资料、设计资料等敏…...

Sora惊艳亮相:AI技术掀起创作革命,影视产业迎来新风貌!

Sora平台近期发布了名为"Sora首次印象"的更新&#xff0c;为用户带来了令人瞩目的变化。该更新不仅展示了Sora平台的发展方向&#xff0c;还介绍了其在电影制作、广告宣传等领域的潜在应用。 同时&#xff0c;Sora的首席执行官Sam Altman与好莱坞影视工作室进行了会…...

Mac电脑安装打开APP显示问题已损坏 问题解决

当MAC电脑安装完软件打开时&#xff0c;显示文件已损坏&#xff0c;无法打开。搜了很多教程终于找到解决方案&#xff0c;记录下方便以后再用。 我的mac电脑是intel芯片的&#xff0c;如果你遇到这个问题&#xff0c;可以参考我的这个方案。 1.首先当打开软件后出现 “xx软件已…...

AI 数据观 | TapData Cloud + MongoDB Atlas:大模型与 RAG 技术有机结合,落地实时工单处理智能化解决方案

本篇为「AI 数据观」系列文章第二弹&#xff0c;在这里&#xff0c;我们将进一步探讨 AI 行业的数据价值。以 RAG 的智能工单应用场景为例&#xff0c;共同探索如何使用 Tapdata Cloud MongoDB Atlas 实现具备实时更新能力的向量数据库&#xff0c;为企业工单处理的智能化和自…...

Vulnhub靶机随笔-Hacksudo_Aliens

Vulnhub靶机Hacksudo_Aliens详解 攻击机Kali IP:192.168.3.44 靶机 IP:未知 系统:未知 A.信息收集 扫描靶机存活性 确定IP地址 1.命令:arp-scan -l 扫描靶机开放端口及其服务版本信息 2.命令 nmap -A -p- -sV 靶机IP地址 靶机开放三个端口,22ssh端口,80web端…...

抖店选品都怎么选品?什么样的产品更吸引人,更具有购买力?

大家好&#xff0c;我是电商花花。 抖店选品一直都是我们无货源商家的核心问题&#xff0c;不管是出单、还是爆单&#xff0c;店铺想要有销量的前提下都是选品。 很多人一上来就是就是选品&#xff0c;没有选品经验还瞎选品&#xff0c;结果到最后选了一堆出单的产品&#xf…...

将来会是Python、Java、Golang三足鼎立吗?

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「 Java的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 软件工程里没有银弹&#xff…...

Java入门基础学习笔记16——运算符

package cn.ensource.operator;public class OperatorDemo1 {public static void main(String[] args) {// 目标&#xff1a;掌握基本的算术运算符的使用int a 10;int b 2;System.out.println(a b);System.out.println(a - b);System.out.println(a * b); // 20System.out.…...

golang中三种线程安全的MAP

一、map 是什么 map 是 Go 中用于存储 key-value 关系数据的数据结构&#xff0c;类似 C 中的 map&#xff0c;Python 中的 dict。Go 中 map 的使用很简单&#xff0c;但是对于初学者&#xff0c;经常会犯两个错误&#xff1a;没有初始化&#xff0c;并发读写。 1、未初始化的…...

C++笔试强训day16

目录 1.字符串替换 2.神奇数 3.DNA序列 1.字符串替换 链接 简单的遍历替换即可&#xff1a; class Solution { public:string formatString(string str, vector<char>& arg) {string ret;int k 0;for (int i 0; i < str.size(); i){if (str[i] %){ret arg…...

spsr 的恢复出错,导致 thumb 指令集的 it 条件运行指令运行异常,清晰的调试思路帮助快速解决问题

记一次调试过程 这是一个在 arm 架构上的 RTOS 上的调试过程。问题现象为使用 thumb 指令集的 libgcc 库的情况下&#xff0c;浮点运算随机出错。经过一番追踪调试&#xff0c;逐步缩小问题范围&#xff0c;最后定位问题&#xff0c;成功解决。 场景 在某款的国产 RTOS 上&a…...

mysql binlog 如何区分db

binlog不是InnoDB存储引擎特有的日志文件&#xff0c;是属于mysql server自己的日志文件。 提交事务的时候&#xff0c;同时会写入binlog 在MySQL中&#xff0c;Binary Log&#xff08;binlog&#xff09;记录了数据库更改操作的所有细节&#xff0c;对于实现数据复制、恢复以…...

ESP32 IDF linux下开发环境搭建

文章目录 介绍升级Python环境下载Python包配置编译环境及安装Python设置环境变量 ESPIDF环境搭建下载esp-idf 代码编译等待下载烧录成功查看串口打印 介绍 esp32 官方文档给的不是特别详细 参考多方资料 最后才完成开发 主要问题在于github下载的很慢本教程适用于ubuntu deban…...

光伏电站智能管理平台功能全面介绍

一、介绍 光伏电站智能管理平台专门为了光伏电站服务的融合了项目沟通、在线设计、施工管理、运维工单等多智能光伏管理系统&#xff0c;可以满足光伏电站建设前期沟通、中期建设和后续维护的一体化智能平台&#xff0c;同时通过组织架构对企业员工进行线上管理和数据同步&…...

SSL证书 购买流程

在购买SSL证书之前&#xff0c;需要知道一点相关的知识&#xff0c;通常包括以下几个环节&#xff1a; 一、确定需求 1、根据需要保护的域名数量&#xff0c;在以下三类中选择合适的证书类型&#xff1a; 单域名证书&#xff0c;只对一个域名&#xff08;例如abc.com&#x…...

一站式解决Windows程序运行问题的Visual C++运行库修复指南

一站式解决Windows程序运行问题的Visual C运行库修复指南 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 你是否曾经遇到过打开软件时突然弹窗提示"缺少msv…...

TEdit地图编辑器:从新手到专家的泰拉瑞亚世界创作指南

TEdit地图编辑器&#xff1a;从新手到专家的泰拉瑞亚世界创作指南 【免费下载链接】Terraria-Map-Editor TEdit - Terraria Map Editor - TEdit is a stand alone, open source map editor for Terraria. It lets you edit maps just like (almost) paint! It also lets you ch…...

告别top!用htop监控Linux进程,这10个高效用法运维新手必看

告别top&#xff01;用htop监控Linux进程&#xff0c;这10个高效用法运维新手必看 如果你还在用top命令监控Linux服务器状态&#xff0c;就像拿着算盘处理大数据——虽然能用&#xff0c;但效率实在堪忧。作为top的现代化替代品&#xff0c;htop以其彩色界面、鼠标支持和直观的…...

3分钟掌握跨平台鼠标连点器:免费开源自动化工具快速上手指南

3分钟掌握跨平台鼠标连点器&#xff1a;免费开源自动化工具快速上手指南 【免费下载链接】MouseClick &#x1f5b1;️ MouseClick &#x1f5b1;️ 是一款功能强大的鼠标连点器和管理工具&#xff0c;采用 QT Widget 开发 &#xff0c;具备跨平台兼容性 。软件界面美观 &#…...

一次搞清楚:Agent、Skill、Prompt、MCP

文章深入探讨了AI Agent在落地过程中面临的三大核心痛点&#xff1a;Prompt的临时性与不可复用性、Agent专业能力的难以沉淀与迁移、以及AI能力无法融入现有工程化流程。文章提出Agent Skills作为AI Agent的专业能力说明书&#xff0c;通过标准化能力描述与执行框架&#xff0c…...

别再Ctrl+F GitHub了!Perplexity高级提示词工程(含18个已验证模板),让开源检索进入“所想即所得”时代

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Perplexity GitHub资源检索的范式革命 从关键词匹配到语义理解的跃迁 传统 GitHub 搜索依赖精确的仓库名、文件路径或正则表达式&#xff0c;而 Perplexity 引入的 LLM 驱动检索将自然语言查询&#x…...

PCL圆柱拟合进阶:从模型参数到完整轴线的精准计算

1. PCL圆柱拟合的核心挑战与工业需求 在工业测量和逆向工程领域&#xff0c;圆柱体是最常见的几何特征之一。想象一下汽车发动机的活塞杆、液压缸的活塞筒&#xff0c;或者机械臂的旋转轴&#xff0c;这些关键部件都需要精确的圆柱几何参数。PCL&#xff08;Point Cloud Librar…...

自动化营销系统:高效破解市场-SDR销售线索流转堵点

在B2B营销中&#xff0c;线索从“获取”到“转化”的过程&#xff0c;往往伴随着大量的手动操作、信息断层和跟进滞后。尤其是市场团队与SDR&#xff08;销售开发代表&#xff09;之间的协作&#xff0c;常常成为线索流转的“瓶颈”。如何高效、规范地将市场获取的Leads转化为可…...

AI文本处理利器:MCP服务器实现结构化信息提取与智能解析

1. 项目概述&#xff1a;一个为AI应用注入结构化文本处理能力的MCP服务器 最近在折腾AI应用开发&#xff0c;特别是那些需要让大语言模型&#xff08;LLM&#xff09;与外部工具和数据源打交道的场景&#xff0c;我发现一个核心痛点&#xff1a;如何高效、可靠地将非结构化的文…...

Docker多阶段构建与镜像优化实战

Docker多阶段构建与镜像优化实战:从1GB到50MB的瘦身之旅 🐳 镜像太大?构建太慢?安全隐患太多?本文通过真实 Node.js + Python 项目,手把手教你用多阶段构建把 Docker 镜像从 1GB 压缩到 50MB,附带完整的优化策略和踩坑指南。 一、为什么你的 Docker 镜像这么大? 很多…...