vue中使用axios与axios的请求响应拦截

提示：登录时需要后端将生成token返回给前端，前端将token保存在localstorage中，才进行下面操作

axios的安装

npm install axios vue-axios

axios在vue的配置与使用

在main.js中引入axios和vue-axios

importaxiosfrom'axios'importVueAxiosfrom'vue-axios

在vue中使用axios和vue-axios

Vue.use(VueAxios,axios);

https://www.cnblogs.com/Yancyzheng/p/11319791.html

配置axios基础地址

axios.defaults.baseURL ='地址'

配置axios基础请求头

axios.defaults.headers.post['Content-Type'] = Content-Type:'application/json; charset=UTF-8'

在进行请求的时候直接使用即可

this.axios.post("请求地址", {para:"参数"}, {}).then(res=>{// res即为请求结果})

请求响应拦截

// 请求拦截axios.interceptors.request.use(config=>{consttoken =localStorage.getItem('token');if(token) {// 在发起请求前，给所有请求的头部添加tokensconfig.headers.common['token'] =JSON.parse(token).token;  }returnconfig;},error=>{// 对请求失败做处理returnPromise.reject(error);})// 响应拦截axios.interceptors.response.use(res=>{// 对响应数据做处理// console.log("对响应数据做处理")constcode = res.data.code;if(code ===401) {// 判断res.data.res_code 是否是401 如果是则跳转到登录，如果不是则正常返回ElementUI.Message({message:'请登录',type:'warning'});    router.push('/login')// 删除token以及userlocalStorage.removeItem('user')localStorage.removeItem('token')returnfalse;  }elseif(code === -104) {    ElementUI.Message({message:'系统异常',type:'warning'});returnfalse;  }returnres;},error=>{// 对响应错误做处理returnPromise.reject(error);})