当前位置: 首页 > article >正文

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.kler.cn/a/522660.html

相关文章:

  • go gin配置air
  • 设计模式面试题
  • Linux之详谈——权限管理
  • Windows安装Miniconda和PySide6以及配置PyCharm
  • 【Docker】Docker入门了解
  • 大模型GUI系列论文阅读 DAY4续:《Large Language Model Agent for Fake News Detection》
  • 使用 Intersection Observer 实现高效懒加载和滚动监听
  • 7. 马科维茨资产组合模型+金融研报AI长文本智能体(Qwen-Long)增强方案(理论+Python实战)
  • PPT自动化 python-pptx -7: 占位符(placeholder)
  • java爬虫工具Jsoup学习
  • mysql性能调优之SQL分析与优化
  • 图像处理之图像灰度化
  • MySQL中InnoDB逻辑存储结构
  • 第13章 深入volatile关键字(Java高并发编程详解:多线程与系统设计)
  • 蓝桥杯例题三
  • AWS Snowball
  • MySQL 事件调度器
  • 【Java数据结构】了解排序相关算法
  • maven、npm、pip、yum官方镜像修改文档
  • 学习ASP.NET Core的身份认证(基于JwtBearer的身份认证10)
  • 基于RIP的MGRE VPN综合实验
  • DNS解析防护应措施有哪些?
  • 【算法】Master Theorem 计算递归算法的时间复杂度
  • Baklib如何优化企业知识管理实现全面数字化升级与协同创新
  • K8S中高级存储之PV和PVC
  • 【嵌入式】总结——Qt开发(四)