Heim >Web-Frontend >View.js >Lassen Sie uns darüber sprechen, wie man Axios in Vite+vue3.0+ts kapselt.
Lassen Sie uns darüber sprechen, wie man Axios in Vite+vue3.0+ts kapselt.
- 青灯夜游nach vorne
- 2022-08-18 20:34:192914Durchsuche
Derzeit gibt es auf einem bestimmten Blog im Internet unzählige Artikel über die Verwendung von Axios als Interaktionstool für Front-End- und Back-End-Schnittstellen in Vue. Da das Projekt in Axios basierend auf Vite + Vue3.0 + TS von 0 bis 1 gepackt werden muss, werde ich heute den Herausgeber die spezifischen Verpackungsschritte für Axios zur Integration von Vite + Vue3.0 + TS arrangieren lassen. Zeichnen Sie Ihre eigenen Kapselungsschritte auf und folgen Sie meinem Beispiel. . . (Teilen von Lernvideos: vue-Video-Tutorial)
Der folgende Inhalt basiert auf der Erweiterung nach Fertigstellung des Videos unten:
2021 neueste und detaillierteste Vite+vue3+Volar+Ts+Element-plus Video zum Framework-Lernprojekt
1. Axios installierennpm i axios
Hinweis: Der Installationsbefehl hier dient dazu, standardmäßig die neueste Version von Axios zu installieren
2. Der Fehlercode der Paketanforderung wird angezeigt. type.ts
- Der Code lautet wie folgt:
export const errorCodeType = function(code:string):string{
let errMessage:string = "未知错误"
switch (code) {
case 400:
errMessage = '错误的请求'
break
case 401:
errMessage = '未授权，请重新登录'
break
case 403:
errMessage = '拒绝访问'
break
case 404:
errMessage = '请求错误,未找到该资源'
break
case 405:
errMessage = '请求方法未允许'
break
case 408:
errMessage = '请求超时'
break
case 500:
errMessage = '服务器端出错'
break
case 501:
errMessage = '网络未实现'
break
case 502:
errMessage = '网络错误'
break
case 503:
errMessage = '服务不可用'
break
case 504:
errMessage = '网络超时'
break
case 505:
errMessage = 'http版本不支持该请求'
break
default:
errMessage = `其他连接错误 --${code}`
}
return errMessage
}
3. Sie können sich auf die offizielle Website beziehen, um das hier verwendete Element-Plus zu installieren. plus offizielle Website安装命令：
npm install element-plus --save
Der Code lautet wie folgt:
import axios from 'axios';
import { errorCodeType } from '@/script/utils/error-code-type';
import { ElMessage, ElLoading } from 'element-plus';
// 创建axios实例
const service = axios.create({
// 服务接口请求
baseURL: import.meta.env.VITE_APP_BASE_API,
// 超时设置
// timeout: 15000,
headers:{'Content-Type':'application/json;charset=utf-8'}
})
let loading:any;
//正在请求的数量
let requestCount:number = 0
//显示loading
const showLoading = () => {
if (requestCount === 0 && !loading) {
//加载中显示样式可以自行修改
loading = ElLoading.service({
text: "拼命加载中，请稍后...",
background: 'rgba(0, 0, 0, 0.7)',
spinner: 'el-icon-loading',
})
}
requestCount++;
}
//隐藏loading
const hideLoading = () => {
requestCount--
if (requestCount == 0) {
loading.close()
}
}
// 请求拦截
service.interceptors.request.use(config => {
showLoading()
// 是否需要设置 token放在请求头
// config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?';
for (const propName of Object.keys(config.params)) {
const value = config.params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && typeof(value) !== "undefined") {
// 对象处理
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
url += subPart + encodeURIComponent(value[key]) + "&";
}
} else {
url += part + encodeURIComponent(value) + "&";
}
}
}
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use((res:any) => {
hideLoading()
// 未设置状态码则默认成功状态
const code = res.data['code'] || 200;
// 获取错误信息
const msg = errorCodeType(code) || res.data['msg'] || errorCodeType('default')
if(code === 200){
return Promise.resolve(res.data)
}else{
ElMessage.error(msg)
return Promise.reject(res.data)
}
},
error => {
console.log('err' + error)
hideLoading()
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
}
else if (message.includes("timeout")) {
message = "系统接口请求超时";
}
else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
ElMessage.error({
message: message,
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service;
4. Vue3-bezogene Funktionen (auto-imports.d.ts) automatisch importieren- auto-imports.d.ts im src-Verzeichnis
Hinweis: Sie müssen Yarn Add Unplugin-Auto-Import oder NPM I Unplugin-Auto-Import -D installieren. Starten Sie das Projekt nach der Installation neu. Der Code lautet wie folgt: declare global {
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const customRef: typeof import('vue')['customRef']
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
const effectScope: typeof import('vue')['effectScope']
const EffectScope: typeof import('vue')['EffectScope']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h']
const inject: typeof import('vue')['inject']
const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef']
const markRaw: typeof import('vue')['markRaw']
const nextTick: typeof import('vue')['nextTick']
const onActivated: typeof import('vue')['onActivated']
const onBeforeMount: typeof import('vue')['onBeforeMount']
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
const onDeactivated: typeof import('vue')['onDeactivated']
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
const onMounted: typeof import('vue')['onMounted']
const onRenderTracked: typeof import('vue')['onRenderTracked']
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
const onScopeDispose: typeof import('vue')['onScopeDispose']
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: typeof import('vue')['onUpdated']
const provide: typeof import('vue')['provide']
const reactive: typeof import('vue')['reactive']
const readonly: typeof import('vue')['readonly']
const ref: typeof import('vue')['ref']
const resolveComponent: typeof import('vue')['resolveComponent']
const shallowReactive: typeof import('vue')['shallowReactive']
const shallowReadonly: typeof import('vue')['shallowReadonly']
const shallowRef: typeof import('vue')['shallowRef']
const toRaw: typeof import('vue')['toRaw']
const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs']
const triggerRef: typeof import('vue')['triggerRef']
const unref: typeof import('vue')['unref']
const useAttrs: typeof import('vue')['useAttrs']
const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars']
const useSlots: typeof import('vue')['useSlots']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
}
export {}
- 5 Plus verwandte Funktionen (components.d.ts)
- Hinweis: npm i muss installiert werden, unplugin-vue-components -D oder Yarn add unplugin-vue-components
- Starten Sie das Projekt nach der Installation neu
import '@vue/runtime-core'
declare module '@vue/runtime-core' {
export interface GlobalComponents {
ElCard: typeof import('element-plus/es')['ElCard']
ElCol: typeof import('element-plus/es')['ElCol']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElFooter: typeof import('element-plus/es')['ElFooter']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElMain: typeof import('element-plus/es')['ElMain']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
Loading: typeof import('element-plus/es')['ElLoadingDirective']
}
}
export {}
6 , vite.config.ts-Dateikonfiguration
- Hinweis: npm i unplugin-icons oder Yarn muss installiert sein, add unplugin-icons
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { loadEnv } from 'vite';
import path from 'path';
// 路径
const pathSrc = path.resolve(__dirname,'src')
// https://vitejs.dev/config/
export default({ command, mode }) => {
return defineConfig({
plugins: [
vue(),
AutoImport({
// Auto import functions from Vue, e.g. ref, reactive, toRef...
// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
imports: ["vue"],
// Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
resolvers: [
ElementPlusResolver(),
// Auto import icon components
// 自动导入图标组件
IconsResolver({
prefix: "Icon",
}),
],
dts: path.resolve(pathSrc, "auto-imports.d.ts"),
}),
// 自动导入 Element Plus 组件
Components({
resolvers: [
// Auto register icon components
// 自动注册图标组件
IconsResolver({
enabledCollections: ["ep"],
}),
// Auto register Element Plus components
ElementPlusResolver(),
],
dts: path.resolve(pathSrc, "components.d.ts"),
}),
// 图标
Icons({
autoInstall: true,
}),
],
server:{
host: '127.0.0.1',
//port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),
port: 3000,
strictPort: true, // 端口被占用直接退出
https: false,
open: true,// 在开发服务器启动时自动在浏览器中打开应用程序
proxy: {
// 字符串简写写法
'^/api': {
target: mode==='development'?loadEnv(mode, process.cwd()).VITE_APP_DEV_URL:loadEnv(mode, process.cwd()).VITE_APP_PROD_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
},
hmr:{
overlay: false // 屏蔽服务器报错
}
},
resolve:{
alias:{
'@': pathSrc,
}
},
css:{
// css预处理器
/*preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/styles/global.scss";'
}
}*/
preprocessorOptions: {
less: {
charset: false,
additionalData: '@import "./src/assets/style/global.less";',
},
},
},
build:{
chunkSizeWarningLimit: 1500, // 分块打包，分解块，将大块分解成更小的块
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
})
}
Komplette Umgebungsvariablen-Konfigurationsdateien .env .produktion und .env.development
- 7.1. Der Inhalt der Entwicklungsdatei im Projektstammverzeichnis ist wie folgt
# 开发环境
VITE_APP_TITLE = "阿绵"
# 端口号
VITE_APP_PORT = "3000"
# 请求接口
VITE_APP_DEV_URL = "http://localhost:8088"
# 前缀
VITE_APP_BASE_API = "/api"
7.2. Der Inhalt der Produktionsdatei im Projektstammverzeichnis ist wie folgt
# 开发环境 VITE_APP_TITLE = "阿绵" # 端口号 VITE_APP_PORT = "3000" # 请求接口 VITE_APP_DEV_URL = "http://localhost:8088" # 前缀 VITE_APP_BASE_API = "/api"8. Verwenden Sie die Schnittstelle in einer beliebigen Vue-Datei:
Hinweis: Es gibt auch ein
PageParamsglobales Paging-Objekt:
page-params.ts
- Der Code lautet wie folgt: Der Hauptinhalt dieser Diskussion ist: erweitert, um es tiefer zu kapseln
(Lernvideo-Sharing:
Web-Front-End-Entwicklung , - Grundlegendes Programmiervideo
)
Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie man Axios in Vite+vue3.0+ts kapselt.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Schauen Sie sich diese 3 Fragen an, die Sie im Vorstellungsgespräch unbedingt stellen müssen, um Ihre Vue-Kenntnisse zu testen!Nächster Artikel：Schauen Sie sich diese 3 Fragen an, die Sie im Vorstellungsgespräch unbedingt stellen müssen, um Ihre Vue-Kenntnisse zu testen!
In Verbindung stehende Artikel
Mehr sehen- Eine ausführliche Analyse der Verwendung von SVG-Symbolen in vue3+vite
- Vite3.0 ist veröffentlicht. Werfen Sie einen Blick auf die neuen Funktionen von Vite3.0
- Verstehen Sie den Vue3+Vite3-Quellcode in Sekundenschnelle, solange Sie diese 20 Bibliotheken kennen!
- [Organisation und Freigabe] 6 VSCode-Plug-Ins, die für die Vue3-Entwicklung erforderlich sind
- Über 20 praktische Vue-Komponentenbibliotheken, kommen Sie und holen Sie sie ab!
- Wie kommuniziere ich zwischen Vue-Komponenten? Mehrere Möglichkeiten der Komponentenkommunikation