Vue中的axios请求（get与post）

最新推荐文章于 2025-06-04 10:07:40 发布

原创最新推荐文章于 2025-06-04 10:07:40 发布 · 900 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #axios

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用axios与qs进行前后端接口调用，包括GET与POST请求的方法，以及解决跨域问题的策略。通过具体示例，展示了如何在Vue项目中配置并使用这些库来实现与后端服务的交互。

接口文件的主要内容

（1）接口功能
（2）接口地址
（3）接口参数：参数个数。参数恨意，数据类型、示例值等
（4）请求方式：get | post
（5）返回值

get和post方式的区别（Java）：

get：所有的参数在地址栏显示。（Java利用get提交数据将，非ASCII字符需要转码）
post：地址栏没有参数。（Java利用post提交数据，非ASCII字符不需要转码）

一、调取接口先要安装axios与qs依赖

npm install axios --save-dev

随着axios的安装，qs随之也就安装好了，在main.js入口文件中引用

//axios安装好后即可导入
import axios from 'axios';
import qs from 'qs';
//将$axios和qs挂在原型上，方便在实例中能够使用用this.$axios
Vue.prototype.$axios=axios;
Vue.prototype.qs=qs;

二、跨域问题的解决

出现跨域的三种情况：通信协议不同、域名不同、端口不同。
前端地址：http://localhost:8080
后台地址：http://localhost:8080
解决方案：项目根目录\config\index.js

module.exports = {
  dev: {
	proxyTable: {
		'/api':{
			target:'http://localhost:8080/product',
			changeOrigin:true,
			pathRewrite:{
				'^/api':''
			}
		}
	},
    
}

三、利用get()请求后台接口

不带参数的get 请求

let url="/api/login.jsp";
this.$axios.get(url).then((res)=>{
	//res.data - 接收服务器返回的数据
})

带参数的get请求

let url="/api/login.jsp";
let data={
	params:{
		//参数列表： 参数名:参数值
	}
}
this.$axios.get(url,data).then((res)=>{
	//res.data - 接收服务器返回的数据
})

三、利用post()请求后台接口

let url = '/api/staff/passwordCheck.jsp';
let data = {
	//参数列表： 参数名:参数值
};
this.$axios.post(url,this.qs.stringify(data)).then(res=>{
	//res.data - 接收服务器返回的数据
});