Vue 封裝http 請求

封裝message 提示
?

Message.js

import { ElMessage } from "element-plus";const showMessage = (msg,callback,type)=>{ElMessage({message: msg,type: type,duration: 3000,onClose:()=>{if (callback) {callback();}}});    
}const message = {error: (msg,callback) => {showMessage(msg,callback,'error');},success: (msg,callback) => {showMessage(msg,callback,'success');},warning: (msg,callback) => {showMessage(msg,callback,'warning');},info: (msg,callback) => {showMessage(msg,callback,'info');}
}
// 導出
export default message;

封裝Request.js

import axios from "axios";
import { ElLoading } from "element-plus";
import Message from "./Message";
const contentTypeForm = "application/x-www-form-urlencoded";
const contentTypeJson = "application/json";// 創建實例
const instance = axios.create({baseURL: "/api",timeout: 15 * 1000,// 15 秒
});let loading = null;
// 請求前置過濾器
instance.interceptors.request.use((config) => {if (config.showLoading) {loading = ElLoading.service({lock: true,text: '加載中',background: 'rgba(0, 0, 0, 0.7)'});            }return config;// 返回很重要},(error) => {// 請求錯誤 也要記得關閉彈窗if (error.config.showLoading && loading) {loading.close();}// 提示錯誤信息Message.error("請求發送失敗啦");return Promise.reject(error);});
// 請求后置過濾器
instance.interceptors.response.use((response) => {const { showLoading, errorCallBack,showError } = response.config;// 關閉請求if (showLoading) {loading.close();}const responseData = response.data;if (responseData.code === 200) {return responseData;}else if (responseData.code === 901) {return Promise.reject({ showError: false, msg:"登錄超時"});}else {if (errorCallBack) {errorCallBack(responseData)}return Promise.reject({ showError:showError, msg:responseData.info});}},(error) =>{if (error.config.showLoading) {loading.close();}return Promise.reject({showError:true,msg:"網絡異常"});});const request = (config) => {const {url,params,dataType,showLoading = true,errorCallBack,showError = true}  = config;let contentType = contentTypeForm;let formData = new FormData();// 拼接參數for (let key in params) {formData.append(key, params[key] == undefined ? "" : params[key]); }if (dataType === "json" && dataType != null) {contentType = contentTypeJson;    }let headers = {"Content-Type": contentType,"X-Requested-With": "XMLHttpRequest",};return instance.post(url, formData, {headers: headers,showLoading: showLoading,errorCallBack: errorCallBack,}).catch(error => {if (showError) {Message.error(error.msg);}return null;});
};// 導出request
export default request;

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/67259.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/67259.shtml
英文地址,請注明出處:http://en.pswp.cn/web/67259.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

簡單的停車場管理系統的C語言實現示例

以下是一個簡單的停車場管理系統的C語言實現示例。該示例使用結構體來管理停車場的車位信息&#xff0c;并提供基本車輛進入、離開以及顯示停車場狀態功能。 #include <stdio.h> #include <stdlib.h> #include <string.h>#define MAX_SLOTS 10 // 最大車位數…

解除阿里云盤壓縮包分享限制的最新工具(2025年更新)

前言 前段時間&#xff0c;為了在阿里云盤分享一些資料&#xff0c;嘗試了好多種方法&#xff1a;改文件名后綴&#xff0c;打包自解壓&#xff0c;使用將壓縮文件追加在圖片文件后&#xff0c;還有的一些工具&#xff0c;雖然能偽裝文件但并不太好用&#xff0c;最后自己寫了…

HarmonyOS:創建應用靜態快捷方式

一、前言 靜態快捷方式是一種在系統中創建的可以快速訪問應用程序或特定功能的鏈接。它通常可以在長按應用圖標&#xff0c;以圖標和相應的文字出現在應用圖標的上方&#xff0c;用戶可以迅速啟動對應應用程序的組件。使用快捷方式&#xff0c;可以提高效率&#xff0c;節省了查…

21.0.2-為什么選FreeRTOS 第21章-FreeRTOS項目實戰--基礎知識之新建任務、啟動流程、編碼風格、系統配置

這個是全網最詳細的STM32項目教學視頻。 第一篇在這里: 視頻在這里 STM32智能小車V3-STM32入門教程-openmv與STM32循跡小車-stm32f103c8t6-電賽 嵌入式學習 PID控制算法 編碼器電機 跟隨 **V3:HAL庫開發、手把手教學下面功能&#xff1a;PID速度控制、PID循跡、PID跟隨、遙控、…

12 款開源OCR發 PDF 識別框架

2024 年 12 款開源文檔解析框架的選型對比評測&#xff1a;PDF解析、OCR識別功能解讀、應用場景分析及優缺點比較 這是該系列的第二篇文章&#xff0c;聚焦于智能文檔處理&#xff08;特別是 PDF 解析&#xff09;。無論是在模型預訓練的數據收集階段&#xff0c;還是基于 RAG…

DeepSeek R1:推理模型新紀元與價格戰

標題&#xff1a;DeepSeek R1&#xff1a;推理模型新紀元與價格戰 文章信息摘要&#xff1a; DeepSeek R1的發布標志著推理模型研究的重要轉折點&#xff0c;其采用四階段強化學習訓練方法&#xff0c;結合監督微調和拒絕采樣&#xff0c;顯著提升了模型的推理能力。這一進展不…

深度剖析C++17中的std::optional:處理可能缺失值的利器

文章目錄 一、基本概念與設計理念二、構建與初始化&#xff08;一&#xff09;默認構造&#xff08;二&#xff09;值初始化&#xff08;三&#xff09;使用std::make_optional&#xff08;四&#xff09;使用std::nullopt 三、訪問值&#xff08;一&#xff09;value()&#x…

擬合損失函數

文章目錄 擬合損失函數一、線性擬合1.1 介紹1.2 代碼可視化1.2.1 生成示例數據1.2.2 損失函數1.2.3 繪制三維圖像1.2.4 繪制等高線1.2.5 損失函數關于斜率的函數 二、 多變量擬合2.1 介紹2.2 代碼可視化2.2.1 生成示例數據2.2.2 損失函數2.2.3 繪制等高線 三、 多項式擬合3.1 介…

基于微信小程序的移動學習平臺的設計與實現(LW+源碼+講解)

專注于大學生項目實戰開發,講解,畢業答疑輔導&#xff0c;歡迎高校老師/同行前輩交流合作?。 技術范圍&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬蟲、數據可視化、安卓app、大數據、物聯網、機器學習等設計與開發。 主要內容&#xff1a;…

【公因數匹配——暴力、(質)因數分解、哈希】

題目 暴力代碼&#xff0c;Acwing 8/10&#xff0c;官網AC #include <bits/stdc.h> using namespace std; const int N 1e610; vector<int> nums[N]; int main() {ios::sync_with_stdio(0);cin.tie(0);int n;cin >> n;for(int i 1; i < n; i){int x;ci…

127周一復盤 (165)玩法與難度思考

1.上午測試&#xff0c;小改了點東西&#xff0c; 基本等于啥也沒干。 匆忙趕往車站。 從此進入春節期間&#xff0c;沒有開發&#xff0c;而思考與設計。 2.火車上思考玩法與難度的問題。 目前的主流作法實際上并不完全符合不同玩家的需求&#xff0c; 對這方面還是要有自…

【數據結構】_鏈表經典算法OJ(力扣版)

目錄 1. 移除鏈表元素 1.1 題目描述及鏈接 1.2 解題思路 1.3 程序 2. 反轉鏈表 2.1 題目描述及鏈接 2.2 解題思路 2.3 程序 3. 鏈表的中間結點 3.1 題目描述及鏈接 3.2 解題思路 3.3 程序 1. 移除鏈表元素 1.1 題目描述及鏈接 原題鏈接&#xff1a;203. 移除鏈表…

編譯器gcc/g++ --【Linux基礎開發工具】

文章目錄 一、背景知識二、gcc編譯選項1、預處理(進行宏替換)2、編譯&#xff08;生成匯編&#xff09;3、匯編&#xff08;生成機器可識別代碼&#xff09;4、鏈接&#xff08;生成可執行文件或庫文件&#xff09; 三、動態鏈接和靜態鏈接四、靜態庫和動態庫1、動靜態庫2、編譯…

Java 注解與元數據

Java學習資料 Java學習資料 Java學習資料 一、引言 在 Java 編程中&#xff0c;注解&#xff08;Annotation&#xff09;和元數據&#xff08;Metadata&#xff09;是兩個重要的概念。注解為程序提供了一種在代碼中嵌入額外信息的方式&#xff0c;這些額外信息就是元數據。元…

操作系統指定用戶密碼永不過期

背景 實際生產環境中&#xff0c;數據中心操作系統通常會有基線要求&#xff08;比如等保之類&#xff09;&#xff0c;要求設置操作系統密碼有效期&#xff0c;但是infra團隊或者操作系統管理員或者某些業務配置使用的操作系統用戶又需要密碼不能不停修改&#xff08;或者說一…

無用的知識又增加了:is_assignable means?

std::pair的默認operator被delete掉了&#xff0c;取而代之的是兩個enable_if版本。 為什么這么設計&#xff0c;我的理解是在std::map里&#xff0c;已經保存的元素的key值是不能被修改的&#xff0c;比如 注意&#xff0c;下面的代碼會修改key值&#xff0c;編譯時出現錯誤…

能量提升法三:贊美

前情回顧&#xff1a; 《能量提升法二&#xff1a;感恩》 片段&#xff1a;“感恩&#xff0c;就像是在跟世界說&#xff1a;謝謝你&#xff0c;我收到了&#xff0c;我很喜歡&#xff0c;請多來點” 把它歸還人海&#xff0c;就當作每一個人&#xff0c;都有可能是曾經幫助…

25美賽ABCDEF題詳細建模過程+可視化圖表+參考論文+寫作模版+數據預處理

詳情見該鏈接&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 25美國大學生數學建模如何準備&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;-CSDN博客文章瀏覽閱讀791次&#xff0c;點贊13次&#xff0c;收藏7次。通過了解比賽基本…

2025企業繁體鏡像站鏡像站群版 | 干擾碼+拼音插入

技術背景 高效的SEO優化和內容采集是企業站群系統的核心競爭力。本文將詳細介紹一套企業級網站鏡像工具包&#xff0c;重點展示其在SEO優化、內容采集、智能處理等方面的創新實現。 系統特性 1. SEO優化功能 關鍵詞智能布局標題標簽優化鏈接結構優化移動端適配頁面加速優化…

動態規劃<九>兩個數組的dp

目錄 引例 LeetCode經典OJ題 1.第一題 2.第二題 3.第三題 4.第四題 5.第五題 6.第六題 7.第七題 引例 OJ傳送門LeetCode<1143>最長公共子序列 畫圖分析&#xff1a; 使用動態規劃解決 1.狀態表示 ------經驗題目要求 經驗為選取第一個字符串的[0,i]區間以及第二個字…