vue封装axios请求

在vue项目中我们发送请求一般是使用axios 我们可以封装axios来避免冗余代码
首先引入axios

npm install axios

创建环境配置文件

NODE_ENV = 'development'
VITE_APP_TITLE = 'dev'
VITE_APP_BASE_API = '/test'
VITE_SERVE = "http://127.0.0.1"

上面是创建dev配置文件也可以定义多个自己配置即可

创建一个request的文件夹
index.ts（配置axios）

import axios from "axios";
import router from "@/router";import {ElMessage} from "element-plus";declare module 'axios' {interface AxiosInstance {(config: AxiosRequestConfig): Promise<any>}
}
// 创建一个 axios 实例
const service = axios.create({baseURL: import.meta.env.VITE_SERVE,timeout: 60000, // 请求超时时间毫秒
});//请求拦截器
service.interceptors.request.use((config) => {// config.headers("token", localStorage.getItem("token"));config.headers.token = localStorage.getItem("token");//返回配置对象return config;
});//响应拦截器 我的项目code 0代表成功 401 -1 1代表登录状态失效  需要跳转到登录页面
service.interceptors.response.use((response) => {const {code, msg} = response.data;if (code !== 0) {ElMessage({message: msg,type: "error",});}if (code == 401 || code == -1 || code == 1) {setTimeout(async () => {// 登录失效localStorage.clear();await router.push("/login");}, 2000);}//简化数据return response.data;
}, (error) => {console.log("异常", error);
},)export default service;

method.ts（封装请求）

import service from "@/request/index";
// 地址
let prefix = import.meta.env.VITE_APP_BASE_API;/*** get请求* @param url 请求地址* @param data 请求参数* @param api 特殊的请求代理* @returns*/
export function get(url: string, data: any = {}, api?: string) {let baseUrl = prefix;let params = [];for (const item in data) {params.push(`${item}=${data[item]}`);}if (api) {baseUrl = api;}url =baseUrl + url + (Object.keys(data).length ? "?" : "") + params.join("&");return service({url,method: "GET",data,});
}
/*** post请求* @param url 请求地址* @param data 请求参数* @returns*/
export function post(url: string, data = {}) {url = prefix + url;return service({url,method: "POST",data,});
}

创建api文件夹（汇总请求）
api.ts

import {get, post} from "@/request/method";/** 获取验证码 **/
export const API_Login_GetSmsCode = (phone: any) => get(`/sms/send?phone=${phone}`);
/** 验证码登录 **/
export const API_Login = (params: any) => post("/user/login", params);

上面演示了两种请求方式 get和post的使用方法

在vue页面中直接导入

import {API_Login, API_Login_GetSmsCode} from "@/api/api";// 登录表单数据
const loginForm = reactive({// 验证码登录字段smsCode: "",userPhone: ""
})// 发送验证码
async function smsSend() {if (loginForm.userPhone.length <= 0) {ElMessage.error("请输入手机号")return}const {code} = await API_Login_GetSmsCode(loginForm.userPhone)if (code === 0) {ElMessage.success("发送成功")startCountdown();}
}// 登录请求
async function loginReq() {const {code, data} = await API_Login(loginData)if (code === 0) {ElMessage.success("登录成功")localStorage.setItem("token", data.token)localStorage.setItem("userName", data.userName)await $router.push('/home')}
}