Vite4、Vue3、Axios 针对请求模块化封装搭配自动化导入(简单易用)

针对请求模块化封装搭配自动化导入(简单易用)

  • 目标目录
  • 目标代码
  • 前提
  • 步入正题
    • src / utils / index.js
    • src /api / index.js
    • src /api / request.js
    • src /api / service.js
    • src /api / utils.js
    • src /api / modules / demo.js
  • 自动化配置
    • vite.config.js
    • eslint 校验问题

1

作者GitHub:https://github.com/gitboyzcf 有兴趣可关注!!!

目标目录

1

目标代码

<script setup>// 在js中直接调用useRequest() 函数就可以获取到配置的接口const { API_DEMO_POST, API_DEMO_GET } = useRequest()// 使用非常简单API_DEMO_GET({page: 1, pageSize: 10}).then(res => {  // 请求返回结果})
</script>

接下来看下面配置👇

前提

这里用到的相关npm包

  • element-plus 在这里用到了消息提示
  • axios 网络请求库
  • vueuse Vue hooks库
  • nprogress 加载进度条
  • consola 好看的日志打印

以上包根据自己需求修改即可、可有可无

步入正题

src / utils / index.js

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { ElMessage } from 'element-plus'
/*** 获取资源路径* @param {相对路径} relativePath*    如果要动态获取assets的文件文件夹下的images中的图片*      relativePath 传入 assets/images/name.png* @returns 文件所在路径*/
const getStaticResource = (relativePath) => {return new URL(`../${relativePath}`, import.meta.url)
}/*** 消息提示* @param {弹出消息类型=》 info error warning success loading } type* @param {弹出消息文本} message* @param {弹出时间} duration* @param {弹出消息偏移} offset*/
const msg = (type, message, duration = 2000, offset = 90) => {ElMessage({message,type,duration,offset})
}/*** 模块化方式处理 默认处理 modules文件夹下的所有js文件 内容以export default导出的文件* @param { 模块内容集合 } moduleContext* @returns modules集合*/
const modulesHandle = (moduleContext = {}) => {if (!Object.keys(moduleContext).length) returnconst modules = {}Object.keys(moduleContext).forEach((v) => {for (let key in moduleContext[v].default) {modules[key] = moduleContext[v].default[key]}})return modules
}export { getStaticResource, modulesHandle, NProgress, msg }

src /api / index.js

import { modulesHandle } from '@/utils'const apis = modulesHandle(import.meta.glob('./modules/**/*.js', { eager: true }))
export const useRequest = () => apis

mport.meta.glob函数从文件系统导入多个模块,详情请看官网 https://cn.vitejs.dev/guide/features#glob-import

src /api / request.js

