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

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>

至此,已完成axiosvue项目中的封装与使用。

相关文章:

vue-axios封装与使用

一、简介 Axios 是一个基于 promise 网络请求库&#xff0c;作用于node.js 和浏览器中。 这是一个使用率很高的前端网络请求库&#xff0c;几乎所有的前端项目都会使用&#xff0c;本文主要介绍的是如何在vue项目中使用axios&#xff0c;并对其进行全面的封装。 注意&#x…...

重要节点排序方法

文章目录研究背景提前约定基于节点近邻的排序方法度中心性&#xff08;degree centrality, DC&#xff09;半局部中心性&#xff08;semilocal centrality, SLC&#xff09;k-壳分解法基于路径排序的方法离心中心性 (Eccentricity, ECC)接近中心性 (closeness centrality, CC)K…...

【2.20】动态规划 +项目 + 存储引擎

01背包问题 现有一容量为w的背包&#xff0c;有3个物品&#xff0c;每个物品重量不同&#xff0c;价值不同&#xff0c;问&#xff0c;怎样装才能价值最大化&#xff1f; 明确dp数组含义和下标含义&#xff1a;dp[j]表示当前背包的最大价值。j表示背包容量。递推公式&#xf…...

触摸屏单个按键远程控制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…...

等保三级认证基本要求

一、什么是等保测评&#xff1f; 企业单位委托经公安部认证的具有资质的测评机构&#xff0c;按照管理规范和技术标准&#xff0c;对相应的测评对象&#xff08;信息系统&#xff09;的状况进行测评。 1、安全技术测评&#xff1a;包括物理安全、网络安全、主机系统安全、应用安…...

Python 基本数据类型(一)

1. 整型 整型即整数&#xff0c;用 int 表示&#xff0c;在 Python3 中整型没有长度限制。 1.1 内置函数 1. int&#xff08;num, baseNone&#xff09; int( ) 函数用于将字符串转换为整型&#xff0c;默认转换为十进制。 >>> int(123) 123 >>> int(123, …...

win10 环境变量及其作用大全

------------------------------------------------------系统变量------------------------------------------------------ ComSpec: C:\WINDOWS\system32\cmd.exe command specification 解释&#xff1a; ComSpec是Windows操作系统中的一个环境变量&#xff0c;它表示Windo…...

@Valid与@Validated的区别

1.介绍 说明&#xff1a; 其实Valid 与 Validated都是做数据校验的&#xff0c;只不过注解位置与用法有点不同。 不同点&#xff1a; &#xff08;1&#xff09; Valid是使用Hibernate validation的时候使用。Validated是只用Spring Validator校验机制使用。 &#xff08;2&…...

【LeetCode】剑指 Offer 09. 用两个栈实现队列 p68 -- Java Version

题目链接&#xff1a;https://leetcode.cn/problems/yong-liang-ge-zhan-shi-xian-dui-lie-lcof/ 1. 题目介绍&#xff08;09. 用两个栈实现队列&#xff09; 用两个栈实现一个队列。队列的声明如下&#xff0c;请实现它的两个函数 appendTail 和 deleteHead &#xff0c;分别…...

Java并发编程面试题——JUC专题

文章目录一、AQS高频问题1.1 AQS是什么&#xff1f;1.2 唤醒线程时&#xff0c;AQS为什么从后往前遍历&#xff1f;1.3 AQS为什么用双向链表&#xff0c;&#xff08;为啥不用单向链表&#xff09;&#xff1f;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&#xff08;一种不断尝试&#xff09;即Compare …...

Ansys Zemax / SPEOS | 光源文件转换器

本文解释了如何在 SPEOS 与 Zemax 之间转换二进制光源文件。 下载 联系工作人员获取附件 简介 在本文中&#xff0c;为用户提供了一组Python代码&#xff0c;用于在Zemax和SPEOS之间转换源文件。 有些光源&#xff0c;如 .IES 文件&#xff0c;可在 SPEOS 和 Zemax 中进行…...

PRML笔记2-关于回归参数w的先验的理解

接上篇&#xff0c;现在考虑给w\boldsymbol{w}w加入先验&#xff0c;考虑最简单的假设&#xff0c;也就是w\boldsymbol{w}w服从均值为0&#xff0c;协方差矩阵为α−1I\alpha^{-1}\boldsymbol{I}α−1I的高斯分布。 p(w∣α)N(w∣0,α−1I)(α2π)(M1)/2exp⁡{−α2wTw}\begin{…...

Selenium原理

我们使用Selenium实现自动化测试&#xff0c;主要需要3个东西1.测试脚本&#xff0c;可以是python&#xff0c;java编写的脚本程序&#xff08;也可以叫做client端&#xff09;2.浏览器驱动, 这个驱动是根据不同的浏览器开发的&#xff0c;不同的浏览器使用不同的webdriver驱动…...

Disconf、Apollo和Nacos分布式配置框架差异对比

差异对比表格&#xff1a; 功能点DisconfApolloNacos依赖高可用框架完全依赖于Zookeeper来实现监听拉取&#xff0c;向外提供了HTTP拉取数据接口依赖于Eureka实现内部服务发现注册&#xff0c;提供HTTP接口给Client SDK拉取监听数据内部自研实现框架高可用CAP理论偏重点Zookee…...

高新技术企业认定条件条件 高企认定要求

高新技术企业认定条件 一、成立年限&#xff1a;申报企业须注册成立365个日历天数&#xff0c;而非一个会计年度。 二、知识产权 &#xff08;1&#xff09;申报企业必须拥有在中国境内授权或审批审定的知识产权&#xff0c;且知识产权在有效保护期内。知识产权权属人应为申请企…...

华为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 生命周期进行监听。 优点&#xff1a; 全局仅一次反射&#xff0c;性能影响极小所有Activity的生命周期都能够被监听到由于Java的单继承&#xff0c;为了拓展性&#xff0c;可以使用装饰器模式对Instrumentation进行功…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...