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进行功…...
《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》
引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
MySQL 知识小结(一)
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库,分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷,但是文件存放起来数据比较冗余,用二进制能够更好管理咱们M…...
深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...
