需求分析

• 在本项目中的数据请求时有需要统一注入的token值，并且后台返回项目嵌套层级较深，所以这里使用了axios里的请求拦截和响应拦截技术，处理这个需求

请求拦截器

• 在本项目中，所有的数据请求时都需要token值作为请求头标识，代表已经登入的状态和用户的身份，因为发起的网络请求次数非常多所以选择使用请求拦截器的技术在发起请求时注入统一的请求头

// 请求拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    // 如果token存在 注入token
    config.headers['Authorization'] = `Bearer ${store.getters.token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

响应拦截器

• 项目中后台返回的数据嵌套都比较深，所以在响应到数据后使用响应拦截器的技术对项目做解构处理，并在成功后返回解构出来的数据

// 响应拦截器
// 1:提升用户体验，让用户知道什么原因导致了请求错误
// 2:项目的容错性
service.interceptors.response.use(response => {
  // 1:客户端状态吗返回200
  // 2:结构数据
  // 3:判断业务请求是否正确
  const { success, message, data } = response.data
  if (success) {
    return data
  } else {
    // 业务方面的错误
    Message.error(message)
    return Promise.reject(new Error(message))
  }
}, error => {
  return Promise.reject(error)
})