vue axios讲解+优化 请求拦截器 响应拦截器

vue axios讲解+优化 请求拦截器 响应拦截器
安装axios

yarn add axios

在main.js中引入没用，这是两个独立的模块 ，哪个模块用就在那个模块引入
axios 优化一
将axios方法挂载到vue的原型上，任何的vue实例都可以访问到
在main.js中

import axios from 'axios'
Vue.prototype.$axios = axios

如何调用：this.$axios
axios 优化二
配置基础地址

请求地址写死合适吗？上线的时候就不是这个地址，开发环境，测试环境，线上地址可能都不一样
第一种办法



第二种办法
axios提供了一个在前面帮你拼路径的方法

会自动帮你拼上全局的基地址
在main.js中

注！！！get请求和post请求的区别

get请求 axios.get(url,config)
post请求 axios.post(url,data,config)
config配置对象中，可以配置我们的请求头

请求拦截器
存在的意义：解决每次请求都需要携带token，
请求拦截器：所有的请求在真正被发送出去之前，都会先经过请求拦截器

上一部分在发送请求，下一部分在处理响应
interceptors：拦截器
request：请求，需求，要求
config：这里的config就是你请求相关的所有信息

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

注：将来的请求有一些是需要token，有一些是不需要token的
并不会对不需要携带token的请求造成影响

响应拦截器
存在的意义：解决所有需要登陆的页面都需要加这样一个判断
导航首位是有token就放行，但是token是有可能失效的
token是有时间的，万一用户token过期了，或者是伪造的，都用该进行处理

response：响应，反应，回答

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

// 添加响应拦截器: 所有的响应在真正被处理之前, 都会先经过响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么, 也可以统一的进行一些响应的判断
  // response 就是响应的数据
  if (response.data.statusCode === 401 && response.data.message === '用户信息验证失败') {
    // token过期了, 将无效的token移出
    localStorage.removeItem('token')
    localStorage.removeItem('user_id')
    // token认证失败, 拦截到登录页
    // this.$router === router 同一个路由实例
    Toast('尊敬的用户, 您的登录状态已过期, 请重新登录')
    router.push('/login')
  }
  return response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})