vue-axios封装与使用
一、简介
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。
这是一个使用率很高的前端网络请求库,几乎所有的前端项目都会使用,本文主要介绍的是如何在vue项目中使用axios,并对其进行全面的封装。
注意:本文内容主要来自于个人开发经验,如有不当之处,敬请谅解,也欢迎大家在评论区指出。
二、安装
使用 npm:
npm install axios
使用 bower:
bower install axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
安装完成后,在main.js中引入axios
const axios = require("axios");
Vue.prototype.$axios = axios;
三、封装
这里写的浅显直白点,按照步骤一点一点完成,即可顺利使用。
1. 第一步:封装请求配置
在src/utils目录下创建fetch.js文件,没有utils文件夹的可以自己创建。
// fetch.js
import router from "../router/index"; // 引入路由,token过期时返回登录页
import Cookies from "js-cookie"; // 引入Cookies插件,用来存储token
import { Message } from "element-ui"; // 引入element插件,进行错误提示,看项目需求,也可以不用const axios = require("axios");
axios.defaults.headers["Content-Type"] = "application/json;charset=UTF-8";const fetch = axios.create({timeout: 60 * 1000, // 设置超时时间
});// 请求拦截器
fetch.interceptors.request.use((config) => {const token = Cookies.get("token") || ""; // 设置tokenconfig.headers.common["Authorization"] = token;return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器
fetch.interceptors.response.use((res) => {// 当content-download==='1',进行文件下载,判断条件与后端协商一致即可,此处只是举例if (res.headers["content-download"] === "1") {return res; // 此处返回res是因为需要在headers中获取文件名} else {// 其它状态码可自行进行补充,本文仅例举一项if (res.data.code === 500) {return Promise.reject(res.data);} else {if (res.data.code === 200) {return res.data;} else {return Promise.reject(res.data);}}}},(error) => {const stateCode = error.response.status;Toast.clear();if (stateCode === 401 || stateCode === 403) {Cookies.remove("token");Message.error("登录已失效,请重新登录!");router.push("/login");}return Promise.reject(error);}
);export default fetch;
2. 第二步:封装请求类型
在src/utils目录下创建request.js文件。
// request.js
import fetch from "./fetch";function request(url, method, data) {switch (method) {case "get":return fetch({method: "get",url,params: data,});case "post":return fetch({method: "post",url,data,});case "download":return fetch({method: "get",url,params: data,responseType: "blob",});default:return fetch;}
}export default request;
注意:download并非是请求类型,只是为了方便区别下载文件个人添加的。
3. 第三步:添加接口
在src/api目录下创建index.js文件,没有api文件夹的可以自己创建。
// index.js
import request from "@/utils/request";export function login(data) {return request("/api/login", "get", data);
}export function loginOut(data) {return request("/api/login-out", "post", data);
}export function fileDownload(data) {return request("/api/file-download", "download", data);
}
注意:这里的index.js命名并非唯一,任意名称皆可,建议不同模块采用不同的命名予以区分,这样会方便管理。
到这一步,所有的封装工作基本都已经完成了,剩下的就是使用了。
四、使用
使用非常的简单,在.vue文件中引入后,就可以直接调用了。
<script>
import { login, loginOut, fileDownload } from "@/api/index";
export default {data() {return {form: {username: "",password: "",};},methods: {_login() {const data = this.form;login(data).then((res) => {this.$message.success(res.message)});},}
}
</script>
至此,已完成axios在vue项目中的封装与使用。
相关文章:
vue-axios封装与使用
一、简介 Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 这是一个使用率很高的前端网络请求库,几乎所有的前端项目都会使用,本文主要介绍的是如何在vue项目中使用axios,并对其进行全面的封装。 注意&#x…...
重要节点排序方法
文章目录研究背景提前约定基于节点近邻的排序方法度中心性(degree centrality, DC)半局部中心性(semilocal centrality, SLC)k-壳分解法基于路径排序的方法离心中心性 (Eccentricity, ECC)接近中心性 (closeness centrality, CC)K…...
【2.20】动态规划 +项目 + 存储引擎
01背包问题 现有一容量为w的背包,有3个物品,每个物品重量不同,价值不同,问,怎样装才能价值最大化? 明确dp数组含义和下标含义:dp[j]表示当前背包的最大价值。j表示背包容量。递推公式…...
触摸屏单个按键远程控制led
一、硬件 arduino2块 淘晶驰串口屏7寸增强型带外壳1块,不支持视频音频 nRF24L0模块2块 扩展板2块 跳线若干 面包板1块 led灯1个 电阻二极管若干 下载线两个 usb转串口1个 二、实验内容 一个arduino作为触摸屏的控制器,接收触摸屏双向开关的信号,同时通过nRF24L01发送“open”…...
JVM12 class文件
1. Class 文件结构 1.1. Class 字节码文件结构 类型名称说明长度数量魔数u4magic魔数,识别Class文件格式4个字节1版本号u2minor_version副版本号(小版本)2个字节1u2major_version主版本号(大版本)2个字节1常量池集合u2constant_pool_count常量池计数器2个字节1cp_infoconstan…...
等保三级认证基本要求
一、什么是等保测评? 企业单位委托经公安部认证的具有资质的测评机构,按照管理规范和技术标准,对相应的测评对象(信息系统)的状况进行测评。 1、安全技术测评:包括物理安全、网络安全、主机系统安全、应用安…...
Python 基本数据类型(一)
1. 整型 整型即整数,用 int 表示,在 Python3 中整型没有长度限制。 1.1 内置函数 1. int(num, baseNone) int( ) 函数用于将字符串转换为整型,默认转换为十进制。 >>> int(123) 123 >>> int(123, …...
win10 环境变量及其作用大全
------------------------------------------------------系统变量------------------------------------------------------ ComSpec: C:\WINDOWS\system32\cmd.exe command specification 解释: ComSpec是Windows操作系统中的一个环境变量,它表示Windo…...
@Valid与@Validated的区别
1.介绍 说明: 其实Valid 与 Validated都是做数据校验的,只不过注解位置与用法有点不同。 不同点: (1) Valid是使用Hibernate validation的时候使用。Validated是只用Spring Validator校验机制使用。 (2&…...
【LeetCode】剑指 Offer 09. 用两个栈实现队列 p68 -- Java Version
题目链接:https://leetcode.cn/problems/yong-liang-ge-zhan-shi-xian-dui-lie-lcof/ 1. 题目介绍(09. 用两个栈实现队列) 用两个栈实现一个队列。队列的声明如下,请实现它的两个函数 appendTail 和 deleteHead ,分别…...
Java并发编程面试题——JUC专题
文章目录一、AQS高频问题1.1 AQS是什么?1.2 唤醒线程时,AQS为什么从后往前遍历?1.3 AQS为什么用双向链表,(为啥不用单向链表)?1.4 AQS为什么要有一个虚拟的head节点1.5 ReentrantLock的底层实现…...
CAS概述
目录一、CAS与原子类1.1 CAS1.2 乐观锁与悲观锁1.3 原子操作类二、 synchronized优化2.1 轻量级锁2.2 轻量级锁-无竞争2.3 轻量级锁-锁膨胀2.4 重量级锁-自旋2.5 偏向锁2.6 synchronized-其他优化一、CAS与原子类 1.1 CAS CAS(一种不断尝试)即Compare …...
Ansys Zemax / SPEOS | 光源文件转换器
本文解释了如何在 SPEOS 与 Zemax 之间转换二进制光源文件。 下载 联系工作人员获取附件 简介 在本文中,为用户提供了一组Python代码,用于在Zemax和SPEOS之间转换源文件。 有些光源,如 .IES 文件,可在 SPEOS 和 Zemax 中进行…...
PRML笔记2-关于回归参数w的先验的理解
接上篇,现在考虑给w\boldsymbol{w}w加入先验,考虑最简单的假设,也就是w\boldsymbol{w}w服从均值为0,协方差矩阵为α−1I\alpha^{-1}\boldsymbol{I}α−1I的高斯分布。 p(w∣α)N(w∣0,α−1I)(α2π)(M1)/2exp{−α2wTw}\begin{…...
Selenium原理
我们使用Selenium实现自动化测试,主要需要3个东西1.测试脚本,可以是python,java编写的脚本程序(也可以叫做client端)2.浏览器驱动, 这个驱动是根据不同的浏览器开发的,不同的浏览器使用不同的webdriver驱动…...
Disconf、Apollo和Nacos分布式配置框架差异对比
差异对比表格: 功能点DisconfApolloNacos依赖高可用框架完全依赖于Zookeeper来实现监听拉取,向外提供了HTTP拉取数据接口依赖于Eureka实现内部服务发现注册,提供HTTP接口给Client SDK拉取监听数据内部自研实现框架高可用CAP理论偏重点Zookee…...
高新技术企业认定条件条件 高企认定要求
高新技术企业认定条件 一、成立年限:申报企业须注册成立365个日历天数,而非一个会计年度。 二、知识产权 (1)申报企业必须拥有在中国境内授权或审批审定的知识产权,且知识产权在有效保护期内。知识产权权属人应为申请企…...
华为OD机试 - 新学校选址(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
新学校选址 题目 为了解新学期学生暴涨的问题,小乐村要建立所新学校 考虑到学生上学安全问题,需要所有学生家到学校的距离最短. 假设学校和所有学生家都走在一条直线之上,请问学校建立在什么位置, 能使得到学校到各个学生家的距离和最短 输入 第一行: 整数 n 取值范围 [1,1…...
二进制部署K8S
目录 一、环境准备 1、常见的k8s部署方式 2、关闭防火墙 3、关闭selinux 4、关闭swap 5、根据规划设置主机名 6、在master添加hosts 7、将桥接的IPv4流量传递到iptables的链 8、时间同步 二、部署etcd集群 1、master节点部署 2、查看证书的信息 2.1 创建k8s工作目…...
高效获知Activity的生命周期
Activity生命周期监听 使用 Instrumentation 对 Activity 生命周期进行监听。 优点: 全局仅一次反射,性能影响极小所有Activity的生命周期都能够被监听到由于Java的单继承,为了拓展性,可以使用装饰器模式对Instrumentation进行功…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
Zustand 状态管理库:极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库,特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中,UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
