axios请求大全

本文讲解axios封装方式以及针对各种后台接口的请求方式

axios的介绍和基础配置可以看这个文档: 起步 | Axios中文文档 | Axios中文网

axios的封装

axios封装的重点有三个,一是设置全局config,比如请求的基础路径,超时时间等,第二点是在每次请求前往请求头里面塞token,第三点是处理请求的response,如果出错了进行统一的错误处理

//进行axios二次封装:使用请求与响应拦截器
import axios from 'axios'//第一步:利用axios对象的create方法,去创建axios实例(其他的配置:基础路径、超时的时间)
const request = axios.create({//基础路径baseURL: 'http://localhost:6689', //基础路径timeout: 15000, //超时的时间的设置
})
//第二步:request实例添加请求与响应拦截器
request.interceptors.request.use((config) => {//config配置对象,headers属性请求头,经常给服务器端携带公共参数config.headers.Authorization = 'authorization'//返回配置对象return config
})//第三步:响应拦截器
request.interceptors.response.use((response) => {if (response.headers['content-type'] !== 'application/json') {// 返回的不是json则由调用方处理return response}if (response.data.status == 200) {// 请求成功return response.data} else if (response.data.status == 401) {// 未登录// todo 重新登录return Promise.reject(response.data)} else {// 弹出错误提示console.error(response.data.message)return Promise.reject(response.data)}},(error) => {//失败回调:处理http网络错误的//定义一个变量:存储网络错误信息let message = ''if (error.message.includes('timeout')) {message = '请求接口服务超时'} else if (error.message.includes('Network Error')) {message = '网络错误'}//http状态码if (error.response) {const status = error.response.statusswitch (status) {case 401:message = 'TOKEN过期'breakcase 403:message = '无权访问'breakcase 404:message = '请求地址错误'breakcase 500:message = '服务器出现问题'breakdefault:message = '网络出现问题'break}}if (!message) message = '未知错误'//提示错误信息console.log(message)return Promise.reject(error)},
)//对外暴露
export default request

发送GET请求

我们先来看swagger文档,这个请求是get请求,传递的参数是query,也就是跟在url后面的键值对,类似于?key1=val1&key2=val2这种

 

 实现代码如下,request.js就是上面封装的axios,下面就不重复说了,发送get请求重点是两个,一个是method:get,一个是用params来传递参数

import request from "@/utils/request.js";async function doGet() {const params = {id: 1,name: '研发部'}// 使用params传递query参数const res = await request({url: '/axios/listAll',method: 'get',params //等同于params:params})console.log(res)
}

我们来看下network里面的数据,发送params参数会把请求参数拼接到url后面,如果是中文字符,则进行url编码

发送POST请求,数据类型为json 

看下接口文档,method为post,数据类型为json

 post传递json需要把传递的数据放入请求体(request body)里面,并且把content-type设置成application/json,所幸axios使用起来很简单,只需要把method设置成post,使用data参数传递就行了

async function doPostJson() {const data = {id: 1,name: '研发部'}// json使用data参数传递const res = await request({url: '/axios/add',method: 'post',data //等同于data:data})console.log(res)
}

下图是network中发送的请求头

 

发送的请求体

 

发送POST请求,数据类型为form

post请求,数据类型为form也挺常见的

 方式一,通过query传参,不推荐

第一种方式通过query传参,就是参数跟在url后面,这种方式有两个问题,一是url长度有限制,chrome是8千个字符,post请求一般传递的数据都比较大,二是参数跟在url后面很容易被识别,有一定的安全风险,代码如下:

async function doPostQuery() {const params = {username: 'admin',password: '123456'}// form可以使用params来传参const res = await request({url: '/axios/login',method: 'post',params //等同于params:params})console.log(res)
}

方式二,通过form传参,推荐

 第二种方式是把请求数据放入request body中,可以解决上面两个问题

这种方式需要使用qs库,先安装qs,然后使用data传参,区别就是数据要先通过qs.stringify转换成form

npm install qs
import qs from 'qs'
async function doPostForm() {const data = {username: 'admin',password: '123456'}// 转成form后传参const res = await request({url: '/axios/login',method: 'post',data: qs.stringify(data)})console.log(res)
}

发送PUT请求,数据类型为json

发送put请求跟post是一样的,都是通过data来传递参数,唯一的区别是method改成put就行了

 

async function doPutJson() {const data = {id: 1,name: '研发部'}// json使用data参数传递const res = await request({url: '/axios/update',method: 'put',data //等同于data:data})console.log(res)
}

 

 发送PUT请求,数据类型为form

这个可以参考发送post请求,数据类型为form那段,只要method改成put,其他都一样

 发送DELETE请求,数据类型为path

delete请求是用来做删除的,一般会把id放在请求路径中

async function doDeletePath() {const id = 1// 参数直接拼接在路径后面const res = await request({url: '/axios/delete/' + id,method: 'delete',})console.log(res)
}

 

发送DELETE请求,数据类型为form

 可以通过query的方式传递参数

async function doDeleteForm() {const params = {ids: [1,2,3].join(',')}// 参数直接拼接在路径后面const res = await request({url: '/axios/batchDelete',method: 'delete',params})console.log(res)
}

 

 发送DELETE请求,数据类型为json

method为delete,使用data传递数据

async function doDeleteJson() {const data = {ids: [1,2,3]}// 参数直接拼接在路径后面const res = await request({url: '/axios/batchDeleteJson',method: 'delete',data})console.log(res)
}

 上传文件

axios上传文件的要点是要用FormData对象来组装数据,请求头的Content-Type要设置成multipart/form-data,使用data传递数据表示数据放在request body里面

async function doUpload() {const formData = new FormData();// 把input file里面的文件放入formData,如果后台要求数组,可以多次调用appendformData.append("file", fileRef.value.files[0])// 放入其他数据formData.append("id", 1)formData.append("name", "研发部")// 参数直接拼接在路径后面const res = await request({url: '/axios/uploadFile',method: 'post',data: formData})console.log(res)
}

下载文件 

方式一,window.location.href

如果需要下载的是一个url,则只需要window.location.href=url就行了,但是这种方式有几个问题,一是如果url里面是图片,txt等浏览器可以打开的内容,则会直接打开,不会下载,二是这种方式只支持get请求,如果需要通过post等形式下载则不适用,三是这种方式没法在header里面加token,四是这种方式没法指定文件名,后台指定什么文件名就是什么

方式二,axios下载

axios的下载方式就灵活很多,可以解决上面提到的那些问题,把请求的responseType指定成blob,然后从返回的头字段中解析中文件名,最后通过新建一个看不见的a标签来实现下载

async function doDownload() {// 参数直接拼接在路径后面const res = await request({url: '/axios/downloadFile',method: 'post',responseType: 'blob' // 重要:指定响应类型为blob})downloadFile(res.data, getAttachmentName(res.headers))
}function getAttachmentName(headers) {let fileName = headers['content-disposition']?.match(/filename=(.*)/)[1]if (fileName) {fileName = decodeURI(fileName)} else {//此处表示后台没有设置响应头 content-disposition,请根据业务场景自行处理fileName = "download"}return fileName
}
function downloadFile(file, fileName) {//转成blob对象const blob = new Blob([file], { type: 'application/octet-stream' })if (typeof window.navigator.msSaveBlob !== 'undefined') {window.navigator.msSaveBlob(blob, fileName)} else {// 创建a标签去下载const blobURL = window.URL.createObjectURL(blob)const tempLink = document.createElement('a')tempLink.style.display = 'none'tempLink.href = blobURLtempLink.setAttribute('download', fileName)if (typeof tempLink.download === 'undefined') {tempLink.setAttribute('target', '_blank')}document.body.appendChild(tempLink)tempLink.click()document.body.removeChild(tempLink)window.URL.revokeObjectURL(blobURL)}
}

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

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

相关文章

kafka服务介绍

kafka 安装使用管理 Kafka Apache Kafka 是一个开源的分布式事件流平台,主要用于实时数据传输和流处理。它最初由 LinkedIn 开发,并在 2011 年成为 Apache 基金会的顶级项目。Kafka 设计的目标是处理大规模的数据流,同时提供高吞吐量、低延迟…

【前端】Vue2.0和Vue3.0 的一些主要区别

Vue2.0和Vue3.0的主要区别 Vue2.0Vue3.0API类型Option(选项式)Composition(组合式)响应式系统基于Object defineProperty,有一定的局限性基于ES6 Proxy,能够更好地支持动态添加属性和删除属性声明响应式变量需在data声明使用ref,reactive声明生命周期beforeCreate、…

Java语言程序设计——篇八(1)

🌿🌿🌿跟随博主脚步,从这里开始→博主主页🌿🌿🌿 Java常用核心类 主要内容Object: 终极父类toString( )方法equals( )方法getClass( )方法hashCode( )方法clone( )方法finalize( )方法实战演练 …

8. kubernetes资源——ingress

kubernetes资源——ingress 一、ingress介绍1、作用2、实现方式3、核心组件 二、部署ingress1、下载ingress_1.9.6.yaml文件2、事先导入镜像3、部署ingress 三、通过ingress发布k8s中的服务1、创建服务2、创建ingress规则发布服务3、测试访问 一、ingress介绍 1、作用 ingres…

postman请求JSON格式,后台@RequestBody实体类接收不到数据

转载自:https://blog.csdn.net/m0_66490875/article/details/134551126 我的是全大写的字段,传到后台RequestBody接收到的字段全是null 博主说的对 两种解决方式: 1.在实体类上加上 JsonProperty(value" ") 注解 2.修改实体类名&am…

【vue3】表格导出简单使用方法

安装依赖 npm install xlsx创建工具文件exportToExcel.ts import * as XLSX from xlsx;interface TableData {[key: string]: any; }type MappingFunction (row: TableData) > { [key: string]: any };export const exportToExcel (data: TableData[],fileName: string,…

Android SurfaceFlinger——缓冲区入队回调(三十四)

在 Android 的 SurfaceFlinger 中,生产者/消费者模型主要用于处理缓冲区(Buffer)的管理和交换,以支持高效的图形渲染和显示。在这个模型中,“生产”和“消费”的对象是缓冲区(Buffer),更具体地说,就是 GraphicBuffer 对象,它们包含了实际的图像数据。 一、基础介绍 生…

若依+AI项目开发(二)

后端代码分析 二次开发 开始执行 生成成功 创建子模块

docker安装jenkins,并配置jdk、node和maven

拉取jenkins镜像 docker pull jenkins/jenkins:2.468-jdk21 创建一个文件夹,用于二次打包jenkins镜像 mkdir -p /data/jenkins cd /data/jenkins 提前准备好jdk和maven,并放到/data/jenkins下 由于3.8.x以上版本的maven只支持https协议,我们…

深入理解SQL中的INNER JOIN操作

本文介绍了INNER JOIN的定义、使用场景、计算方法及与其他JOIN的比较。INNER JOIN是关系数据库中常用的操作,用于返回两个表中匹配的行,只有在连接条件满足时才返回数据。本文详细解释了INNER JOIN的语法及其在一对多、多对多关系中的应用,通…

TCP/IP 协议栈介绍

TCP/IP 协议栈介绍 1. 引言 TCP/IP(传输控制协议/互联网协议)是一组用于数据网络中通信的协议集合,它是互联网的基础。本文将详细介绍TCP/IP协议栈的各个层次、工作原理以及其在网络通信中的作用。 2. TCP/IP 协议栈的层次结构 TCP/IP协议…

Redis实战---分布式锁

1. 什么是Redis分布式锁? 分布式锁,顾名思义,就是分布式系统中使用的锁,在单体应用中我们使用synchronized、ReentrantLock来解决线程时间的共享资源的访问问题,而在分布式系统中,资源贡献问题已经由线程之…

关于ABB机器人欧拉角转四元数计算方式 C++ C# Python

ABB是一家全球领先的工业自动化和电气设备公司,具有广泛的产品和解决方案组合。它致力于为工业客户和公共设施提供创新的技术和解决方案,以提高效率、灵活性和可持续性。 在使用ABB机器人时我们时常会碰到四元数和机器人欧拉角的转换,四元数和…

【Ubuntu】安装 Snipaste 截图软件

Snipaste 下载安装并使用 Snipastefor more information报错解决方案每次启动软件需要输入的命令如下添加开机自启动 下载 下载地址 安装并使用 Snipaste 进入终端输入命令 # 1、进入到 Snipaste-2.8.9-Beta-x86_64.AppImage 所在目录(根据自己的下载目录而定&…

C语言之柔性数组

一、柔性数组概念 C99中,结构体中的最后一个元素允许是未知大小的数组,这叫做柔性数组成员。 struct S {char c;int n;int arr[];//柔性数组 }; 有些编译器会报错,可以修改为: struct S {char c;int n;int arr[0];//柔性数组 };…

Corsearch 用 ClickHouse 替换 MySQL 进行内容和品牌保护

本文字数:3357;估计阅读时间:9 分钟 作者:ClickHouse Team 本文在公众号【ClickHouseInc】首发 Chase Richards 自 2011 年在初创公司 Marketly 担任工程负责人,直到 2020 年公司被收购。他现在是品牌保护公司 Corsear…

JAVA笔记十六

十六、异常Exception 1.概念 异常:非正常情况,包括空的引用、数组下标越界、内存溢出等 Java提供了异常对象描述这类异常情况。 Java提供了异常机制来进行处理,通过异常机制来处理程序运行期间出现的错误,可以更好地提升程序的…

波特率和比特率的区别联系【理解】

波特率(Baud rate):表示单位时间内载波调制状态变化的次数 ,单位为波特(Baud); 【值得注意的是】单位“波特”本身就已经是代表每秒的调制数,不能用“波特每秒”(Baud per second)为…

MySQL练手 --- 1141. 查询近30天活跃用户数

题目链接:1141. 查询近30天活跃用户数 思路: 题目要求:统计截至 2019-07-27(包含2019-07-27),近 30 天的每日活跃用户数(当天只要有一条活动记录,即为活跃用户) 要计算…