import { service } from './service'
function createRequest(service) {function request(config) {// config 自定义配置// axios默认配置const configDefault = {baseURL: import.meta.env.VITE_APP_API_BASEURL, // 所有通过此配置的基础地址 在.env文件配置timeout: 15000, // 请求超时时间responseType: 'json', // 响应类型headers: {// 请求头配置...}}const requestConfig = Object.assign(configDefault, config)return service(requestConfig)}return request
}export const request = createRequest(service)

src /api / service.js

import axios from 'axios'
import { httpLogError, requestError, throttleToLogin } from './utils'
import { msg, NProgress } from '@/utils'
import consola from 'consola'export function createService() {const request = axios.create()request.interceptors.request.use((request) => {NProgress.start()return request},(err) => {NProgress.done()return Promise.reject(err)})request.interceptors.response.use((response) => {NProgress.done()const dataAxios = response.data// 这个状态码是和后端约定的const { code, data } = dataAxios// 根据 code 进行判断if (code === undefined) {return dataAxios} else {// 目前和公司后端口头约定是字符串,以防万一强制转字符串switch (`${code}`) {// code === 200 | 2 代表没有错误case '200':consola.withTag(`${response.config.url}`).success()return data// code === 400001004 代表token 过期打回登录页case '400001004':throttleToLogin()breakcase '400':// 不是正确的 codereturn requestError(response)case '401':// 错误登录return throttleToLogin()default:// 不是正确的 codereturn requestError(response)}}}, (error) => {NProgress.done()console.log(error)const status = error.response?.statusswitch (status) {// TODO 再考虑下怎么判断是跨域问题case undefined:case null:httpLogError(error, '网路错误或请求跨域')breakcase 400:httpLogError(error, '请求错误')breakcase 401:httpLogError(error, '未授权,请登录')breakcase 403:httpLogError(error, '拒绝访问')breakcase 404:httpLogError(error, `请求地址出错: ${error.response.config.url}`)breakcase 408:httpLogError(error, '请求超时')breakcase 500:httpLogError(error, '服务器内部错误')breakcase 501:httpLogError(error, '服务未实现')breakcase 502:httpLogError(error, '网关错误')breakcase 503:httpLogError(error, '服务不可用')breakcase 504:httpLogError(error, '网关超时')breakcase 505:httpLogError(error, 'HTTP版本不受支持')breakdefault:httpLogError(error, '请求错误')break}msg('error', error.message)return Promise.reject(error)})return request
}export const service = createService()

src /api / utils.js

import { msg as nMsg } from '@/utils'
import consola from 'consola'export const httpLogError = (error, msg) => {error.message = msgconsola.error(new Error(msg))
}export const requestError = (response) => {return new Promise((_, reject) => {const { data } = responseconst msg = `api请求出错 ${response.config.url}${data.message}`nMsg('error', msg)consola.error(new Error(msg))reject(data)})
}

src /api / modules / demo.js

import { request } from '@/api/request.js'
export default {API_DEMO_POST(data = {}) {return request({baseURL: '/mock/login',url: 'api/mock',method: 'post',data})},API_DEMO_GET(params = {}) {return request({url: '/demo/get',method: 'get',params})}
}

自动化配置

安装 unplugin-auto-import/vite插件 https://github.com/unplugin/unplugin-auto-import#readme

npm install unplugin-auto-import -D 
or
pnpm install unplugin-auto-import -D
or
yarn add unplugin-auto-import -D

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({plugins: [vue(),AutoImport({imports: ['vue','vue-router','pinia',{'@/api': ['useRequest']}],// eslintrc: {// enabled: true, // Default `false`// filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`// globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')}})]
})

eslint 校验问题

在vue文件中直接使用时 vscode 报红 说未定义
err

  1. 上面 vite.config.js中注释部分放开,运行项目根据这个./.eslintrc-auto-import.json相对路径会生成该 js 文件 。 注:生成后 把 enabled属性改为 false 以免再次生成
  2. .在根目录的 eslintrc.cjseslint配置文件中添加下面代码👇
    module.exports = {// ...'extends': [// ...'./.eslintrc-auto-import.json']
    }
    






到这里就结束了,后续还会更新 前端 系列相关,还请持续关注!
感谢阅读,若有错误可以在下方评论区留言哦!!!

111



推荐文章👇

Vue3-Composition API 快速上手(简单易懂)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/211255.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QEMU环境调试方法

本文从调试的角度出发&#xff0c;分享QEMU调试过程中的常见调试方法。 1.如何查看makefile构建过程执行的命令&#xff1f; 为了深入理解ucore操作系统实验的编译链接细节&#xff0c;需要知道makefile在执行的过程中一步一步的指令执行情况。然而大部分的工程中&#xff0c;…

CopyClip 2:提升Mac开发效率的利器

在Mac开发的日常工作中&#xff0c;高效地处理剪贴板内容是一个至关重要的任务。幸运的是&#xff0c;有一款强大的工具可以极大地提升你的开发效率——CopyClip 2。本文将介绍CopyClip 2的功能和优势&#xff0c;以及它是如何成为Mac开发者们不可或缺的利器的。 CopyClip 2 简…

【Docker】进阶之路:(二)Docker简介

【Docker】进阶之路&#xff1a;&#xff08;二&#xff09;Docker简介 什么是 DockerDocker 由来与发展历程Docker的架构与组成Docker容器生态容器核心技术容器规范容器平台技术 为什么使用DockerDocker的应用场景 什么是 Docker 简单地讲&#xff0c;Docker就是一个应用容器…

正则表达式(9):扩展正则表达式

正则表达式&#xff08;9&#xff09;&#xff1a;扩展正则表达式 小结 本博文转载自 前文中一直在说&#xff0c;在Linux中&#xff0c;正则表达式可以分为”基本正则表达式”和”扩展正则表达式”。 我们已经认识了”基本正则表达式”&#xff0c;现在&#xff0c;我们来认…

T天池SQL训练营(五)-窗口函数等

–天池龙珠计划SQL训练营 5.1窗口函数 5.1.1窗口函数概念及基本的使用方法 窗口函数也称为OLAP函数。OLAP 是OnLine AnalyticalProcessing 的简称&#xff0c;意思是对数据库数据进行实时分析处理。 为了便于理解&#xff0c;称之为窗口函数。常规的SELECT语句都是对整张表进…

Unity由“鼠标点不准物体”引发的Camera的相关思考

问题 前段一个同事在使用Unity开发时遇到一个奇怪的问题&#xff0c;使用左键点击发射射线的方式选择物体&#xff0c;总是选不准&#xff0c;尤其是小的物体&#xff0c;鼠标点击到物体上&#xff0c;有时能选上&#xff0c;有时选不上&#xff0c;偶尔点击到物体旁边…

Tensorflow.js 入门学习指南

Tensorflow.js 入门学习指南 官方地址TensorFlow.js (google.cn) Tensorflowjs是一个机器学习框架&#xff0c;使用 TensorFlowJS 可以创建生产级机器学习模型 安装包 浏览器设置 您可以通过两种主要方式在浏览器项目中获取 TensorFlow.js&#xff1a; 使用脚本代码。从 NPM…

基于MATLAB车辆防碰撞系统仿真

摘要 近年来&#xff0c;汽车行业的飞速发展使得我国的汽车保有量快速增长&#xff0c;但由此引发的交通事故导致的人员伤亡数量仍居高不下。从保护人身安全和降低交通事故发生的可能性的角度出发&#xff0c;车辆防碰撞系统能够使驾驶员在没注意到与前方车辆有碰撞危险的情况下…

Python:核心知识点整理大全11-笔记

目录 ​编辑 6.2.4 修改字典中的值 6.2.5 删除键—值对 注意 删除的键—值对永远消失了。 6.2.6 由类似对象组成的字典 6.3 遍历字典 6.3.1 遍历所有的键—值对 6.3.2 遍历字典中的所有键 往期快速传送门&#x1f446;&#xff08;在文章最后&#xff09;&#xff1a; 6.…

风力发电对讲 IP语音对讲终端IP安防一键呼叫对讲 医院对讲终端SV-6005网络音频终端

风力发电对讲 IP语音对讲终端IP安防一键呼叫对讲 医院对讲终端SV-6005网络音频终端 目 录 1、产品规格 2、接口使用 2.1、侧面接口功能 2.2、背面接口功能 2.3、面板接口功能 3、功能使用 1、产品规格 输入电源&#xff1a; 12V&#xff5e;24V的直流电源 网络接口&am…

前端知识库Html5和CSS3

1、常见的水平垂直居中实现方案 最简单的方案是flex布局 .container{display: flex;align-items: center;justify-content: center; }绝对定位配合margin:auto(一定要给.son宽高) .father {position: relative;height: 300px; } .son {position: absolute;top: 0;right: 0;b…

PID控制参数整定(调节方法)原理+图示+MATLAB调试

PID控制参数整定&#xff08;调节方法&#xff09;原理图示MATLAB调试 Chapter1 PID控制参数整定&#xff08;调节方法&#xff09;原理图示MATLAB调试序一、P参数选取二、I的调节三、D的调节四、总结 Chapter2 PID参数调整&#xff0c;个人经验&#xff08;配输出曲线图&#…

【51单片机系列】独立按键介绍

本文是关于独立按键的介绍及使用。首先介绍了按键&#xff0c;包括什么是按键及使用按键时如何实现软件消抖。然后使用proteus仿真实现独立按键控制LED指示灯的操作。 之前的LED、蜂鸣器、数码管中IO口都是作为输出使用&#xff0c;这里通过独立按键实验介绍IO口作为输入的使用…

Edge 中的msedgewebview2总想联网

目录预览 一、问题描述二、原因分析三、解决方案四、参考链接 一、问题描述 使用Edge浏览器的时候&#xff0c;右下角火绒总会弹出“msedgewebview2”想要联网的弹窗&#xff0c;如下 点击发起程序&#xff0c;找到路径如下&#xff1a; C:\Program Files (x86)\Microsoft\…

zabbix 进阶

zabbix的字段发现机制&#xff1a; zabbix客户端主动和服务端联系&#xff0c;将自己的地址和端口发送服务端实现字段添加监控主机。 客户端是主动一方。 缺点&#xff1a;自定义网段中主机数量太多&#xff0c;登记耗时会很久&#xff0c;而且这个自动发现机制不是很稳定。…

centos6.8下载地址

Index of /centos-store/6.8/isos/x86_64/ (liu.se) archive.kernel.org : http - rsynclinuxsoft.cern.ch : http - rsyncmirror.nsc.liu : http - rsync

被遗忘的书籍

C-被遗忘的书籍_牛客小白月赛82 (nowcoder.com) #include <iostream> #include <queue> #include <string> #include <stack> #include <vector> #include <set> #include <map> #include <unordered_map> #include <unor…

计组中各种透明性总结

虚拟存储器&#xff0c;对应用程序员不可见。主存- cache层由硬件自动完成&#xff0c;对程序员不可见。cache纯硬件&#xff0c;程序员不可见。内存&#xff0c;对程序员可见。知识点来源&#xff1a;王道模拟第六套主存-辅存层由硬件和操作系统共同完成&#xff0c;对应用程序…

【Docker一】Docker架构、镜像操作和容器操作

一、docker基本管理和概念 1、概念 docker&#xff1a;开源的应用容器引擎。基于go语言开发的。运行在Linux系统中的开源的轻量级的“虚拟机” docker的容器技术可用在一台主机上轻松到达为任何应用创建一个轻量级到的&#xff0c;可移植的&#xff0c;自给自足的容器 dock…

免费的数据采集软件,最新免费的几款数据采集软件【2024】

在当今数字化时代&#xff0c;数据是企业决策和业务发展的关键。而如何高效获取数据成为许多企业和研究机构的关注焦点。本文将深入探讨数据采集软件的种类。帮助大家选择最适合自己需求的数据采集工具。 数据采集软件种类 在众多数据采集软件中&#xff0c;有一类强大而多样…