vue中axios分装

封装请求文件

import axios from 'axios';
import qs from 'qs'
import {
	getStoragePrefix
} from '@/common/tool/index.js'
import {
	Toast
} from 'vant';

 const baseUrl = "http://localhost:8000";
const instance = axios.create({
	baseURL: baseUrl,
	timeout: 15000,
	// Authorization:""
});

// 添加请求拦截器
instance.interceptors.request.use(function(config) {
	// 在发送请求之前做些什么
	//config.headers['platform'] = 1
	// if (store.getters.loginInfo.token || localStorage.getItem('shobby_web_token')) {
	//config.headers['Access-Token'] = localStorage.getItem(getStoragePrefix("token"))
	// }
	return config;
}, function(error) {
	Toast({
		position: "bottom",
		message: 'The request failed to send!'
	});
	return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function(response) {
	// 对响应数据做点什么
	return response;
}, function(error) {
	Toast({
		position: "bottom",
		message: 'Data response failed!'
	});
	// 对响应错误做点什么
	return Promise.reject(error);
});

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params, complete) {
	return new Promise((resolve, reject) => {
		instance.get(url, {
				params: params
			})
			.then(response => {
				complete();
				resolve(response);
			})
			.catch(err => {
				complete();
				reject(err)
				Toast({
					position: "bottom",
					message: 'Data response failed!'
				});
			})
	}).then(errorMsg)
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data, complete) {
	return new Promise((resolve, reject) => {
		instance.post(url, data)
			.then(response => {
				complete();
				resolve(response);
			}, err => {
				complete();
				reject(err)
				Toast({
					position: "bottom",
					message: 'Data response failed!'
				});
			})
	}).then(errorMsg)
}

/**
 * 封装postJson请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function postJson(url, data, complete) {
	return new Promise((resolve, reject) => {
		instance.post(url, qs.stringify(data), {
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
				}
			})
			.then(response => {
				complete();
				resolve(response);
			}, err => {
				complete();
				reject(err)
				Toast({
					position: "bottom",
					message: 'Data response failed!'
				});
			})
	}).then(errorMsg)
}


/**
 * @param {Object} response自定义错误信息
 */
function errorMsg(response) {
	console.log(response)
	return new Promise((resolve, reject) => {
		if (response.status === 200) {
			if (response.data.code != 200) {
				Toast({
					position: "bottom",
					message: response.data.message
				});
				reject(response)
			} else {
				resolve(response.data);
			}
		} else {
			Toast({
				position: "bottom",
				message: 'Data response failed!'
			});
			reject(response)
		}
	})
}

全局引用

import {get,post,postJson} from './common/http'
Vue.prototype.$get = get
Vue.prototype.$post = post
Vue.prototype.$postJson = postJson

调用

this.$post(接口, 参数, function() {
					//这里是无论成功或者失败都会执行的方法
				}).then(function(res) {
					//请求成功 返回数据
				}, (err) => {
					//请求失败 执行其他操作
				})