请求拦截：在我们发送请求给服务器前我们可以做的一些事
响应拦截: 请求完成服务器返回我们数据及请求状态，在这里可以对响应统一做处理
在使用vue 开发后台管理系统时 自己也是调了半天。
1.首先我们引入我们需要的资源

import axios from 'axios'
import router from '@/router'
import { MessageBox, Message,Loading } from 'element-ui'
import Qs from 'qs'
import store from '@/store'
import { getToken } from '@/utils/auth'

引入axios 如果需要进行页面的跳转及操作需引入router即可
element-ui 弹窗提示按需引入
Qs 序列化数据用
store 状态管理 获取一些你需要用的到的值
getToken 获取token
2.创建axios实例

const service = axios.create(
  { //创建axios实例，在这里可以设置请求的默认配置
    timeout: 60000, // 设置超时时间60s
    baseURL: process.env.NODE_ENV === 'production' ? '' : 'http://10.10.0.178:8023/' //根据自己配置的反向代理去设置不同环境的baeUrl
}
)

一些其他的实例配置 可以按自己的需求来 跨域啊或其他的
3.配置请求拦截

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      const token = getToken()
      config.headers['Authorization'] =  "Bearer " + token // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改 
    }
  //   loadingInstance = Loading.service({ // 发起请求时加载全局loading，请求失败或有响应时会关闭
  //     spinner: 'fa fa-spinner fa-spin fa-3x fa-fw',
  //     text: '拼命加载中...'
  // })
    return config
  }, error => {
    Message(error)
    return Promise.reject(error)
  }
)

请求时 如果token存在 将token作为唯一标识放在请求头中 这个也是很常规的一个需求
4.配置响应拦截

service.interceptors.response.use(response => {
  // loadingInstance.close() // 关闭转圈加载 这里我暂时不需要
  console.log(response)
  if (response.data.code === 1000) { // 响应结果里的code: 1000是我与后台的约定，大家可以根据实际情况去做对应的判断 这里是请求成功时的处理
      return Promise.resolve(response) 
  }
}, error => {
  // loadingInstance.close()
  // 有时 我们直接获取status 或者直接打印错误信息 是拿不到的或者拿到一个字符串 需要匹配拿到status(响应状态码)
  const status = Number(error.toString().match(/\d{3}/)[0]) //我们拿到 响应状态码 进行业务规则的处理
  // console.log(status)
  if (status) {
      /**
       * 在这里：可以根据业务需求可以在请求失败后做什么。
       * 根据请求失败的http状态码去给用户相应的提示
       */
      // 根据状态码 你需要做的事
      return Promise.reject(error)
  } else {
      Message("请求失败")
      return Promise.reject(new Error('请求失败'))
  }
})

项目中还封装了 get post delete put 请求方法
get方法:

export function get(url, params){    
  return new Promise((resolve, reject) =>{        
    service({
      method: 'get',
      url,
      params,
    })        
      .then(res => {            
          resolve(res);        
      })        
      .catch(err => {            
          reject(err)        
      })    
  });
}

post方法：

export function post(url, params,dataType = 'J',from = '0') {    
  return new Promise((resolve, reject) => {         
    service({
      method: 'post',
      url,
      data:(dataType == 'S' ? Qs.stringify(params) : Qs.parse(Qs.stringify(params))),
      headers: {
        'Content-Type': from == '1' ?'multipart/form-data;boundary = ' + new Date().getTime(): 'application/json;charset=UTF-8'
      },
    })      
      .then(res => {            
          resolve(res);        
      })        
      .catch(err => {            
          reject(err)        
      })    
  });
}

这里做了 是否对参数进行序列化的处理 以及form表单提交的处理
可能不是很完善 可以开发 后续继续优化