Vue 封装http 请求

封装message 提示

Message.js

javascript 复制代码

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

javascript 复制代码

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;