axios请求方法二次封装

requestMessage.js

/**
  * @Descripttion: axios和操作提示的二次封装
  * @Author: lgen
*/
  
import Vue from 'vue'
import axios from 'axios'

/* 页面顶部弹出提示
 * @method showMsg
 * @param {String} text 提示的文字
 * @param {Number} icon 状态图标，1成功，2警告，3消息，4错误
 * @param {Number} duration 显示时间，毫秒，设为 0 则不会自动关闭
*/
const showMsg=(text,icon,duration)=>{
    let typeText=''
    switch(icon){
        case 1:
            typeText='success';
            break;
        case 2:
            typeText='warning';
            break;
        case 3:
            typeText='';
            break;
        default:
            typeText='error';
    }

    Vue.prototype.$message({
        message:text,
        type:typeText,
        duration:duration?duration:1000
    });
}

 /* 删除对象中的空值
 * @method deleteObjNull
 * @param {Object} obj 需要处理的对象
*/
const deleteObjNull=(obj)=>{
    for(let key in obj){
        if(obj[key]==='' || obj[key]===undefined || obj[key]===null){
            delete obj[key];
        }
    }
}

// 加载动画
let loading;
const openFullScreen=()=>{
    loading = Vue.prototype.$loading({
      lock: true,
      text: '加载中...',
      target:'.loadingBox', //Loading 需要覆盖的 DOM 节点
      spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.5)'
    });
}

//清除动画
const endLoading=()=>{
    loading.close();
}

// 请求配置
const instance=axios.create({
    timeout: 60000, //指定请求超时的毫秒数(0 表示无超时时间)
})

// 添加请求拦截器
instance.interceptors.request.use(config=>{
    // 在发送请求之前
    if(loading){
        // 如果存在动画，则先清除再执行新的动画
        endLoading(); //动画结束
    }
    openFullScreen(); //加载动画

    // 处理打包之后请求代理404错误
    if(config.url.includes('/other')){
        //接口1
        config.url=process.env.VUE_APP_OTHER+config.url.replace('/aa','');
    }else if(config.url.includes('/mall')){
        //接口2
        config.url=process.env.VUE_APP_MALL+config.url.replace('/bb','');
    }else if(config.url.includes('/design')){
        //接口3
        config.url=process.env.VUE_APP_DESIGN+config.url.replace('/cc','');
    }

    return config;
},error=>{
    // 请求出错
    setTimeout(() => {
        endLoading(); //动画结束
        showMsg('加载超时');
     },3000)

    return Promise.reject(error);
})

// 添加响应拦截器
instance.interceptors.response.use(response=>{
    endLoading(); //动画结束
    return response;
},error=>{
    // 响应出错
    setTimeout(() => {
        endLoading(); //动画结束
        showMsg('请求失败');
      },1000)

    return Promise.reject(error);
})

/* 统一axios请求方法的格式
 * @method axiosRequest
 * @param {String} url 请求的地址
 * @param {Object} data 请求参数
 * @param {Boolean} isForm 是否表单数据，含有文件上传
 * @param {String} type 请求类型
 * @return {Object} promise对象
*/
const axiosRequest=async (url='',data={},isForm=false,type='POST')=>{
    let result; //请求的返回值
    type = type.toUpperCase();
    deleteObjNull(data); // 删除请求参数中的空值

    // 如果是表单数据，进行处理
    if(isForm){
        let form=new FormData()
        Object.keys(data).forEach(key=>{
            form.append(key,data[key])
        })
        data=form
    }else{
        data=JSON.stringify(data)
    }

    // 请求配置
    let requestOptions={
        method:type,
        url:url,
        headers:{
            'Content-type':isForm ? 'multipart/form-data' : 'application/json'
        },
        params:type==='GET'?data:'',
        data:type!=='GET'?data:''
    }

    // 请求实例
    await instance(requestOptions).then(res=>{
        result=res;
    })
    return result;
}

export {
	showMsg,
	axiosRequest
}