axios在vite+vue3.0+ts中的封裝和應(yīng)用
目前，關(guān)于vue中使用axios的作為前端和后端接口交互工具的用法文章，網(wǎng)絡(luò)某博客上數(shù)不勝數(shù)。但是細(xì)心的朋友會(huì)發(fā)現(xiàn)，很多文章都是從粘貼復(fù)制過來的，講的模擬兩可，缺斤少兩的毛病著實(shí)讓人怒氣橫生。所以今天讓小編來給大家安排最新版的axios整合vite+vue3.0+ts的具體封裝步驟。跟著我的步伐，擼起來。。。（備注：學(xué)習(xí)交流加QQ：1766226354）
以下內(nèi)容均基于下方視頻完結(jié)后的擴(kuò)展：
1、安裝axios
npm i axios注意：這里的安裝命令就是默認(rèn)安裝最新版本的axios
2、封裝請(qǐng)求錯(cuò)誤代碼提示
目錄結(jié)構(gòu)?error-code-type.ts
error-code-type.ts文件內(nèi)容如下：
export const errorCodeType = function(code:string):string{
? ?let msg:string = ""
? ?switch (code) {
? ? ? ?case "401":
? ? ? ? ? ?msg = '認(rèn)證失敗，無法訪問系統(tǒng)資源'
? ? ? ? ? ?break;
? ? ? ?case "403":
? ? ? ? ? ?msg = '當(dāng)前操作沒有權(quán)限'
? ? ? ? ? ?break;
? ? ? ?case "404":
? ? ? ? ? ?msg = '訪問資源不存在'
? ? ? ? ? ?break;
? ? ? ?case "default":
? ? ? ? ? ?msg = '系統(tǒng)未知錯(cuò)誤，請(qǐng)反饋給管理員'
? ? ? ? ? ?break;
? ? ? ?default:
? ? ? ? ? ?return '未知錯(cuò)誤，請(qǐng)聯(lián)系管理員'
? ?}
? ?return msg
}3、封裝request.ts
這里用到的element-plus大家可以參考其官網(wǎng)安裝即可，傳送門：
官網(wǎng)：https://element-plus.org/en-US/component/border.html
安裝命令：npm install element-plus --save目錄結(jié)構(gòu)
request.ts文件內(nèi)容如下：
import axios from 'axios';
import { errorCodeType } from '@/script/utils/error-code-type';
import { ElMessage, ElLoading } from 'element-plus';
// 創(chuàng)建axios實(shí)例
const service = axios.create({
? ?// 服務(wù)接口請(qǐng)求
? ?baseURL: import.meta.env.VITE_APP_BASE_API,
? ?// 超時(shí)設(shè)置
? ?timeout: 15000,
? ?headers:{'Content-Type':'application/json;charset=utf-8'}
})
let loading:any;
//正在請(qǐng)求的數(shù)量
let requestCount:number = 0
//顯示loading
const showLoading = () => {
? ?if (requestCount === 0 && !loading) {
? ? ? ?loading = ElLoading.service({
? ? ? ? ? ?text: "拼命加載中，請(qǐng)稍后...",
? ? ? ? ? ?background: 'rgba(0, 0, 0, 0.7)',
? ? ? ? ? ?spinner: 'el-icon-loading',
? ? ? ?})
? ?}
? ?requestCount++;
}
//隱藏loading
const hideLoading = () => {
? ?requestCount--
? ?if (requestCount == 0) {
? ? ? ?loading.close()
? ?}
}
// 請(qǐng)求攔截
service.interceptors.request.use(config => {
? ?showLoading()
? ?// 是否需要設(shè)置 token
? ?// config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個(gè)請(qǐng)求攜帶自定義token 請(qǐng)根據(jù)實(shí)際情況自行修改
? ?// get請(qǐng)求映射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)
})
// 響應(yīng)攔截器
service.interceptors.response.use((res:any) => {
? ? ? ?hideLoading()
? ? ? ?// 未設(shè)置狀態(tài)碼則默認(rèn)成功狀態(tài)
? ? ? ?const code = res.data['code'] || 200;
? ? ? ?// 獲取錯(cuò)誤信息
? ? ? ?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)接口請(qǐng)求超時(shí)";
? ? ? ?}
? ? ? ?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、完整vite.config.ts文件內(nèi)容
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { loadEnv } from 'vite';
import path from 'path';
// https://vitejs.dev/config/
export default({ command, mode }) => {
? ?return defineConfig({
? ? ? ?plugins: [vue()],
? ? ? ?server:{
? ? ? ? ? ?host: '127.0.0.1',
? ? ? ? ? ?port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),
? ? ? ? ? ?strictPort: true, // 端口被占用直接退出
? ? ? ? ? ?https: false,
? ? ? ? ? ?open: true,// 在開發(fā)服務(wù)器啟動(dòng)時(shí)自動(dòng)在瀏覽器中打開應(yīng)用程序
? ? ? ? ? ?proxy: {
? ? ? ? ? ? ? ?// 字符串簡(jiǎn)寫寫法
? ? ? ? ? ? ? ?// '/foo': '',
? ? ? ? ? ? ? ?// 選項(xiàng)寫法
? ? ? ? ? ? ? ?'/dev-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(/^\/dev-api/, '')
? ? ? ? ? ? ? ?}
? ? ? ? ? ?},
? ? ? ? ? ?hmr:{
? ? ? ? ? ? ? ?overlay: false // 屏蔽服務(wù)器報(bào)錯(cuò)
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?resolve:{
? ? ? ? ? ?alias:{
? ? ? ? ? ? ? ?'@': path.resolve(__dirname,'./src'),
? ? ? ? ? ? ? ?'~script': path.resolve(__dirname,'./src/script'),
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?css:{
? ? ? ? ? ?// css預(yù)處理器
? ? ? ? ? ?preprocessorOptions: {
? ? ? ? ? ? ? ?scss: {
? ? ? ? ? ? ? ? ? ?additionalData: '@import "@/assets/styles/global.scss";'
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?build:{
? ? ? ? ? ?chunkSizeWarningLimit: 1500, // 分塊打包，分解塊，將大塊分解成更小的塊
? ? ? ? ? ?rollupOptions: {
? ? ? ? ? ? ? ?output:{
? ? ? ? ? ? ? ? ? ?manualChunks(id) {
? ? ? ? ? ? ? ? ? ? ? ?if (id.includes('node_modules')) {
? ? ? ? ? ? ? ? ? ? ? ? ? ?return id.toString().split('node_modules/')[1].split('/')[0].toString();
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}
? ?}) ?
}5、使用axios封裝
6、完整的環(huán)境變量配置文件production和development
6.1、項(xiàng)目根目錄的development文件內(nèi)容如下
# 開發(fā)環(huán)境 VITE_APP_TITLE = "前端技術(shù)棧" #端口號(hào) VITE_APP_PORT = "3002" # 請(qǐng)求接口 VITE_APP_DEV_URL = "http://localhost:8282" # 前綴 VITE_APP_BASE_API = "/dev-api"6.2、項(xiàng)目根目錄下的production文件內(nèi)容如下
# 開發(fā)環(huán)境 VITE_APP_TITLE = "前端技術(shù)棧" #端口號(hào) VITE_APP_PORT = "3002" # 請(qǐng)求接口 VITE_APP_DEV_URL = "http://localhost:8282" # 前綴 VITE_APP_BASE_API = "/dev-api"7、在任何vue文件內(nèi)使用接口：
注意：這里還有一個(gè)PageParams全局分頁(yè)對(duì)象：
目錄結(jié)構(gòu)：
page-params.ts文件內(nèi)容如下：
// 全局統(tǒng)一分頁(yè)參數(shù)類型聲明 declare interface PageParams { ? ?pageNum:number, ? ?pageSize:number, ? ?type?:Model, // 可選參數(shù) ? ?readonly sort?:string // 只讀可選參數(shù) } interface Model{ ? ?type?:string } export default PageParams;
標(biāo)簽：
