Axios的使用方式，前后端分离通信必不可少的技术

已于 2025-03-29 16:41:00 修改
阅读量438 收藏 6
点赞数 4
分类专栏： axios 文章标签： 前端 vue typescript 后端
于 2025-03-08 01:06:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/star_star999/article/details/146109026
版权

axios的学习应用

axios

一、接口文档

接口名请求方式请求参数请求地址
获取所有球星get无参href
获得所有球星post无参href
根据id获取学生getid stringhref
根据名字获取学生postname stringhref

该接口文档中，后两个接口是模拟老师的，需要有后端操作，前两个后端数据可以用mockjs进行模拟

一、axios

axios是基于promise对ajax的一种封装

ajax mvc

axios mvvm

可以使用mockjs对后端数据进行模拟实践，创建一个mock文件夹里面存放，index.js

详细见优快云——Vue3中使用mockjs

import { mock } from "mockjs"
let nba = [
	{id:1, name:'乔丹', number:23},
	{id:2, name:'科比', number:24},
	{id:3, name:'欧文', number:11},
	{id:4, name:'库里', number:30}
];

mock('http://localhost:5181/nba/get', 'get', () => {
	return nba;
});

mock('http://localhost:5181/nba/post', 'post', () => {
	return nba;
})

二axios的基本使用

axios发送get请求

//使用get方式发送请求
//如果默认方式没有method，那么最后结果也是get
//无参请求
<script setup lang="ts">
	import axios from "axios"
    axios({
		url:"http://localhost:5181/nba/get",
		method:'get'
	}).then(res => {
		console.log("试验");
		console.log(res);
	})
</script>

//有参请求--会改变url后缀，添加?id=1
<script setup lang="ts">
	import axios from "axios"
    axios({
        url:"http://localhost:5181/student/findStudentById",
		method:'get',
        params:{
            id:'1',
            name:'张三'
        }
	}).then(res => {
		console.log("试验");
		console.log(res);
	})
</script>

axios发送post请求

//使用post方式请求
//无参请求
<script setup lang="ts">
	import axios from "axios"
    axios({
		url:"http://localhost:5181/nba/post",
		method:'post'
	}).then(res=>{
		console.log("试验");
		console.log(res);
	})
</script>

//有参请求
//使用params传递，自动后面添加?id=1?name='张三'
<script setup lang="ts">
	import axios from "axios"
    axios({
        url:"http://localhost:5181/student/findStudentByName",
		method:'post',
        params:{
            name:'张三' //url拼接参数，不推荐
        }
	}).then(res => {
		console.log("试验");
		console.log(res);
	})
</script>

//使用data传递
<script setup lang="ts">
	import axios from "axios"
    axios({
        url:"http://localhost:5181/student/findStudentByName",
		method:'post',
        data:{
            name:'张三' //后台接受为null
        }
	}).then(res => {
		console.log("试验");
		console.log(res);
	})
</script>
/*后台控制器接收到的name为null，axios使用post携带参数请求默认使用application/json

解决方式一： params属性进行数据的传递
解决方式二： "name='张三'"
解决方式三： 服务器端给接收的参数加上@requestBody注解
*/

三、axios的请求方式

//使用axios.get方式发送无参请求
<script setup lang="ts">
	import axios from "axios"
    axios.get("http://localhost:5181/nba/get").then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
	});
</script>

//使用axios.get发送有参请求
<script setup lang="ts">
	import axios from "axios"
    axios.get("http://localhost:5181/student/findStudentById",{params:{id:1,}}).then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
	});
</script>

使用post发送

//使用axios.post发送无参请求
<script setup lang="ts">
	import axios from "axios"
    axios.post("http://localhost:5181/nba/post").then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
	});
</script>

//使用axios.post发送有参请求 
//只修改前端代码
<script setup lang="ts">
	import axios from "axios"
    axios.post("http://localhost:5181/student/findStudentByName " ,"name='张三'&age=10").then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
	});
</script>
//发送post请求携带参数 直接使用"name=张三&age=10"

//使用data传递数据，后代需要将axios自动转换的json数据转换为java对象
//修改后台代码
<script setup lang="ts">
	import axios from "axios"
    axios.post("http://localhost:5181/student/findStudentByName " ,{name:'张三'}).then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
	});
</script>
//接受参数添加@requestBody注解

四、axios的并发请求

//第一种返回一个数组
<script setup lang="ts">
	import axios from "axios"
    axios.get('http://localhost:5181/nba/get'),
    axios.get('http://localhost:5181/student/findStudentById',{params:{id:1}}).then(res=>{
        console.log(res[0]);
        console.log(res[1]);
    }).catch(err=>{
        console.log(err);
    })
</script>

//第二种
<script setup lang="ts">
	import axios from "axios"
    axios.get('http://localhost:5181/nba/get'),
    axios.get('http://localhost:5181/student/findStudentById',{params:{id:1}}).then(
        axios.spread((res1,res2)=>{
            console.log(res1);
            console.log(res2);
        })
    ).catch(err=>{
        console.log(err);
    })
