javascript实现fetch请求返回的统一拦截
拦截器的目的
拦截器（interceptors）一般用于发起http请求之前或之后对请求进行统一的处理，
如token实现的登录鉴权（每个请求带上token），统一处理404响应等等。
之前的实现
区别于axios，fetch没有搜到请求返回拦截器相关api,那之前是怎么实现统一拦截的呢，
参照antd-pro，写一个统一的请求方法，所有的请求都调用这个方法，从而实现请求与返回的拦截。
这样我们每次都要去引入这个方法使用，那么有没有更好实现呢？
常见的一道面试题
vue双向绑定的原理
- vue2基于defineProperty
- vue3基于Proxy
极简的双向绑定
constobj={};
Object.defineProperty(obj,'text',{
get:function(){
console.log('getval');
},
set:function(newVal){
console.log('setval:'+newVal);
document.getElementById('input').value=newVal;
document.getElementById('span').innerHTML=newVal;
}
});
constinput=document.getElementById('input');
input.addEventListener('keyup',function(e){
obj.text=e.target.value;
})
其中我们可以看到运用了看数据劫持。
defineProperty
查看MDN
我们可以发现defineProperty的使用方法
Object.defineProperty(obj,prop,descriptor);
descriptor属性与方法包含
value
属性的值(不用多说了)
configurable:true,
总开关，一旦为false，就不能再设置他的（value，writable，configurable）
enumerable:true,
是否能在for...in循环中遍历出来或在Object.keys中列举出来。
writable:true,
如果为false，属性的值就不能被重写,只能为只读了
set()
设置属性时候会调用
get()
访问属性时候会调用
回想下我们使用fetch的时候都是直接使用，所以fetch是window或者global对象下的一个属性啊，
每次我们使用fetch的时候相当于访问了window或者global的属性，也就是上面的get方法
拦截器的实现
constoriginFetch=fetch;
Object.defineProperty(window,"fetch",{
configurable:true,
enumerable:true,
//writable:true,
get(){
return(url,options)=>{
returnoriginFetch(url,{...options,...{
headers:{
'Content-Type':'application/json;charset=UTF-8',
Accept:'application/json',
token:localStorage.getItem('token')
//这里统一加token实现请求拦截
},...options.headers
}}).then(checkStatus)
//checkStatus这里可以做返回错误处理，实现返回拦截
.then(response=>response.json())
}
});
只要将上述代码贴到程序入口文件即可
扩展
此文是基于defineProperty,Proxy同样可以实现。
另外在小程序里面request方法是挂在wx下面，同样是可以实现，
具体实现wx.request
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。