?前言

大家好，我是yma16，本文分享關(guān)于前端vue3分享——項目封裝axios、使用env環(huán)境變量。
該系列往期文章：
csdn新星計劃vue3+ts+antd賽道——利用inscode搭建vue3(ts)+antd前端模板
認(rèn)識vite_vue3 初始化項目到打包
什么是axios

axios是一個流行的JavaScript庫，用于在瀏覽器和Node.js環(huán)境中進(jìn)行HTTP請求。下面是axios的原理：
Axios是基于Promise構(gòu)建的，它可以使用async/await，因此在發(fā)出請求時，返回的是一個Promise對象。這個Promise對象中包含了請求成功和請求失敗的回調(diào)函數(shù)。
Axios發(fā)送的請求被封裝成一個請求對象。請求對象包括請求url、請求方法、請求頭、請求數(shù)據(jù)等信息。在創(chuàng)建這個請求對象時，可以設(shè)置全局的默認(rèn)值，這些默認(rèn)值可以用于所有請求。
Axios是通過XMLHttpRequest對象來實現(xiàn)請求的。在瀏覽器中，XMLHttpRequest是通過ActiveXObject對象創(chuàng)建的。在Node.js中，它使用http或https模塊來實現(xiàn)請求。
Axios可以進(jìn)行攔截器的設(shè)置，它提供了全局請求攔截器和全局響應(yīng)攔截器。這些攔截器可以用于在請求或響應(yīng)之前進(jìn)行一些處理，比如添加請求頭或?qū)憫?yīng)進(jìn)行一些處理。
Axios還提供了取消請求的功能。這個功能是通過一個CancelToken對象來實現(xiàn)的。使用這個對象可以在發(fā)送請求后取消這個請求。這對于用戶取消請求或者在組件銷毀時取消請求非常有用。
Axios提供了一些高級功能，比如支持請求和響應(yīng)的轉(zhuǎn)換、自動處理不同數(shù)據(jù)格式（如JSON、FormData、Binary等）以及在Node.js中處理代理等。

vite處理環(huán)境變量

Vite 的工作原理主要分為兩部分：開發(fā)時編譯和生產(chǎn)時打包。在開發(fā)時，Vite 利用 ES Modules 特性實現(xiàn)了單文件組件快速編譯和熱更新。在生產(chǎn)時，Vite 利用 Rollup 進(jìn)行打包，生成靜態(tài)文件。
在開發(fā)模式下，Vite 會通過一個簡單的 HTTP 服務(wù)器來服務(wù)于應(yīng)用程序。當(dāng)瀏覽器請求應(yīng)用程序時，Vite 會查找所有的入口文件，并生成一個映射表，把每個文件的依賴關(guān)系記錄下來。當(dāng)應(yīng)用程序需要加載某個模塊時，Vite 會首先解析該模塊的依賴，并根據(jù)依賴關(guān)系加載其他模塊。在加載過程中，Vite 會利用瀏覽器的緩存機(jī)制，以及服務(wù)端的緩存機(jī)制來優(yōu)化加載速度。
對于環(huán)境變量的處理，Vite 的原理是通過對項目中 import.meta 對象的支持來實現(xiàn)的。import.meta 對象提供了當(dāng)前模塊的元數(shù)據(jù)信息，包括模塊的 URL 和環(huán)境變量等信息。在 Vite 中，用戶可以在 vite.config.js 配置文件中設(shè)置環(huán)境變量，然后通過 import.meta.env 對象來訪問這些變量，從而動態(tài)地讀取環(huán)境變量。在打包時，Vite 會自動將這些環(huán)境變量編譯到生成的靜態(tài)文件中，從而實現(xiàn)在生產(chǎn)環(huán)境中使用環(huán)境變量的功能。

?vue3封裝統(tǒng)一的axios請求

官方文檔：https://www.axios-http.cn/docs/interceptors
封裝一個簡單的axios，在每次請求的請求頭都加上 headers: {'X-Custom-Header': 'yma16'}

?? 請求攔截器

http.ts

import axios from "axios";

// 實例
const createInstance = (baseURL:string)=>{
    return axios.create({
        baseURL:baseURL,
        timeout: 1000,
        headers: {'X-Custom-Header': 'yma16'}
    })
};

// @ts-ignore
const http:any=createInstance('');


// 添加請求攔截器
http.interceptors.request.use(function (config:any) {
    // 在發(fā)送請求之前做些什么
    return config;
}, function (error:any) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
});

