封装使用Axios进行前后端交互
Axios是一个强大的HTTP客户端,用于在Vue.js应用中进行前后端数据交互。本文将介绍如何在Vue中使用Axios,并通过一个企业应用场景来演示其实际应用。
Axios简介
公众号:Code程序人生,个人网站:https://creatorblog.cn
Axios
是一个基于Promise
的HTTP
客户端,可以在浏览器和Nodejs
中使用。它具有以下特点:
- 支持
Promise API
,易于使用和集成。 - 提供了强大的拦截器,用于在请求和响应过程中执行自定义逻辑。
- 具有自动转换
JSON
数据的能力。 - 能够处理请求和响应的取消操作。
- 支持浏览器环境和
Nodejs
环境。
大家要有一个概念,Axios
是一个独立的库,不依赖于任何框架,Vue
、React
、Nodejs
、原生,任何能用它的地方都可以用它。很多初学者有种错觉,认为Vue
和Axios
强挂钩。Axios
是一个很强大的第三方库,不依赖于任何主体。
Axios基本用法
安装Axios
首先,确保你的项目中已经安装了Axios
。如果没有安装,可以使用以下命令进行安装:
npm install axios
发送GET请求
以下是一个简单的Vue
组件方法,用于发送GET
请求并处理响应:
<template><div><button @click="fetchData">获取数据</button><div>{{ responseData }}</div></div>
</template><script>
import axios from 'axios';export default {data() {return {responseData: null,};},methods: {fetchData() {axios.get('https://www.baidu.com', {params: {query1: 'query1value1',query2: 'query2value2',}},headers: {'Authorization': 'Bearer token',}).then((response) => {this.responseData = response.data;}).catch((error) => {console.error('请求失败:', error);});},},
};
</script>
axios.get()
的入参:
- 第一个参数是要请求的
url
,必填。 - 第二个参数是要传递的配置对象
config
,用于设置请求的各种选项,例如请求头、请求参数、超时设置等,GET
请求要传递的query
参数要放到params
属性下,选填。
在上述示例中,我们导入了Axios
并使用axios.get()
方法发送GET
请求。响应数据存储在responseData
中。
发送POST请求
如果需要发送POST
请求,可以使用axios.post()
方法:
<script>
import axios from 'axios';export default {// ...其他组件选项methods: {sendData() {const params = {key1: 'value1',key2: 'value2',};axios.post('https://your-post-api-url', params, {headers: {'Content-Type': 'application/json',}}).then((response) => {console.log('成功发送数据:', response.data);}).catch((error) => {console.error('请求失败:', error);});},},
};
</script>
axios.post()
的入参:
- 第一个参数是要请求的
url
,必填。 - 第二个参数
data
,表示要发送的请求数据。通常在向服务器提交数据时使用,例如表单数据或JSON
数据,选填。 - 第三个参数
config
,用于设置请求的各种选项,比如headers
等,选填。
上述示例中,我们使用axios.post()
发送POST
请求,同时传递了需要发送的数据对象。
Axios的进阶用法
拦截器
Axios
的拦截器功能允许我们在请求发送前和响应返回后执行自定义操作。例如,你可以在请求中添加认证信息、记录日志等。以下是一个示例:
// 添加请求拦截器
axios.interceptors.request.use((config) => {// 在请求发送前执行的操作,例如添加认证信息// config.headers['Authorization'] = `Bearer ${token}`;return config;},(error) => {return Promise.reject(error);}
);// 添加响应拦截器
axios.interceptors.response.use((response) => {// 在响应返回后执行的操作,例如处理响应数据return response.data;},(error) => {// 处理响应错误return Promise.reject(error);}
);
错误处理
在Axios
中,你可以使用.catch()
来处理请求或响应的错误。通常,这包括网络错误、HTTP
状态码错误以及后端返回的自定义错误信息。
axios.get('https://www.baidu.com').then((response) => {// 处理成功响应}).catch((error) => {if (error.response) {// 处理HTTP错误状态码console.error('HTTP错误:', error.response.status);} else if (error.request) {// 处理请求没有响应的情况console.error('请求无响应');} else {// 处理其他错误console.error('其他错误:', error.message);}});
Axios整体封装
为什么要封装Axios
封装Axios
有以下几个重要的原因:
- 代码重用性:通过封装
Axios
,我们可以将HTTP
请求的逻辑集中在一个地方,以便在整个应用程序中重用。 - 错误处理:封装可以使错误处理变得更加一致,包括网络错误、
HTTP
状态码错误以及后端返回的自定义错误信息。 - 拦截器:
Axios
的拦截器功能可以用于在请求发送前和响应返回后进行操作,如添加请求头、认证、日志记录等。 - 安全性:通过封装,可以更容易地添加安全性措施,例如
CSRF
令牌的自动附加。
封装Axios
首先,我们将创建一个独立的Axios
实例并进行封装。在Vue
项目中,通常在一个单独的文件中完成此任务,例如axios.js
:
// axios.jsimport axios from 'axios';const instance = axios.create({baseURL: 'https://api.api.api.com', // 设置后端API的基本URLtimeout: 10000, // 设置请求超时时间
});// 请求拦截器
instance.interceptors.request.use((config) => {// 在请求发送前可以进行一些操作,如添加认证信息// config.headers['Authorization'] = `Bearer ${token}`;return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use((response) => {// 在响应返回后可以进行一些操作,如处理响应数据return response.data;},(error) => {// 处理响应错误,可以根据不同的HTTP状态码采取不同的处理策略if (error.response) {// 处理HTTP错误状态码const status = error.response.status;if (status === 401) {// 处理未授权错误} else if (status === 404) {// 处理资源未找到错误} else {// 处理其他HTTP错误}} else if (error.request) {// 处理请求没有响应的情况} else {// 处理其他错误}return Promise.reject(error);}
);export default instance;
在Vue组件中使用封装的Axios
现在,我们可以在Vue
组件中轻松地使用封装后的Axios
实例。首先,确保在组件文件中导入封装的Axios
:
import axios from './axios'; // 导入封装的Axios实例
然后,在组件中使用Axios
发送请求:
export default {methods: {fetchData() {axios.get('/data') // 发送GET请求,'/data'是相对于基本URL的相对路径.then((response) => {// 处理响应数据}).catch((error) => {// 处理错误});},},
};
这是一个简单的示例,展示了如何在Vue
组件中使用封装的Axios
实例来发送GET
请求。
常见应用场景
身份验证和授权
在企业应用中,常见的用例之一是处理身份验证和授权。你可以在Axios
的拦截器中添加认证信息,以确保只有授权用户可以访问受保护的资源。
错误处理和日志记录
企业级应用通常需要良好的错误处理和日志记录机制。通过Axios
的拦截器,你可以集中处理错误,记录错误信息,以便后续分析和修复。
文件上传和下载
对于文件上传和下载,Axios
同样适用。你可以使用axios.post()
来上传文件,使用axios.get()
来下载文件,并处理相应的响应数据。
总结
Axios
是一个功能强大的HTTP
客户端,可以帮助你在任何应用中进行前后端数据交互。
通过封装和使用Axios
,你可以更轻松地处理请求、响应、错误和拦截器等各方面的问题。
在企业应用中,它可以帮助你构建稳健和可维护的前端代码,以应对复杂的需求和场景。
相关文章:
封装使用Axios进行前后端交互
Axios是一个强大的HTTP客户端,用于在Vue.js应用中进行前后端数据交互。本文将介绍如何在Vue中使用Axios,并通过一个企业应用场景来演示其实际应用。 Axios简介 公众号:Code程序人生,个人网站:https://creatorblog.cn A…...
SOA、分布式、微服务
SOA: SOA是一种软件设计架构,用于构建分布式系统和应用程序。它将应用程序拆分为一系列松耦合的服务,这些服务通过标准化的接口进行通信,并能够以可编程方式组合和重用。SOA的目标是提高系统的灵活性、可扩展性和可维护性。 特点&…...
json数据传输压缩以及数据切片分割分块传输多种实现方法,大数据量情况下zlib压缩以及bytes指定长度分割
json数据传输压缩以及数据切片分割分块传输多种实现方法,大数据量情况下zlib压缩以及bytes指定长度分割。 import sys import zlib import json import mathKAFKA_MAX_SIZE 1024 * 1024 CONTENT_MIN_MAX_SIZE KAFKA_MAX_SIZE * 0.9def split_data(data):"&q…...

移动端APP测试-如何指定测试策略、测试标准?
制定项目的测试策略是一个重要的步骤,可以帮助测试团队明确测试目标、测试范围、测试方法、测试资源、测试风险等,从而提高测试效率和质量。本篇是一些经验总结,理论分享。并不是绝对正确的,也欢迎大家一起讨论。 文章目录 一、测…...

【Redis】深入探索 Redis 主从结构的创建、配置及其底层原理
文章目录 前言一、对 Redis 主从结构的认识1.1 什么是主从结构1.2 主从结构解决的问题 二、主从结构创建2.1 配置并建立从节点2.2.1 从节点配置文件2.2.2 启动并连接 Redis 主从节点2.2.3 SLAVEOF 命令2.2.4 断开主从关系 2.2 查看主从节点的信息2.2.1 INFO REPLICATION 命令2.…...

CSS 滚动驱动动画 scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis )
scroll-timelinescroll-timeline-name❤️scroll-timeline-axis 解决问题语法 animation-timeline-nameanimation-timeline-axis scroll-timeline ( scroll-timeline-name ❤️ scroll-timeline-axis ) 在 scroll() 的最后我们遇到了因为定位问题导致滚动效果失效的情况, 当…...

9.19号作业
2> 完成文本编辑器的保存工作 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QFontDialog> #include <QFont> #include <QMessageBox> #include <QDebug> #include <QColorDialog> #include <QColor&g…...

Mybatis学习笔记9 动态SQL
Mybatis学习笔记8 查询返回专题_biubiubiu0706的博客-CSDN博客 动态SQL的业务场景: 例如 批量删除 get请求 uri?id18&id19&id20 或者post id18&id19&id20 String[] idsrequest.getParameterValues("id") 那么这句SQL是需要动态的 还…...

element表格 和后台联调
1.配置接口 projectList:/api/goods/xxx,//产品列表2.请求接口(get请求默认参数page) // 产品列表 pageprojectList(params){return axios.get(base.projectList,{params})}3.获取数据 直接放到created里边去了 刷新页面就可以看到 async projectList(page){let res await t…...

基于SSM的智慧城市实验室主页系统的设计与实现
末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用Vue技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…...

怒赞,阿里P8推荐的Java面试宝典:41个专题PDF(史上最全+面试必备)
《尼恩Java面试宝典》 40岁老架构师 尼恩 经过对大量 Java面试题 的不断梳理、迭代, 编著成5000页的《尼恩Java面试宝典》,致力于体系化, 系统化,形象化 梳理,形成一个大的知识体系,从而帮助大家 进大厂&a…...
线程池各个参数设置说明
1. corePoolSize 核心线程数 看处理业务属于IO密集型还是属于cpu密集型IO密集型: 通常设置为N1,还有一个计算公式:线程数 cpu数*(线程等待时间/线程总的处理时间) 但是由于服务器除了这个服务可能还部署有其他服务,…...

springBoot对接多个mq并且实现延迟队列---未完待续
mq调用流程 创建消息转换器 package com.wd.config;import org.springframework.amqp.support.converter.Jackson2JsonMessageConverter; import org.springframework.amqp.support.converter.MessageConverter; import org.springframework.context.annotation.Bean; import o…...

Pytorch从零开始实战04
Pytorch从零开始实战——猴痘病识别 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——猴痘病识别环境准备数据集模型选择模型训练数据可视化其他模型图片预测 环境准备 本文基于Jupyter notebook,使用Python3.8,Pytor…...

北大C++课后记录:文件读写的I/O流
前言 文件和平常用到的cin、cout流其实是一回事,可以将文件看作一个有限字符构成的顺序字符流,基于此,也可以像cin、cout读键盘数据那样对文件进行读写。 读写指针 输入流的read指针 输出流的write指针 注:这里的指针并不是普…...

详解Linux的grep命令
2023年9月19日,周二晚上 先写这么多吧,以后有空再更新,还要一些作业没写完.... 目录 概述查看grep命令的所有选项grep的常用选项选项-i选项-v选项-n选项-c编辑选项-l组合使用 概述 grep命令在Linux系统中是一个很重要的文本搜索工具和过…...

spark6. 如何设置spark 日志
spark yarn日志全解 一.前言二.开启日志聚合是什么样的2.1 开启日志聚合MapReduce history server2.2 如何开启Spark history server 三.不开启日志聚合是什么样的四.正确使用log4j.properties 一.前言 本文只讲解再yarn 模式下的日志配置。 二.开启日志聚合是什么样的 在ya…...
glibc: strlcpy
https://zine.dev/2023/07/strlcpy-and-strlcat-added-to-glibc/ https://sourceware.org/git/?pglibc.git;acommit;h454a20c8756c9c1d55419153255fc7692b3d2199 https://linux.die.net/man/3/strlcpy https://lwn.net/Articles/612244/ 从这里看,这个strlcpy、st…...
如何在 Buildroot 中配置 Samba
在 Buildroot 中配置 Samba 在 Buildroot 中配置 Samba 可以通过以下步骤完成: 1. 进入 Buildroot 的根目录。 2. 执行 make menuconfig 命令,打开 Buildroot 的配置菜单。 3. 在配置菜单中,使用键盘导航到 "Target packages" 选…...

SSM02
SSM02 此时我们已经做好了登录模块接下来可以做一下学生管理系统的增删改查操作 首先,我们应当有一个登录成功后的主界面 在webapp下新建 1.main.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…...
条件运算符
C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...

自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
32单片机——基本定时器
STM32F103有众多的定时器,其中包括2个基本定时器(TIM6和TIM7)、4个通用定时器(TIM2~TIM5)、2个高级控制定时器(TIM1和TIM8),这些定时器彼此完全独立,不共享任何资源 1、定…...

2025年- H71-Lc179--39.组合总和(回溯,组合)--Java版
1.题目描述 2.思路 当前的元素可以重复使用。 (1)确定回溯算法函数的参数和返回值(一般是void类型) (2)因为是用递归实现的,所以我们要确定终止条件 (3)单层搜索逻辑 二…...

初探用uniapp写微信小程序遇到的问题及解决(vue3+ts)
零、关于开发思路 (一)拿到工作任务,先理清楚需求 1.逻辑部分 不放过原型里说的每一句话,有疑惑的部分该问产品/测试/之前的开发就问 2.页面部分(含国际化) 整体看过需要开发页面的原型后,分类一下哪些组件/样式可以复用,直接提取出来使用 (时间充分的前提下,不…...