axios使用的一些问题

使用axios的一些问题

---

在发送请求之前 都要重复的去保存token

如果在全局上设置默认的token ， 等退出下次登录的时候 就没有效果了， 因为token只要你登录成功他就会变， 换一个用户登 当然也不能用， 所以这个方法是不可行的。

在拦截器保存token

拦截器分为 请求拦截器 和响应拦截器

请求拦截器就是在请求发送给服务区之前首先要经过拦截区 做一些操作 然后在发送给服务器
我们只需要在请求拦截器里面获取token

// 配置axios的请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // console.log('请求到了哟', config.headers.Authorization)
  // 统一的给config设置 token
  config.headers.Authorization = localStorage.getItem('token')
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

而里面的config 打印出来的就是axios 的配置
config 这个对象是可以访问到 headers ，只需要在里面把token加上就可以了
他的作用就是拦截所有请求 给每个请求加上一个headers headers 只需要配置token就行了

响应拦截器
就是每次服务器返回数据之后 可以对返回来的数据做一些优化的操作
比如说 每次返回来的data 都是重复一样的
这样就可以

axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  // console.log(response)
  return response.data
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

response就是成功返回来的数据
每次都要从data中获取数据 可以在每次返回数据之前直接获取data中的数据
从而优化代码

把axios保存在vue原型中

每次使用axios 的时候都要去导入axios 这样会有点麻烦
因为axiox本质上和vue没有关系，但是强行添加关系

Vue.prototype.axios = axios

设置全局默认的url地址

// 设置axios全局默认的BASE-URL， 只要设置了全局的默认base_url，
以后的请求会自动拼接上base_url

axios.defaults.baseURL = 'http://localhost:8888/api/private/v1/'

在发送put和post请求的时候 需要注意

put 第二个必须的数据 如果没数据的话 加个null 第三个参数才是配置对象