对axios进行简单的二次封装处理
export const req = (method, url, data, type = 'application/json', params = "") => {
let config = {
method: method,
url: url,
headers: {
'Content-Type': type,
'Authorization': localStorage.getItem('Authorization')
},
params: params
};
// 如果Content-Type是application/json,则直接发送JSON格式的数据
if (type === 'application/json') {
config.data = JSON.stringify(data);
} else {
// 如果不是application/json,使用transformRequest进行转换
config.data = data;
config.transformRequest = [
function (data) {
let ret = '';
for (let it in data) {
if (data.hasOwnProperty(it)) {
if (Array.isArray(data[it])) {
data[it].forEach(item => {
ret += `${encodeURIComponent(it)}[]=${encodeURIComponent(item)}&`;
});
} else {
ret += `${encodeURIComponent(it)}=${encodeURIComponent(data[it])}&`;
}
}
}
return ret;
}
];
}
return axios(config).then(res => res.data);
};
引入二次封装的axios
import {req} from "@/utils/http"
export const selectDictTypeList = (params) => { return req('get','/api/admin/dictType/index',"","",params) }
最后就是在vue页面中使用了
<template>
<div>home</div>
</template>
<script setup>
import {selectDictTypeList } from "@/api/index"
selectDictTypeList().then(res => {
console.log(res,"字典测试")
})
</script>
<style>
</style>
该封装只是极为简单的初步封装 后续需结合自己的项目情况进行自定义封装