封装request

/**
 * axios封装
 * 请求拦截、响应拦截、错误统一处理
 */

import axios from 'axios'
import router from '../router';
import api from './request_api.js'
import Cookies from 'js-cookie'
import {
	getToken,removeToken
} from '@/utils/auth'
import { Toast } from 'vant';
import store from '../store'
import {
	Message,
	Notification,
	Loading
} from 'element-ui'
import qs from "qs";
import _ from 'lodash';

//loading对象
let loading;

//当前正在请求的数量
let needLoadingRequestCount = 0;

//显示loading
function showLoading(target) {
	// 后面这个判断很重要,因为关闭时加了抖动,此时loading对象可能还存在,
	// 但needLoadingRequestCount已经变成0.避免这种情况下会重新创建个loading
	if (needLoadingRequestCount === 0 && !loading) {
		loading = Loading.service({
			lock: true,
			text: "加载中...",
			background: 'rgba(255, 255, 255, 0.7)',
			target: target || "body"
		});
	}
	needLoadingRequestCount++;
}

//隐藏loading
function hideLoading() {
	needLoadingRequestCount--;
	needLoadingRequestCount = Math.max(needLoadingRequestCount, 0); //做个保护
	if (needLoadingRequestCount === 0) {
		//关闭loading
		toHideLoading();
	}
}

//防抖:将 300ms 间隔内的关闭 loading 便合并为一次。防止连续请求时, loading闪烁的问题。
var toHideLoading = _.debounce(() => {
	if(loading) loading.close();	
	loading = null;
}, 300);

//process.env.NODE_ENV   ->  production 生产环境     dev 开发环境																		
// axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'http://192.168.2.207:10015/api' : 'https://kickstartech.7claw.com/api',
axios.defaults.baseURL = process.env.VUE_APP_API_URL
axios.defaults.timeout = 20000

//设置公共请求头部
// axios.defaults.headers.token = getToken()
// axios.defaults.headers.Authorization= 'Bearer '+ getToken()

// request 拦截器 
axios.interceptors.request.use(
	config => {
		// 登录后的token定义至headers
		if (getToken()){
			config.headers.token = getToken();
		}
		let lang = Cookies.get('language') || 'zh'
		config.headers.lang = lang == 'en' ? 1 : lang == 'zhHk' ? 2 : lang == 'zh' ? 3 : '';
		//判断当前请求是否设置了不显示Loading
		if (config.headers.showLoading !== false) {
			showLoading(config.headers.loadingTarget);
		}
		return config;
	},
	error => {
		//判断当前请求是否设置了不显示Loading
		if (config.headers.showLoading !== false) {
			hideLoading();
		}
		Message.error({
		  message: response.data.message || (lang == 'zh' ? '请求超时,请稍后再试' : 'The request timed out. Please try again later')
		})
		return Promise.reject(error);
	}
);

//response 拦截器
axios.interceptors.response.use(
	response => {
		//判断当前请求是否设置了不显示Loading(不显示自然无需隐藏)
		if (response.config.headers.showLoading !== false) {
			hideLoading();
		}
		let lang = Cookies.get('language') || 'zh'
		// 请求成功
		if (response.data.code === 200 || response.data.code === 0) {
			return response;
		}
		// 登录失效
		else if (response.data.code === 203) {
			removeToken()
			// Message.error({
			//   message: response.data.message || "出现错误,请稍后再试"
			// })
			// Notification.error({
			//     title: lang == 'zh' ? '错误' : 'Error',
			//     message: response.data.message
			// });
			Toast.fail(response.data.message);
			router.push({
				name: "login"
			});
			return response;
		}
		// 请求异常
		else if (response.data.code === 400) {
			// Notification.error({
			//     title: lang == 'zh' ? '错误' : 'Error',
			//     message: response.data.message
			// });
			Toast.fail(response.data.message);
			return response;
		}else{
			// Notification.error({
			//     title: lang == 'zh' ? '错误' : 'Error',
			//     message: response.data.message
			// });
			Toast.fail(response.data.message);
			
			return response;
		}

	},
	error => {
		let lang = Cookies.get('language') || 'zh' // 目前语言种类
		//判断当前请求是否设置了不显示Loading(不显示自然无需隐藏)
		if (error.config.headers.showLoading !== false) {
			hideLoading();
		}
		if (error.response && error.response.data && error.response.data.message) {
			var jsonObj = JSON.parse(error.response.data.message);
			Message.error(jsonObj.message);
		} else {
			  // Notification.error({
			  //     title: lang == 'zh' ? '错误' : 'Error',
			  //     message: error.message || (lang == 'zh' ? '请求超时,请稍后再试' : 'The request timed out. Please try again later')
			  // });
			  Toast.fail(error.message || '请求超时,请稍后再试');
		}
		return Promise.reject(error);
	}
);

