vue封装axios和请求接口，设置token

记得看总结，划重点，考试要考

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

import axios from 'axios' //引入axios
import router from '@/router/router'//引入路由
import VueCookies from 'vue-cookies' //引入VueCookies
import {Message} from 'element-ui' //引入elementui

axios.defaults.headers.timeout=5000;//设置请求超时

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    config.headers.permit=VueCookies.get('permit');//设置token
	// 在发送请求之前做些什么
    return config;
}, function (error) {
	// 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
	// 对响应数据做点什么
	if (response.code && response.code != 200) {
	// 抛出服务器错误
		Message.error(response.msg);
		return Promise.reject(response)
	}
	if(response.code && response.code == -2){//-2表示tocken过期
		router.replace("/login");//跳转登录
	}
	return response;
	}, function (error) {
	// 对响应错误做点什么
	
	return Promise.reject(error);
});


export default axios;

 

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

export default{
	obj:{
    }
}

 

3、main里面引入和挂载

//引入自定义组件Start
import $interface from '@/request/interface.js' //引入interface，所有的访问接口
import $request from '@/request/request.js' //引入request，自己封装的axios

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

 

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

this.$request.get(this.$interface.cps.goods).then(res => {
    console.log(res)		
}).catch(err => {
    console.log(err)
});

*总结：为什么不直接在main.js里面直接写呢？？？main.js？初始化编译？如果你把封装代码直接写在main.js里面，那么你肯定会遇到以下两个问题：

1、如果是用的cookie?那么的token永远是用的登录前的cookie，也就是上一次登录的token。

2、刷新页面？token丢失？why？因为F5刷新的时候根本不走main.js。