对于新手写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}`)})复制代码