/* 
* 封装get方法
 * @param url  地址
 * @param params  参数
 * @param loading  不传 -> 默认全屏loading效果, false -> 取消loading效果, '#id' or '.class' -> 指定区域loading效果
 * @returns {Promise}
 */
export function get(url, params = {},loading,showLoading,loadingTarget) {
	if(typeof(loading) == 'boolean' && loading != false){
		showLoading = loading
		loadingTarget = 'body'
	}else if(typeof(loading) == 'string'){
		showLoading = true
		loadingTarget = loading
	}else if(loading == false){
		showLoading = false
		loadingTarget = 'body'
	}else{
		showLoading = true
		loadingTarget = 'body'
	}
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
        headers: {'showLoading':showLoading,"loadingTarget":loadingTarget }
      })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err);
      });
  });
}
/*
 * 封装post请求
 * @param url
 * @param data
 * @param loading
 * @returns {Promise}
 */
// json格式
export function post(url, data,loading,showLoading,loadingTarget) {
	if(typeof(loading) == 'boolean'){
		showLoading = loading
		loadingTarget = 'body'
	}else if(typeof(loading) == 'string'){
		showLoading = true
		loadingTarget = loading
	}else if(loading == false){
		showLoading = false
		loadingTarget = 'body'
	}else{
		showLoading = true
		loadingTarget = 'body'
	}
  return new Promise((resolve, reject) => {
    axios.post(url, qs.stringify(data),{headers: { "Content-Type": "application/x-www-form-urlencoded",'showLoading':showLoading,"loadingTarget":loadingTarget }}).then(
      response => {
        resolve(response.data);
      },
      err => {
        reject(err);
      }
    );
  });
}
// formData格式
export function From(url, data,loading,showLoading,loadingTarget) {
	if(typeof(loading) == 'boolean'){
		showLoading = loading
		loadingTarget = 'body'
	}else if(typeof(loading) == 'string'){
		showLoading = true
		loadingTarget = loading
	}else{
		showLoading = true
		loadingTarget = 'body'
	}
  return new Promise((resolve, reject) => {
    axios
      .post(url, qs.stringify(data), {
        headers: { "Content-Type": "application/x-www-form-urlencoded" }
      })
      .then(
        response => {
          resolve(response.data);
        },
        err => {
          reject(err);
        }
      );
  });
}


/*
	 JSON格式
 * 封装post请求
 * @param url
 * @param data
 * @param loading
 * @returns {Promise}
 */
// json格式
export function postJson(url, data,loading,showLoading,loadingTarget) {
	if(typeof(loading) == 'boolean'){
		showLoading = loading
		loadingTarget = 'body'
	}else if(typeof(loading) == 'string'){
		showLoading = true
		loadingTarget = loading
	}else if(loading == false){
		showLoading = false
		loadingTarget = 'body'
	}else{
		showLoading = true
		loadingTarget = 'body'
	}
  return new Promise((resolve, reject) => {
    axios.post(url, data,{headers: { "Content-Type": "application/json",'showLoading':showLoading,"loadingTarget":loadingTarget }}).then(
      response => {
        resolve(response.data);
      },
      err => {
        reject(err);
      }
    );
  });
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值