如何更优雅的使用axios统一处理请求和响应

对于新手写vue项目，使用axios可能最常用的使用方式这样的

把axios注入到VUE。这样可以通过this调用。但是这样使用每次要this.$htpp('url',data).then().cacht()

（这里的token是写后台项目，通过请求头发给后台验证的）

这样写起来每次要处理请求错误信息，而且也不利于自动化测试。

这些的原因可能是大多数教程都是这么教的原因吧。

反正我以前也是这么写的。

今天要和大家分享我的使用方法，如下（图）源码再后面：

每次请求之前拦截，把token塞到请求头再发送。

每次响应前拦截，如果是成功的请求直接把结果return，如果是错误请求就把错误显示出来。这样就可以实现错误统一管理，调用请求的时候就不用cacht错误了

import axios from 'axios'import { getToken } from '@/utils/auth'import { Notification } from 'element-ui'
const service = axios.create({  baseURL: '/basic',  timeout: 5000,  headers: {    'Content-Type': 'application/json'  }})
// 请求 拦截service.interceptors.request.use(  config => {     config.headers['Authorization'] = getToken()    return config  },  error => {    console.log(error)    Promise.reject(error)  })
// 响应 拦截service.interceptors.response.use(  response => {    return response  },  error => {    const data = error.response.data    Notification.error({      title: '错误',      message: data.message    })    return Promise.reject(data)  })
export default service
复制代码

下面分享统一管理API，这样有利于自动化测试和管理API接口

（我这里登录密码用了MD5加密的）

把每个请求写成一个函数 export 出去

调用的时候只需要

login(username, loginInfo.password, loginInfo.captcha).then(res => {    console.log(`响应的数据：${res}`)})复制代码

是不是很简单

其实写代码之前，怎么设计代码很重要，应该尽量做到一个功能一个文件一个接口