作为一个前端开发工作者,与后台交互是必不可少的,用交互实现异步刷新页面、请求数据、发送数据等等。一般交互都是基于JavaScript的XMLHttpRequest来做封装,目前比较常用的有Ajax、Fetch、axios等。但是很多开发的时候都是直接用这几个给的方法,没有二次封装。虽然这几个给的直接用也很方便,但是不同项目不同公司,各自的约定也不一样,所以个人认为还是需要二次封装一个适合自己适合项目的交互方法。
由于本人从未用过Fetch,所以只讲解一下Ajax和axios本人的封装。
一般我们用Ajax的时候是这样的
$.ajax({
type:'',
url:'',
data:{},
success:function (data) {
},
error:function () {
}
})
然后在成功或者失败的方法里进行操作,但是一些失败的返回,是跟后台约定好的,是否不需要每一次调用都去判断一遍。或者是错误的时候,是否也不需要每一次都做判断,只要做一次判断,也就是全局的方法。再有就是参数,是否使用get还是post(一般只用这两个)直接用参数传参,数据地址也是。所以我自己封装了一个简易的方法
const apiurl = function (url) {
return '' + url;
}
const ajaxConnect = (type,url,data,callBack) => {
var data = data || {};
$.ajax({
type:type,
url:apiurl(url),
data:data,
success:function (data) {
if(data.code == 10000){
}else if(data.code == 0){
}else{
callBack(data.data);
}
},
error:function (data) {
}
})
};
调用的时候就是
ajaxConnect('post','','',function (data) {
})
可以看见,我们跟后台约定好错误代码,我们可以全局处理,错误之后要做什么操作也可以全局处理,包括错误状态也可以全局处理。包括每个接口都需要传一个token还是传什么也可以这边直接处理,这样就不需要每一个都加那个需要传的字段。
我们都知道,Ajax除了这些参数之外还有好多,比如穿文件、同步还是异步等等,需要的话可以封装上去,但是个人认为那些用的少的,需要用到的时候重新写一个Ajax会更好。
Axios封装跟Ajax差不多,反而更简单,因为axios已经帮我们设定好了响应和请求的过程。
//请求拦截器
axios.interceptors.request.use(config => {
//请求之前处理
return config
}, error => error);
//响应拦截器即异常处理
axios.interceptors.response.use(response => {
return response.data;
}, error => {
//错误返回处理
return error.response;
});
//设置默认地址
axios.defaults.baseURL = baseUrl;
//设置超过10秒报错
axios.defaults.timeout = 5000;
//还可设置各种请求头,按需配置
//get请求
const get = (url, param, callback) => {
axios.get(url, {params:param})
.then((res) => {
})
}
//post请求
const post = (url, data) => {
return axios.post(url, data)
.then((res) => {
return Promise.resolve(res);
})
}
可以看见,axios有请求拦截器和响应拦截器,我们可以在请求前加上全局需要的字段或者是设定动画等等,也可以在响应拦截器里面处理跟后端约定好的各种code。
get('createQrCode/list', param, res => {(res).then(data => {
})});
因为es6的Promise语法,我这边返回了Promise对象,只是为了需要同步的时候可以使用Promise.all()方法,但是如果项目对同步的需求很少,那么我建议不要用回调函数返回Promise。
以上就是想要分享的封装请求,我封装的并不是很好,只是想让大家知道请求最好是自己分装一个适合的。
(完)