axios封装

Posted 2021-02-18 AlanTao

axios.js

import axios from ‘axios‘;
import api from ‘./api‘;

// 创建一个axios实例
const axiosService = axios.create({
	timeout: 5000, // 设置超时时间为5s
});
// 添加请求拦截器
axiosService.interceptors.request.use(
	config => {
		//设置全局超时的请求次数，请求的间隙
		config.retry = 4;
		config.retryDelay = 1000;

		// console.log(‘添加请求拦截器‘);
		return config;
	},
	error => {
		return Promise.reject(error);
	}
);
// 添加响应拦截器
axiosService.interceptors.response.use(
	res => {
		const responseData = res.data;
		// 登录失效,请重新登录
		if (responseData.code === ‘10002‘) {
			console.log(responseData);
		}
		return responseData;
	},
	error => {
    // 超时重新连接
		var config = error.config;
		// 如果配置不存在或者没有设置重试选项，拒绝
		if (!config || !config.retry) return Promise.reject(error);
		// 设置变量以跟踪重试计数
		config.__retryCount = config.__retryCount || 0;
		// 检查我们是否已经达到重试的总数
		if (config.__retryCount >= config.retry) {
			return Promise.reject(error);
		}
		// 增加重试计数
		config.__retryCount += 1;

		//创造新的Promise来处理回调backoff
		var backoff = new Promise(resolve => {
			// 设置延迟时间
			setTimeout(() => {
				resolve();
			}, config.retryDelay || 1);
		});
		// 返回Promise，其中调用axios以重试请求
		console.log(axiosService, config);
		return backoff.then(() => {
			return axiosService(config);
		});
	}
);
// 请求响应回调
const http = options => {
	return new Promise((resolve, reject) => {
		// 请求方法等参数
		const requestData = api.formatConfig(options);
		// 请求方法
		axiosService(requestData)
			.then(data => {
				if (data.code.toString() === ‘0‘ || data.code.toString() === ‘200‘) {
					resolve(data.data);
				}
			})
			.catch(err => {
				reject(err);
			});
	});
};
// 这样可以用vuex?????, 下午试一试
export default {
	install: function(Vue) {
		Object.defineProperty(Vue.prototype, ‘$axios‘, { value: http });
	},
};

 

api.js　

import host from ‘./host‘;
export default {
	baseUrl: {
		ex: host.ex + ‘/exchange-web-api/‘,
		hd: host.hd + ‘/activity/‘,
	},
	/**
	 * 切换路线获取ex的域名
	 * @returns {String}  // 返回url
	 */
	getExHost() {
		// 测试环境
		if (process.env.NODE_ENV === ‘development‘) {
			if (window.loex_remote_domain && window.loex_remote_domain.web_api) {
				return window.loex_remote_domain.web_api + ‘/exchange-web-api/‘;
			}
			// 开发环境
		} else if (process.env.NODE_ENV === ‘production‘) {
			if (window.loex_remote_domain && window.loex_remote_domain.web_api) {
				return window.loex_remote_domain.web_api + ‘/exchange-web-api/‘;
			}
		}
		return this.baseUrl.ex;
	},
	/**
	 * 切换路线获取hd的域名
	 * @returns {String}  // 返回url
	 */
	getHdHost() {
		// 测试环境
		if (process.env.NODE_ENV === ‘development‘) {
			if (window.loex_remote_domain && window.loex_remote_domain.hd) {
				return window.loex_remote_domain.hd + ‘/activity/‘;
			}
			// 开发环境
		} else if (process.env.NODE_ENV === ‘production‘) {
			if (window.loex_remote_domain && window.loex_remote_domain.hd) {
				return window.loex_remote_domain.hd + ‘/activity/‘;
			}
		}
		return this.baseUrl.hd;
	},
	/**
	 * @param {Object} acHeaders  // 新增的请求头项
	 * @returns {Object}  // axios请求头列表
	 */
	formatHeaders(acHeaders) {
		let headers = {}; // ‘Content-Type‘: ‘multipart/form-data‘  // application/json
		headers[‘exchange-token‘] = localStorage.getItem(‘ex_token‘) || ‘‘;
		headers[‘exchange-language‘] = localStorage.getItem(‘lan‘) || ‘zh_CN‘;
		headers[‘exchange-client‘] = ‘app‘;
		if (acHeaders) {
			for (let i in acHeaders) {
				headers[i] = acHeaders[i];
			}
		}
		return headers;
	},
	/**
	 * @param {Object} options  // 请求参数
	 * @returns {Object}  // axios请求参数
	 */
	formatConfig(options) {
		// 请求基本参数
		let defaults = {
			url: ‘‘, // 请求url
			method: ‘GET‘, // 默认get方法
			hostType: ‘ex‘, // 默认ex域
			headers: null, // 要添加的请求头
			data: null, // post请求参数
			params: null, // get请求参数
		};
    // 整理参数筛选
		let config = {};
		options = options || {};
		for (var key in defaults) {
			if (typeof options[key] !== ‘undefined‘) {
				config[key] = options[key];
			} else {
				if (defaults[key]) {
					config[key] = defaults[key];
				}
			}
    }
    // 请求域名
		const hostMap = {
			ex: this.getExHost(),
			hd: this.getHdHost(),
    };
    // 请求url
    const fullUrl = config.hostType === ‘empty‘ ? ‘‘ : hostMap[config.hostType] + `${config.url}`;
    // 请求参数
		const requestData = {
			url: fullUrl,
			headers: this.formatHeaders(config.headers),
			method: config.method,
    };
    // 判断是get还是post
		if (config.method.toUpperCase() === ‘GET‘ && config.params) {
			requestData.params = config.params;
		} else if (config.method.toUpperCase() === ‘POST‘ && config.data) {
			requestData.data = config.data;
    }
		return requestData;
	},
};

　　

host.js

export default {
	// ex: ‘https://webapi.loex.io‘,
	ex: ‘http://182.61.148.81‘,
	hd: ‘http://182.61.148.81‘,
};