当前位置: 首页 > 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进行功…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...