vue3 + vite 进行axios请求封装及接口API的统一管理

2024-03-05 18:59| 来源: 网络整理| 查看: 265

一、前言

这篇文章跟vite关系不大，下篇写环境变量配置的时候就是vite相关了，今天这里主要讲一下在vue3中axios的实战用法以及Api的统一管理，手把手教学望各位在这里能碰擦出灵感的火花，放飞五彩的思绪。

二、目录结构

src目录下新建api文件，

api.ts 进行接口API的统一管理 axios.ts 封装请求配置拦截器 status.ts 管理接口返回状态码三、axios.ts

代码内逐行解释

import axios from 'axios'; import { showMessage } from "./status"; // 引入状态码文件 import { ElMessage } from 'element-plus' // 引入el 提示框，这个项目里用什么组件库这里引什么 // 设置接口超时时间 axios.defaults.timeout = 60000; // 请求地址，这里是动态赋值的的环境变量，下一篇会细讲，这里跳过 // @ts-ignore axios.defaults.baseURL = importa.env.VITE_API_DOMAIN; //http request 拦截器 axios.interceptors.request.use( config => { // 配置请求头 config.headers = { //'Content-Type':'application/x-www-form-urlencoded', // 传参方式表单 'Content-Type':'application/json;', // 传参方式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

不解释了，粘走直接用

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内引入，需要什么模块的接口在相应页面引入改模块即可

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) }) } 七、结束语

今天在配置项目时在网上搜寻了众多vue3 axios的相关文章，发现没有完全符合本人需求的内容，所以最后集百家之长整合了这么一篇文章，望对各位有所帮助

【本文地址】

公司简介

联系我们