vue封装axios

更新于：2021-07-30 17:50

功能：对axios二次封装。请求设置超时，token。返回拦截401tonken失效做一些简单的处理

1、先封装axios，新建一个request.js。因为个人编码习惯，注释已经写得很清楚了，这个就不做过多解释了，直接看代码，

import axios from 'axios' //引入axios
import { Message } from 'element-ui' //引入elementui
import store from '../store'
import router from '../router'
import appConfig from '../config/appConfig.js'

//设置axios请求地址
axios.defaults.baseURL = appConfig.baseUrl;

//设置请求超时
axios.defaults.headers.timeout=1000;
// 添加请求拦截器
axios.interceptors.request.use(request => {
	request.headers.permit = store.state.user.token; //设置token
	// 在发送请求之前做些什么
	return request;
}, function(error) {
	// 对请求错误做些什么
	Message.error(error.message);
	return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
	// 对响应数据做点什么
	if (response.data.code && response.data.code == 200) {
		// 返回成功，直接返回data
		return response.data;
	} else if (response.data.code && response.data.code == 401) {
		store.commit('LOGIN_OUT');
		Message.error("登录失效，请重新登录");
		router.push('/')
	} else {
		Message.error(response.data.message);
		return Promise.reject(response)
	}
}, function(error) {
	// 对响应错误做点什么
	Message.error(error.msg);
	return Promise.reject(error);
});


export default axios;

2、封装所有请求接口，新建一个interface.js，这个很简单。

export default {
	adminLogin: '',
}

3、main里面引入和挂载

import $interface from '@/axios/interface.js' //引入interface，所有的访问接口
import $axios from '@/axios/axios.js' //引入axios的二次封装

Vue.prototype.$axios = $axios; //使用封装的Axios
Vue.prototype.$interface = $interface; //将所以接口js挂载到Vue

4、页面使用，就是和原生的axios一样使用

this.$axios.post(this.$interface.adminLogin, this.form).then(data => {
    console.log(data)		
}).catch(err => {
    console.log(err)
});