// 添加響應(yīng)攔截器
http.interceptors.response.use(function (response:any) {
    // 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應(yīng)數(shù)據(jù)做點什么
    return response;
}, function (error:any) {
    // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應(yīng)錯誤做點什么
    return Promise.reject(error);
});

export {http};

在api調(diào)用的時候引入http
這是登錄的api

import {http} from "../..//http/index";

export const loginUser: any = (params: any) => {
  return http.post("/cloudApi/user/login", params);
};

export const registerUser: any = (params: any) => {
  return http.post("/cloudApi/user/register", params);
};

登錄查看請求頭出現(xiàn)X-Custom-Header:yma16

?vue3使用env環(huán)境變量

?? vite env變量規(guī)則

變量規(guī)則
以 VITE_ 為前綴的變量才會暴露給經(jīng)過 vite 處理的代碼
在.env 定義

VITE_APP_HOST= http://localhost:9090/

在.env.development定義

VITE_APP_HOST= http://localhost:9090/

在.env.production定義

VITE_APP_HOST= https://yongma16.xyz/back-front/

使用import.meta調(diào)用env環(huán)境變量
在util工具目錄下編寫一個全局獲取變量的方法globalEnv

export const globalEnv=()=>{
    return import.meta.env
};

?? vite.config獲取env參數(shù)

vite.config獲取env參數(shù)使用oadEnv
process.cwd() 可以獲取當(dāng)前路徑
vite開發(fā)環(huán)境代理切換
mode參數(shù)為config參數(shù)的模式

mode 本運(yùn)行為development

修改vite.config.ts

import { defineConfig,loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
// @ts-ignore
import { resolve } from "path";
// @ts-ignore
import Components from "unplugin-vue-components/vite";
// @ts-ignore
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig(({mode})=>{
  // 運(yùn)行模式
  console.log('mode',mode)
  // 當(dāng)前路徑
  console.log('process.cwd()',process.cwd())
  // @ts-ignore
  const env=loadEnv(mode,process.cwd())
  console.log('env',env)
  const proxy={
    "^/cloudApi/": {
      target: env.VITE_APP_HOST,
      changeOrigin: true,
      ws: true,
      rewrite: (path) => path.replace(/^\/cloudApi/, ""),
    },
  };

  return {
    // 打包相對路徑
    base: './',
    server: {
      port: 3000,
      open: true,
      cors: true,
      proxy: {
        ...proxy
      },
    },
    "css": {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          patterns: [resolve(__dirname, "./src/style/main.less")],
        },
      },
    },
    resolve: {
      alias: {
        "@": resolve(__dirname, "src"),
      },
    },
    plugins: [
      vue(),
      Components({
        resolvers: [AntDesignVueResolver()],
      }),
    ],
  }
});

?總結(jié)

項目封裝axios、vite使用env環(huán)境變量主要是統(tǒng)一代碼規(guī)范，便于開發(fā)且后續(xù)好維護(hù)。

?? 編碼sliod原則

SOLID 原則是一種設(shè)計原則，用于指導(dǎo)編寫可維護(hù)、可擴(kuò)展、易于理解和可復(fù)用的代碼。

• 單一職責(zé)原則 (Single Responsibility Principle, SRP): 一個類或模塊只負(fù)責(zé)一項職責(zé)，降低耦合度。

• 開閉原則 (Open/Closed Principle, OCP): 類和模塊應(yīng)該對擴(kuò)展開放，對修改關(guān)閉，通過抽象化來實現(xiàn)。

• 里氏替換原則 (Liskov Substitution Principle, LSP): 子類應(yīng)該可以替換父類并且仍能正常運(yùn)行。

• 接口隔離原則 (Interface Segregation Principle, ISP): 不應(yīng)該強(qiáng)迫使用者依賴于他們不需要的接口。

• 依賴反轉(zhuǎn)原則 (Dependency Inversion Principle, DIP): 抽象不應(yīng)該依賴細(xì)節(jié)，細(xì)節(jié)應(yīng)該依賴于抽象。

這些原則可以幫助開發(fā)者設(shè)計出高質(zhì)量的面向?qū)ο蟠a，并促進(jìn)代碼的可維護(hù)性和可擴(kuò)展性，提高代碼的復(fù)用度。

?結(jié)束

本文分享到這結(jié)束，如有錯誤或者不足之處歡迎指出！

?? 點贊，是我創(chuàng)作的動力！
?? 收藏，是我努力的方向！
?? 評論，是我進(jìn)步的財富！
?? 感謝你的閱讀！文章來源地址http://www.zghlxwxcb.cn/news/detail-725135.html

到了這里，關(guān)于前端vue3分享——項目封裝axios、vite使用env環(huán)境變量的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！