axios封装，处理请求拦截、响应拦截，请求头携带token设置

axios封装的好处：

1、方便后期代码的维护，

2、减少代码量，减少不必要的重复请求响应，

3、通过配合async await，让代码更加优雅

把在vue中如何将axios进行封装给说了一下；

并且把请求拦截和响应拦截，以及请求头携带token给说了一下，老大讲的也是很细致，中间的话，是因为拦截那块token处理的有点的问题，导致只要以获取到数据列表token值就变为undefined，然后讲过一步步的分析，找到了问题，最后也是解决了，这样的话也对我们也是有提升的，让我们知道下次遇到这种情况时候知道怎么处理了

axios的封装处理

// 引入axios
import axios from 'axios'
// 引入提示消息组件
import { Message } from 'element-ui'
const service = axios.create({
  baseURL: 'https:www.liulongbin.top:8888/api/private/v1',
  timeout: 3000
})
// 请求拦截
service.interceptors.request.use(config => {
  // confing.url可拿到当前页面路径，出去登陆页面，其它的页面携带token
  if (config.url !== '/login') {
    var token = localStorage.getItem('token')
    // 请求头携带token
    config.headers.Authorization = token
  }
  return config
}, _error => {
  return Promise.reject('请求出错')
})

// 响应拦截
service.interceptors.response.use(response => {
    // 数据返回成功后 在进行处理
  if (response.data.data && response.data.meta) {
   // 结构赋值的方式拿到值
    var { data, meta } = response.data
    var token = localStorage.getItem('token')
    if (meta.status === 200) {
      if (token) {
        localStorage.setItem('token', token)
      }
      // 登陆成功
      Message({
        message: meta.msg,
        type: 'success'
      })
      return {
        flag: 2,
        msg: meta.msg,
        result: data
      }
      // 201 表示创建用户成功
    } else if (meta.status === 201) {
      Message({
        message: meta.msg,
        type: 'success'
      })
      return {
        flag: 3,
        msg: meta.msg,
        result: data
      }
    } else {
      Message({
        message: meta.msg,
        type: 'error'
      })
      Promise.reject(meta.msg)
    }
  } else {
    Message({
      message: '参数有误，请检查',
      type: 'error'
    })
    return {
      msg: meta.msg,
      falg: 1
    }
  }
}, _error => {
  // 返回报错处理
  Message({
    message: '接口请求有误，请检查',
    type: 'error'
  })
})
export default service