axios封装,请求带loading

import axios from 'axios';
import { Loading } from 'element-ui';

//声明一个基础接口变量
let base_url;
//配置开发环境
if (process.env.NODE_ENV === 'development') {
    base_url = window.Glob.development;
}
// 配置生产环境
if (process.env.NODE_ENV === 'production') {
  base_url = window.Glob.production;
}
axios.defaults.baseURL = base_url;

// 请求数据转换成form-data格式
// axios.defaults.transformRequest = [function (data) {
// 	let src = ''
// 	for (let item in data) {
// 	  src += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
// 	}
// 	return src
// }]

// 发送请求前拦载
let loading;
let loadingNum=0;
function startLoading() {
    if(loadingNum==0){
        loading = Loading.service({
			lock: true,
			text: '处理中...',
			spinner: 'el-icon-loading',
			background: '#636a7b00'
        })
    }
    //请求数量加1
    loadingNum++;
}
function endLoading() {
    //请求数量减1
    loadingNum--
    if(loadingNum<=0){
        loading.close()
    }
}
// 发送请求前拦载
axios.interceptors.request.use((config) => {
	var urlsa = config.url;
	var t = Date.parse(new Date()) / 1000;//时间戳
	if (urlsa.indexOf("?") != -1) {
		config.url = config.url + "&datest=" + t
	} else {
		config.url = config.url + "?datest=" + t
	}
	config.headers.token = window.localStorage.getItem("token");
	config.headers.user = window.localStorage.getItem("username");
	 // 显示 Loading 效果
	startLoading()
	return config
}, (error) => {
	endLoading(); // 隐藏 Loading
	return Promise.reject(error)
})

//发送请求返回拦载
axios.interceptors.response.use(function (response) {
	endLoading(); // 隐藏 Loading
	// 对响应数据做点什么
	var data = response.data;
	//console.log("打印请求回来")
	if (data.code == 2006) {
		window.localStorage.clear('username');//删除
		window.localStorage.clear('token');//删除
		window.location.href = "/#/login";
		return false;
	}
	// if (!data.code) {
	// 	// console.error(data.message);
	// 	// to 这里可以进一步处理错误
	// 	return Promise.reject(data.message); // 抛出错误消息
	//   }
	return response;
},
	function (error) {
		// 对响应错误做点什么
		endLoading(); // 隐藏 Loading
        return Promise.reject(error);
		// return false;
	}
);


/**
* 封装的请求基类方法
* @param url 地址
* @param method 请求类型
* @param headers 头部信息
* @param data 数据(post用)
* @param params 数据(get用)
* @param success 成功返回
* @param error 失败返回
* @constructor
*/
axios.Request = function ({ url, method = "GET", data = {}, params = {}, success, error }) {
	let headers = '';
	if (method == "GET" || method == "get") {
		headers = 'Content-Type: application/json';
	} else {
		headers = 'Content-Type: application/x-www-form-urlencoded';
	}
	axios({
		url: url,
		headers: headers,
		method: method,
		data: data,
		params: params,
	}).then(res => {
		typeof success === "function" && success(res.data);
	}).catch(e => {
		typeof error === "function" && error(e);
	})
}

/**
* get封装请求
* @param url 地址
* @param data 数据
* @param success 成功返回
* @param error 失败返回
*/
axios.getRequest = function ({ url, data }, success, error) {
	axios.Request({ url, method: "GET", params: data, success, error })
}

/**
* post请求
* @param url 地址
* @param data 数据
* @param success 成功返回
* @param error 失败返回
*/
axios.postRequest = function ({ url, data }, success, error) {
	axios.Request({ url, method: "POST", data: data, success, error })
}


export default axios;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大得369

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值