vue axios打包和API统一管理方法

在vue项目中，axios经常被用来在与后台交互时请求数据。axios是一个基于promise的http库，可以在browser和node.js中运行.当项目越做越大，对接口的要求也会越来越多。如何管理这些接口？如何处理多人合作？只有合理的规划才能方便以后的维护和修改。

装置

安装axios依赖包

cnpm安装axios -保存

介绍

一般我会在项目的src中创建新的untils目录，其中base用来管理接口域名，http处理请求拦截和响应拦截，user.js负责接口文件(接口文件可以自己新建一个文件夹，然后放相应的接口文件)

1.在http.js文件中，用于处理axios中的请求拦截和响应拦截、令牌处理，并引入element-ui加载动画。

从' axios '导入axios从' element-ui '导入路由器'导入{ Loading，Message }./router/index . js ' let loading function startLoading(){ loading=loading . service({ lock : true，Text:' loading.background: 'rgba(0，0，0，0.7)'})}函数end loading(){ loading . close()}//请求拦截axios . interceptors . request . use((trusting)={ start loading()//设置请求头if(local storage . etoken){ confing . headers . authorization=local storage . etoken }返回confiding，(error)={ return promise . reject(error)})//响应拦截axios . interceptors . response . use((response)={ end loading()return。 (错误)={ message . error(error . response . data)end loading()//获取状态代码const { status }=error . response ef(status==401){ message . error('请再次登录')//清除令牌本地存储. remove item(' etoken ')//跳转到登录页面router . push('/log ')} return promise . reject(error)})导出默认axios是通过创建一个axios实例，然后导出默认方法导出的，使用起来更灵活。

2.在base.js文件中，用于管理我们的请求接口的域名，非常方便后期的维护和开发。如果以后更改域名地址或者添加域名，只需要修改即可。

//统一域名管理const base={ URL : ' http://localhost 33605001/API ' } export defaultbase 3。接口管理统一，每个js文件对应一个功能请求接口管理。下面实现get和post的实例请求，引入qs序列化，使用前安装qs。

安装qs

cnpm安装qs -保存

3.1:更多模块化管理

3.2:更方便很多人开发，有效减少和解决命名冲突

3.3:处理接口域名的情况很多

从导入axios./untils/http '从QS进口QS '从进口基地进口'。/base'/* * * post方法，对应的post请求* @desc注册请求* @ param { String } url[请求的URL地址]* @ param { Object } params[请求期间携带的参数] */export函数userrielist(data){ return axios({ URL : ` $ { base . URL }/user/register `，method:' post '，data:qs。strictify (data)})}/* * * get方法，对应get请求* @desc登录请求* @ param { String } url[请求的URL地址]* @ param { Object } params[请求期间携带的参数]*/export function user info(){ return axios({ URL 3360 ` $ { base . URL }/profile/all `，method: '以上工作完成后，我们只需要发送请求接口的文件并进行介绍即可

本例中介绍了这种情况

从“”导入{ userRejister }././until s/user . js '；

发送请求axios请求

Async submitform (formname) {this。$ refs [formname]。validate(valid={ if(valid){//发送请求返回新的Promise((resolve，reject)={ userreister(this . register user))。然后(响应={ console.log(响应)；resolve()；}) .catch(错误={ reject(错误))；});});} else { console.log('错误提交！');返回false} });}，摘要

以上是边肖推出的vue axios封装和API的统一管理方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！