vue中请求接口怎么封装公共地址_vue接口有哪些封装方式？

谢谢邀请，我来说说开发中我所使用接口的方式。针对VueJs，那么网络框架首选就是axios了。那就针对axios来请求后台api来说说。

对于前后端分离的开发方式，一般后端都是采用Restful api的形式来提供给我们对应的接口，这样做的一点好处是，一套后端api(如果写得够好的话)，直接在android ios 前端 微信小程序里都可以直接使用。而且现在前端开发方式，我个人感觉，与原生的android ios开发方式很像，不仅是因为采用的模式一样，原生有mvp mvvm，前端也有，也都是采用接口的方式来进行应用的开发。接下来说说我自己在开发中的一些做法。

首先，咱们可以利用axios来做一些全局的配置，比如配置默认请求服务器的基地址以及请求头，如：

axios.defaults.baseURL = 'http://www.xxx.com/';

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';

还可以通过axios来进行拦截器的设置，目的在于可以拦截对应的路由来做一些别的操作,如配置400,500页面:

axios.interceptors.response.use(

response => {

return response;

},

error => {

if (error.response) {

switch (error.response.status) {

case 404:

router.replace({

path: '/err404',

query: {redirect: router.currentRoute.fullPath}

})

break;

case 500:

router.replace({

path: '/err500',

query: {redirect: router.currentRoute.fullPath}

})

break;

}

}

return Promise.reject(error.response.data)

});

其次，对于接口的开发方式，这里我理解的是与后台接口对接的方式。通常我会创建一个文件夹，这个文件夹下面对应的都是各个模块功能对应请求的接口的封装。直接上图：

可以看到，各个js文件对应不同的功能模块，就拿reg.js来说，表示注册模块。先看看里面的代码：

import axios from 'axios';

/**

* 获取注册需要的验证码

* @param url

* @param mobile

* @returns {*}

*/

export function getVerCode(url,mobile) {

return axios.post(url,{

mobile:mobile

}).then((res)=>{

return Promise.resolve(res);

},(err)=>{

return Promise.reject(err);

});

}

/**

* 处理注册

* @param url:处理注册的url

* @param mobile:注册手机号

* @param veri_code:验证码

* @param password1:首次密码

* @param password2:二次密码

* @returns {*}

*/

export function dealRegister(url,mobile,veri_code,password1,password2) {

return axios.post(url,{

mobile:mobile,

verification_code:veri_code,

password1:password1,

password2:password2,

}).then((res)=>{

return Promise.resolve(res);

},(err)=>{

return Promise.reject(err);

})

}

/**

* 重置密码

* @param url:请求的接口地址

* @param mobile:手机号

* @param veri_code:验证码

* @param password1:密码

* @param password2:再次密码

* @returns {Promise|Promise|Promise.}

*/

export function dealResetPwd(url,mobile,veri_code,password1,password2) {

return axios.put(url,{

mobile:mobile,

verification_code:veri_code,

password1:password1,

password2:password2,

}).then((res)=>{

return Promise.resolve(res);

},(err)=>{

return Promise.reject(err);

})

}

这样就很清楚注册这个模块包含的请求有几个，每个请求的功能是什么了。再需要的地址import对应的函数就可以使用了。至于好处是什么，自己慢慢体会22333333333。好了，先暂时写这么点吧，还在上班中。。。。