</script>

五、axiso的全局配置

<script setup lang="ts">
	import axios from "axios"
	
	const message = ref("123");
	axios.defaults.baseURL="http://localhost:5181";
	axios.defaults.timeout=5000;
	axios.post('api').then(res=>{
		console.log(res['data']['status']);
		message.value=res['data']['message'];
	}).catch(err=>{
		console.log(err);
	})
	
</script>

六、axios的实例

<script setup lang="ts">
    import axios from "axios"
	// 创建axios的实例
	let newVar = axios.create({
		baseURL: 'http://localhost:5181',
		timeout:5000
	});
	
	newVar({
		url:'nba/get'
	}).then(res=>{
		console.log("实例");
		console.log(res);
	})
</script>

七、axios的拦截器

axios给我们提供了两大类拦截器：

  • 请求方向的拦截（成功请求，失败的）

  • 响应方向的（成功的 失败的）

拦截器的作用：

  • 用于我们在网络请求的时候在发起请求或者响应时对操作进行响应的处理

  • 发起请求时可以添加网页加载的动画，强制登录

  • 响应的时候可以进行相应的数据处理

//请求方向拦截器
<script setup lang="ts">
    import axios from "axios"
    axios.interceptors.request.use(
        config=>{
            console.log("进入请求拦截器");
            console.log(config);
            return config;
        }),
        err=>{
            console.log("请求方向失败");
            console.log(err);
        }
        axios.get("http://localhost:5181/nba/get").then(res=>{
            console.log(res);
        })
</script>

//响应方向拦截器
<script setup lang="ts">
    import axios from "axios"
    axios.interceptors.response.use(
	config=>{
		console.log("进入响应拦截器");
		console.log(config);
		return config.data;
	}),
	err=>{
		console.log("响应方向失败");
		console.log(err);
	}
	axios.get("http://localhost:5181/nba/get").then(res=>{
		console.log(res);
	})
</script>

八、axios在vue中的模块封装

  • 第一种方式
//封装位置 文件绝对位置../../request.uts
import axios from 'axios'
export function request(config, success, fail){
	axios({
		url:config
	}).then(res=>{
		success(res);
	}).catch(err=>{
		fail(err);
	})
}

//调用文件
import {request} from '../../request.uts'
	request('http://localhost:5181/nba/get',res=>{
		console.log(res);
	},err=>{
		console.log(err);
	})
  • 第二种方式
//封装位置
import axios from 'axios'
export function request(config){
	axios.defaults.baseURL = "http://localhost:5181"
	axios(config.url).then(res=>{
		config.success(res);
	}).catch(err=>{
		config.fail(err);
	})
}
//文件位置
import {request} from '../../request.uts'
	request({
		url:'nba/get',
		success:res=>{
			console.log(res);
		},
		fail:err=>{
			console.log(err);
		}
	})
  • 第三种方式
//封装位置
import axios from 'axios'
export function request(config){
	return new Promise((resolve, reject) => {
		let newVar = axios.create({
			baseURL:"http://localhost:5181",
			timeout:5000
		})
		newVar(config).then(res=>{
			resolve(res);
		}).catch(err=>{
			reject(err);
		})
	})
}
//文件位置
import {request} from '../../request.uts'
request({
		url:'nba/get'
	}).then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
	})
  • 第四种方式
//封装位置
import axios from 'axios'
export function request(config){
    let newVar = axios.create({
			baseURL:"http://localhost:5181",
			timeout:5000
		});
    return newVar(config);
}
//调用位置
import {request} from '../../request.uts'
request({
		url:'nba/get'
	}).then(res=>{
		console.log(res);
	}).catch(err=>{
		console.log(err);
})

总结：

  • 这里最推荐的是最后一种方法，简单高效。
