谢谢邀请,我来说说开发中我所使用接口的方式。针对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。好了,先暂时写这么点吧,还在上班中。。。。