Vue中Axios的封装与接口管理详解
作者:啵啵丶 时间:2024-04-30 10:28:36
一、 Axios 的封装
在 Vue 项目中,和后台进行数据交互是频繁且不可或缺的,刚开始没进行 Axios 封装的时候,每次请求后台数据都是写的完整的路径,特别长,尤其是基准地址,每次都要复制一遍加在前面,冗余特别大。封装完 Axios 后,调用接口就简短多了,如果后期出现基准地址的改变,只需要在配置中更改一次即可。
安装 Axios
npm install axios
引入
我们先在 src 文件夹下创建一个 utils 文件,再在该文件夹下创一个 requery.js 文件
requery.js
import axios from 'axios'
axios.defaults.baseURL = "http://...." // 这里写接口基准地址
export default axios
接口管理
我们再在 src 文件夹下创建一个 api 文件,里面存放接口
我们把一个模块相关的接口封装在一个 .js 文件中,例如我现在创建一个信息管理模块的接口管理文件,取名为 messageManege.js
① 首先要在该文件中引入我们的 requery.js 文件
import request from '@/utils/requery'
② 封装方法为 post 的接口
//获取所有验收数据
export const getAllCheck = () => request({
method:'post',
url:"manager/selectAllCheckInfo"
})
③ 封装方法为 get 的接口
//获取所有延期数据
export const getAllDelay = () => request({
url:"manager/selectAllPostponeInfo"
})
④ 封装参数要拼接在链接后面的接口
//验收状态处理
export const CheckHandle = (x1,x2) => {
return request({
method: 'post',
url:`manager/check?status=${x1}&&id=${x2}`
})
}
⑤ 封装请求头为 "Content-Type": "application/json" 的接口
export const UpdateStage = data => {
return request({
method: 'post',
url: 'stage/update',
headers: {
"Content-Type": "application/json",
},
data: data
})
}
注意这里要传入的 data 要转换成 json 格式
统一暴露接口
在 src/api 的下面新建 index.js 文件用来统一暴露所有接口
import {
getAllCheck,CheckHandle,getAllDelay,UpdateStage
} from './messageManage'
export const getAllCheckAPI = getAllCheck
export const CheckHandleAPI = CheckHandle
export const getAllDelayAPI = getAllDelay
export const UpdateStageAPI = UpdateStage
在组件中使用
① mounted() 中使用
async mounted() {
const res = await getAllCheckAPI();
console.log(res.data) // 打印返回的数据
},
② 在普通方法中的使用
async StartProcess(s, i) {
// 调用后端接口
return CheckHandleAPI(s, i).then((res) => {
if (res.status == 200) {
this.$message.success("状态修改成功!");
} else {
this.$message.error("状态修改失败!");
}
});
},
这样 axios 的封装和使用就完成啦~
补充:封装get方法和post方法
我们常用的ajax请求方法有get、post、put等方法,相信小伙伴都不会陌生。axios对应的也有很多类似的方法,不清楚的可以看下文档。但是为了简化我们的代码,我们还是要对其进行一个简单的封装。下面我们主要封装两个方法:get和post。
get方法:我们通过定义一个get函数,get函数有两个参数,第一个参数表示我们要请求的url地址,第二个参数是我们要携带的请求参数。get函数返回一个promise对象,当axios其请求成功时resolve服务器返回 值,请求失败时reject错误值。最后通过export抛出get函数。
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err =>{
reject(err.data)
})
});}
post方法:原理同get基本一样,但是要注意的是,post方法必须要使用对提交从参数对象进行序列化的操作,所以这里我们通过node的qs模块来序列化我们的参数。这个很重要,如果没有序列化操作,后台是拿不到你提交的数据的。这就是文章开头我们import QS from 'qs';的原因。如果不明白序列化是什么意思的,就百度一下吧,答案一大堆。
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err =>{
reject(err.data)
})
});
}
这里有个小细节说下,axios.get()
方法和axios.post()
在提交数据时参数的书写方式还是有区别的。区别就是,get的第二个参数是一个{},然后这个对象的params属性值是一个参数对象的。而post的第二个参数就是一个参数对象。两者略微的区别要留意哦!
来源:https://blog.csdn.net/m0_53620413/article/details/123630551
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python使用xlrd模块读写Excel文件的方法
PyCharm Community安装与配置的详细教程
![](https://img.aspxhome.com/file/2023/3/81813_0s.png)
C#如何连接MySQL数据库
使用AngularJS制作一个简单的RSS阅读器的教程
![](https://img.aspxhome.com/file/2023/5/129715_0s.png)
jQuery结合CSS制作漂亮的select下拉菜单
怎么才能限制SQL Server只能让指定的机器连接
Go gRPC服务双向流式RPC教程
详解JavaScript中的this指向问题
sql server 表结构修改方法
go slice 数组和切片使用区别示例解析
![](https://img.aspxhome.com/file/2023/0/87610_0s.jpg)
用pandas按列合并两个文件的实例
![](https://img.aspxhome.com/file/2023/3/107193_0s.jpg)
Sql Server 2000删除数据库备份文件
web标准:CSS clear的属性及使用方法
vue中的路由传值与重调本路由改变参数
![](https://img.aspxhome.com/file/2023/9/132969_0s.png)
js里面的变量范围分享
python实战教程之OCR文字识别方法汇总
![](https://img.aspxhome.com/file/2023/6/90506_0s.png)
Python实现密钥密码(加解密)实例详解
![](https://img.aspxhome.com/file/2023/4/67264_0s.jpg)