基于vue前后端分离手机销售商城系统
11-07
项目开发过程中，单元测试和集成测试必不可少。Vue.js 提供了测试工具如Jest和Vue Test Utils，帮助开发者确保代码的质量。同时，Vue DevTools 是一个强大的浏览器插件，便于在开发过程中进行实时调试。 总结，基于...
前后端分离，必须知道的axios
Java修炼记
02-28 1710
1.axios介绍 VUE中结合网络数据进行应用的开发 目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便.（不知道Ajax是什么，可参考我另外篇文章：Ajax介绍） axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送. Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax 2. axios入门 使用步骤: 1）导包 <!-- 官网提供的 axios 在线地址 --> <script s.
基于Axios完成前后端分离项目数据交互
白白白鲤鱼的博客
08-29 2400
Vue结合Mybatis完成SpringBoot前后端数据交互
React使用axios库完成前后端通信
qq_56905650的博客
11-20 1045
想要完成前后端通信，在借助axios库的同时还需要遵守同源策略，因此需要配置代理
vue3利用 Axios 实现前后端分离，通过本地服务器进行消息处理
最新发布
weixin_46285126的博客
01-26 564
前后端分离（Frontend-Backend Separation）是指前端与后端分别独立开发并通过接口进行通信。前端：负责页面展示和用户交互，发送 HTTP 请求与后端进行数据交换。后端：负责数据处理、业务逻辑、数据库操作等，并通过接口向前端提供数据。独立开发：前后端开发可以并行进行，提高开发效率。易于维护：每个部分都单独开发，代码结构清晰，维护更方便。灵活性：前端和后端可以使用不同的技术栈，灵活切换。通过本地服务器与前端的 Axios 请求，我们实现了一个简单的前后端分离应用。
axios的get post传参与springboot的接受参数总结
alalakisang的博客
11-01 437
GET 请求通过params选项传递查询参数：前端使用，后端使用注解。直接在 URL 中拼接参数：前端手动拼接 URL，后端使用注解。使用传递查询参数：前端使用，后端使用注解。POST 请求通过请求体传递 JSON 数据：前端使用，后端使用注解。通过传递表单数据：前端使用，后端使用注解。
java + vue 的前后端分离的考试系统.zip
11-16
在开发过程中，单元测试和集成测试是必不可少的，JUnit和Mockito可能是Java端的测试工具，而Vue.js端可能使用Jest或Mocha进行前端测试。部署方面，后端应用可能部署在如Tomcat或Nginx服务器上，前端资源通过构建工具...
RuoYi-Vue-fast-master_ruoyi项目_vuefast_若依前后端分离项目_
10-03
8. **权限管理**：作为一款企业级应用，权限管理是必不可少的，可能采用了JWT（JSON Web Tokens）进行用户认证和授权，实现基于角色的访问控制（RBAC）。 9. **UI框架**：若依项目可能使用了Element UI或其他Vue...
前后端分离实践：使用 React 和 Express 搭建完整登录注册流程
04-27
测试是必不可少的环节，可以使用Jest和Enzyme等工具对React组件进行单元测试，对于Express服务器，可以利用Mocha和Supertest进行API接口的集成测试。 总结来说，使用React和Express实现前后端分离的登录注册流程，...
ssm+vue的在线测试管理系统（有报告） Javaee项目，ssm vue前后端分离项目
04-20
【标题】：“ssm+vue的在线测试管理系统（有报告）”是一个基于Javaee平台的项目，采用SSM（Spring、SpringMVC、MyBatis）框架与Vue.js前端技术实现前后端分离的设计模式，旨在提供一个完整的在线考试与评测解决方案...
nuxt+axios解决前后端分离SSR的示例代码
08-29
主要介绍了nuxt+axios解决前后端分离SSR的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【前端+后端】前后端分离之——前后端axios通信
weixin_44917754的博客
07-06 4151
前后端通过axios通信，使前端能通过axios来调用后端接口 1. 前端安装axios 在前端Terminal中输入npm install axios或者vue add axios(根据vue版本来选择)来安装axios 2. 前端配置axios 配置axios来调用后端接口。注意：可根据不同应用场景将配置代码添加到不同地方。这里以页面刷新就调用接口来举例。该配置写在前端中。 mounted() { const _this = this axios.get('http://localhos
014-Axios Ajax-尚硅谷2022+黑马2023：Ajax概述 同步异步，(Axios 发送普通请求参数，发送请求体JSON，服务器端返回JSON数据)后端是servlet方式
aa35434的博客
03-15 1970
使用原生的JavaScript程序执行Ajax极其繁琐，所以一定要使用框架来完成。而Axios就是目前最流行的前端Ajax框架。Axios官网使用Axios和使用Vue一样，导入对应的*.js文件即可。官方提供的script标签引入方式为：
axios-前后端数据交互流程
qq_52998673的博客
11-08 6356
axios-前后端数据交互流程
Axios如何实现数据请求、前后端通信——（具体代码是如何实现的）
秀秀的奇妙旅行
10-20 9513
在学习前端项目的过程中，使用了axios，所以总结一下axios实现数据传输的方式 Axiosaxios的概念什么是Ajax导入axiosAxios拦截器记录用户登录状态方法（cookie、token、session）token的使用实例Axios请求方法总结 Axios axios的概念 axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 axios是ajax a..
Axios实现前后端异步通信(代替Jquery)
十三月的博客
05-28 400
IDEA中javaScript必须设置为ES6标准 cdn方式引入axios的js文件 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> cdn方式引入vue的js文件 <script src="https://cdn.staticfile.org/vue/2.5.21/vue.min.js"></script> data.json ...
使用axios进行前后端通信，并解决vue2 axios跨域问题
dayu199804的博客
07-28 643
使用axios进行前后端通信，并解决vue2 axios跨域问题
vue前后端分离，axios请求后台数据，axios的使用，前端获取后端数据
你走过的路 风都是暖的
11-07 3192
首先安装axios npm install axios 定义request.js request.js import axios from 'axios' const instance = axios.create({ baseURL: "http://localhost:8081", //服务器ip及端口号 timeout: 3000, }) export default instance; 请求工具类 import request from '@/utlis/r
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值