作为一个前端开发工作者，与后台交互是必不可少的，用交互实现异步刷新页面、请求数据、发送数据等等。一般交互都是基于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请求
function get(url, data = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: data,
}).then(response => {
resolve(response);
}).catch(err => {
console.log(err)
})
})
}
//post请求
function post(url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(response => {
resolve(response);
}, err => {
reject(err)
})
})
}
可以看见，axios有请求拦截器和响应拦截器，我们可以在请求前加上全局需要的字段或者是设定动画等等，也可以在响应拦截器里面处理跟后端约定好的各种code。
因为es6的Promise语法，我这边返回了Promise对象，只是为了需要同步的时候可以使用Promise.all()方法。
以上就是想要分享的封装请求，我封装的并不是很好，只是想让大家知道请求最好是自己分装一个适合的。
欢迎关注 Coding个人笔记 公众号
网友评论