目前，關(guān)于vue中使用axios的作為前端和后端接口交互工具的用法文章，網(wǎng)絡某博客上數(shù)不勝數(shù)。因為項目從0到1開始需要基于vite+vue3.0+ts中封裝axios，所以今天讓小編來給大家安排axios整合vite+vue3.0+ts的具體封裝步驟。記錄一下自己封裝步驟，跟著我的步伐，擼起來。。。（學習視頻分享：vue視頻教程）

以下內(nèi)容均基于下方視頻完結(jié)后的擴展：

2021最新最詳細的Vite+vue3+Volar+Ts+Element-plus框架學習項目視頻

1、安裝axios

npm i axios

注意：這里的安裝命令就是默認安裝最新版本的axios

2、封裝請求錯誤代碼提示error-code-type.ts

• 代碼如下：

export const errorCodeType = function(code:string):string{     let errMessage:string = "未知錯誤"     switch (code) {         case 400:          errMessage = '錯誤的請求'          break          case 401:          errMessage = '未授權(quán)，請重新登錄'          break         case 403:          errMessage = '拒絕訪問'          break          case 404:          errMessage = '請求錯誤,未找到該資源'          break          case 405:          errMessage = '請求方法未允許'          break          case 408:          errMessage = '請求超時'          break          case 500:          errMessage = '服務器端出錯'          break          case 501:          errMessage = '網(wǎng)絡未實現(xiàn)'          break          case 502:          errMessage = '網(wǎng)絡錯誤'          break          case 503:          errMessage = '服務不可用'          break          case 504:          errMessage = '網(wǎng)絡超時'          break          case 505:          errMessage = 'http版本不支持該請求'          break          default:          errMessage = `其他連接錯誤 --${code}`     }     return errMessage }

3、封裝request.ts

這里用到的element-plus大家可以參考其官網(wǎng)安裝即可，傳送門：

element-plus官網(wǎng)

安裝命令： npm install element-plus --save

• 代碼如下：

import axios from 'axios'; import { errorCodeType } from '@/script/utils/error-code-type'; import { ElMessage, ElLoading } from 'element-plus';  // 創(chuàng)建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; //正在請求的數(shù)量 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 請根據(jù)實際情況自行修改     // get請求映射params參數(shù)     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()         // 未設置狀態(tài)碼則默認成功狀態(tài)         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 = "系統(tǒng)接口請求超時";         }         else if (message.includes("Request failed with status code")) {             message = "系統(tǒng)接口" + message.substr(message.length - 3) + "異常";         }         ElMessage.error({             message: message,             duration: 5 * 1000         })         return Promise.reject(error)     } )  export default service;

4、自動導入vue3相關(guān)函數(shù)(auto-imports.d.ts)

• auto-imports.d.ts放在src目錄下
• 注意：需要安裝yarn add unplugin-auto-import或者npm i unplugin-auto-import -D
• 安裝完重啟項目
• 代碼如下：

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、自動導入Element Plus 相關(guān)函數(shù)(components.d.ts)

• 注意：需要安裝npm i unplugin-vue-components -D或者yarn add unplugin-vue-components
• 安裝完重啟項目

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文件配置

• 注意：需要安裝npm i unplugin-icons或者yarn 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 相關(guān)函數(shù)，如：ref, reactive, toRef 等                 imports: ["vue"],                  // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)                 // 自動導入 Element Plus 相關(guān)函數(shù)，如：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,// 在開發(fā)服務器啟動時自動在瀏覽器中打開應用程序             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();                         }                     }                 }             }         }     }) }

7、使用axios封裝

完整的環(huán)境變量配置文件.env.production和.env.development

7.1、項目根目錄的development文件內(nèi)容如下

# 開發(fā)環(huán)境 VITE_APP_TITLE = "阿綿"  # 端口號  VITE_APP_PORT = "3000"  # 請求接口  VITE_APP_DEV_URL = "http://localhost:8088"  # 前綴  VITE_APP_BASE_API = "/api"

7.2、項目根目錄下的production文件內(nèi)容如下

# 開發(fā)環(huán)境  VITE_APP_TITLE = "阿綿"  # 端口號  VITE_APP_PORT = "3000"  # 請求接口  VITE_APP_DEV_URL = "http://localhost:8088"  # 前綴  VITE_APP_BASE_API = "/api"

8、在任何vue文件內(nèi)使用接口：

• 注意：這里還有一個PageParams全局分頁對象：

• page-params.ts

• 代碼如下：

// 全局統(tǒng)一分頁參數(shù)類型聲明  declare interface PageParams {     pageNum: number, pageSize: number, type?: Model, // 可選參數(shù)      readonly sort?: string // 只讀可選參數(shù)  } interface Model { type?: string } export default PageParams;

總結(jié)

本篇討論的主要內(nèi)容是：

1. axios整合vite+vue3.0+ts的具體封裝步驟，對于細節(jié)方面還沒很細，可以擴展更深入封裝它

（學習視頻分享：web前端開發(fā)、編程基礎視頻）