javascript实现实现fetch请求返回的统一拦截请求返回的统一拦截
主要介绍了javascript实现fetch请求返回的统一拦截,文中通过示例代码介绍的非常详细，对大家的学习或者工作
具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
拦截器的目的拦截器的目的
拦截器（interceptors）一般用于发起 http 请求之前或之后对请求进行统一的处理，
如 token 实现的登录鉴权（每个请求带上 token），统一处理 404 响应等等。
之前的实现之前的实现
区别于 axios，fetch 没有搜到请求返回拦截器相关 api,那之前是怎么实现统一拦截的呢，
参照 antd-pro，写一个统一的请求方法，所有的请求都调用这个方法，从而实现请求与返回的拦截。
这样我们每次都要去引入这个方法使用，那么有没有更好实现呢？
常见的一道面试题常见的一道面试题
vue 双向绑定的原理
vue2 基于 defineProperty
vue3 基于 Proxy
极简的双向绑定
const obj = {};
Object.defineProperty(obj, 'text', {
get: function() {
console.log('get val');
},
set: function(newVal) {
console.log('set val:' + newVal);
document.getElementById('input').value = newVal;
document.getElementById('span').innerHTML = newVal;
}
});
const input = 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()
访问属性时候会调用
评论0