前言
刚写了一个关于此的项目移动端进行记录一下，哪里觉得写的不对的地方，希望各位大佬多提提宝贵的意见，废话不多说，上代码。
1、 新建文件 request.ts
//引入移动端 vant UI 框架引入提示方式
import {
Toast, Dialog } from "vant";
//引入路由实现跳转
import Router from "@/router/index";
//引入axios，结构出相应的方法进行使用
import axios, {
AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';
export class Request {
public static axiosInstance: AxiosInstance;
// 初始化
public static init() {
// 创建axios实例
this.axiosInstance = axios.create({
// import.meta.env.VITE_BASE_API使用的是创建的 .env.development 文件和.env.production文件中，不同开发模式的接口取值， as string 将值替换成字符类型
baseURL: import.meta.env.VITE_BASE_API as string,
timeout: 50000,
});
// 初始化拦截器
this.initInterceptors();
return axios;
};
// 初始化拦截器
public static initInterceptors() {
// 设置post请求头
this.axiosInstance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/**
* 请求拦截器
* 每次请求前，如果存在token则在请求头中携带token
*/
this.axiosInstance.interceptors.request.use(
(config?: AxiosRequestConfig<any>) => {
let fig: any = config;
Toast.loading({
message: '请求中...', forbidClick: true, duration: 50000 });
return config;
},(error: any) => {
Toast.clear();
console.log(error);
},
);
// 响应拦截器
this.axiosInstance.interceptors.response.use(
// 请求成功
(response: AxiosResponse) => {
if (response.status === 200) {
Toast.clear();
if(response.data.code === 0) {
return response.data;
} else {
Request.errorHandle(response.data);
return response.data;
}
} else {
Toast.clear();
Request.errorHandle(response.data);
return response;
};
},
// 请求失败
(error: any) => {
Toast.clear();
const {
response} = error;
if (response) {
// 请求已发出，但是不在2xx的范围
Request.errorHandle(response);
return Promise.reject(response.data);
} else {
Toast.fail('网络连接异常,请稍后再试!');
};
}
);
};
/**
* http握手错误
* @param res 响应回调,根据不同响应进行不同操作
*/
private static errorHandle(res: any) {
// 状态码判断
switch (res.code) {
case 401:
Dialog.confirm({
title: '系统提示',
message: '登录状态已过期，您可以继续留在该页面，或者重新登录'
}).then( () => {
Router.push("/");
})
break;
case 403: Toast.fail('当前操作无权限'); break;
case 404: Toast.fail('请求的资源不存在'); break;
case 500: Toast.fail(res.msg); break;
case 502: Toast.fail("连接失败"); break;
default: Toast.fail('连接错误');
};
};
};
2、配置统一访问路径，新建文件reqTools.ts文件。
// 引入存储缓存的方法
import Cookies from "./cookies";
// 引入配置好的axios
import {
Request } from "./request";
// parameter: 请求参数，isToken 不传默认 true
const ReqTools = async (parameter: any, isToken: boolean = true) => {
// 初始化请求
Request.init();
// 每次请求前，如果存在token则在请求头中携带token
isToken ? parameter.headers = {
'Authorization': 'Bearer ' + Cookies.get('token')} : {
};
return await Request.axiosInstance(parameter);
};
export default ReqTools;
3、编辑统一接口访问类，新建 api.ts 文件。
//引入axios封账
import {
ReqTools } from './reqTools'
//方法抛出
export default class Apis {
public static login (data: any) {
return ReqTools({
url: '后端给的接口地址',
method: '请求方式，get,post,put 等',
params: data, // get传参方式
data, // 简写，全写：data: data, 这是post 传参方式
}, false); // 不需要传token时， 添加 false
};
}
3、组件中使用， login.vue
<script setup lang="ts">
// 引入组件
import Apis from "@/utils/api";
// 登录事件
const onSubmit = ():void => {
//调用登录请求
Apis.login({
/** 参数 */}).then((response: any):void => {
// 写逻辑的地方 · · ·
})
};
</script>