一、前言
这篇文章跟vite关系不大，下篇写环境变量配置的时候就是vite相关了，今天这里主要讲一下在vue3中axios的实战用法以及Api的统一管理，手把手教学望各位在这里能碰擦出灵感的火花，放飞五彩的思绪。
二、目录结构
src目录下新建api文件，
api.ts进行接口API的统一管理axios.ts封装请求配置拦截器status.ts管理接口返回状态码
三、axios.ts
代码内逐行解释
代码语言：javascript复制import axios from 'axios';
import { showMessage } from "./status"; // 引入状态码文件
import { ElMessage } from 'element-plus' // 引入el 提示框，这个项目里用什么组件库这里引什么
// 设置接口超时时间
axios.defaults.timeout = 60000;
// 请求地址，这里是动态赋值的的环境变量，下一篇会细讲，这里跳过
// @ts-ignore
axios.defaults.baseURL = import.meta.env.VITE_API_DOMAIN;
//http request 拦截器
axios.interceptors.request.use(
config => {
// 配置请求头
config.headers = {
//'Content-Type':'application/x-www-form-urlencoded', // 传参方式表单
'Content-Type':'application/json;charset=UTF-8', // 传参方式json
'token':'80c483d59ca86ad0393cf8a98416e2a1' // 这里自定义配置，这里传的是token
};
return config;
},
error => {
return Promise.reject(error);
}
);
//http response 拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
const {response} = error;
if (response) {
// 请求已发出，但是不在2xx的范围
showMessage(response.status); // 传入响应码，匹配响应码对应信息
return Promise.reject(response.data);
} else {
ElMessage.warning('网络连接异常,请稍后再试!');
}
}
);
// 封装 GET POST 请求并导出
export function request(url='',params={},type='POST'){
//设置 url params type 的默认值
return new Promise((resolve,reject)=>{
let promise
if( type.toUpperCase()==='GET' ){
promise = axios({
url,
params
})
}else if( type.toUpperCase()=== 'POST' ){
promise = axios({
method:'POST',
url,
data:params
})
}
//处理返回
promise.then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
})
}
复制代码四、status.ts
不解释了，粘走直接用
代码语言：javascript复制export const showMessage = (status:number|string) : string => {
let message:string = "";
switch (status) {
case 400:
message = "请求错误(400)";
break;
case 401:
message = "未授权，请重新登录(401)";
break;
case 403:
message = "拒绝访问(403)";
break;
case 404:
message = "请求出错(404)";
break;
case 408:
message = "请求超时(408)";
break;
case 500:
message = "服务器错误(500)";
break;
case 501:
message = "服务未实现(501)";
break;
case 502:
message = "网络错误(502)";
break;
case 503:
message = "服务不可用(503)";
break;
case 504:
message = "网络超时(504)";
break;
case 505:
message = "HTTP版本不受支持(505)";
break;
default:
message = `连接出错(${status})!`;
}
return `${message}，请检查网络或联系管理员！`;
};
复制代码五、api.ts
引入axios导出的request,按功能模块进行接口的管理
import { request } from './axios'
/**
* @description -封装User类型的接口方法
*/
export class UserService { // 模块一
/**
* @description 用户登录
* @param {string} username - 用户名
* @return {HttpResponse} result
*/
static async login1(params) { // 接口一
return request('/login',params, 'post')
}
static async login2(params) { // 接口二
return request('/login',params, 'post')
}
static async login3(params) { // 接口三
return request('/login',params, 'post')
}
}
export class landRelevant { // 模块二
/**
* @description 获取地列表
* @return {HttpResponse} result
*/
static async landList(params) {
return request('/land_list_info',params, 'get')
}
}
复制代码六、应用
无需在main.ts内引入，需要什么模块的接口在相应页面引入改模块即可
<script setup>
import { onMounted } from "vue";
import {UserService} from '/src/api/api.ts'
onMounted(()=>{
login1()
login2()
})
const login1 = async () => {
const loginParams = {
username: 'test',
password: 'test',
}
const res = await UserService.login1(loginParams)
// console.log(res)
}
const login2 = () => {
const loginParams = {
username: 'test',
password: 'test',
}
UserService.login2(loginParams).then((res)=>{
// console.log(res)
})
}
</script>
复制代码七、结束语
今天在配置项目时在网上搜寻了众多vue3 axios的相关文章，发现没有完全符合本人需求的内容，所以最后集百家之长整合了这么一篇文章，望对各位有所帮助
