嘿小伙伴们，咱们今天聊聊洒脱拉风的拦截器！这货儿就是上来先看看HTTP请求再决定要不要发出去，或者就是等请求完毕了再回头看一眼有没有哪些问题。举个栗子比如说防止有的人乱登录，得要用token验证身份；又比如遇到错误码404的请求，直接就让它飘走。那你们可能想问，那些旧版程序是怎么搞定这些问题的？别急我慢慢告诉你它们是怎么应对的。
Axios和Fetch好像找不着拦截请求和回复结果的办法，咱们干脆学学Antd-pro那种一次搞定所有请求的技巧，搞个通用的请求函数，所有的请求都得先过它再去干活儿。这倒是能解决问题，不过每次都要用到这个函数，有点费劲，有木有更简便点儿的法子吗？
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;
})
Vue双向绑定，挺简单的，关键是要用defineProperty技巧，里头的exception属性看MDN解释，搞清楚value这些参数应该没问题？还有个关键的叫configurable，有点像保险丝，把它关掉其它3项可就不好动了。它的作用是决定是否能在for…in循环和Object.keys过程中查看对象。再来说说writable，这玩意儿关闭后，只能静态地看对象而不能修改了。最后，defineProperty还可以添加新功能通过descriptor和配置属性就能搞定。
Object.defineProperty(obj, prop, descriptor);
平时咱们用 fetch 时，就顺手使了，什么操作都没有。就是 fetch 能挂在 window 或 global 身上，想找它就得用那种 get 的方法。你是不是对拦截器感兴趣，不知道怎么搞？
好说！你只需要把这段代码放到程序的起始文件中就行了，这样每次访问网页都能享受到拦截器带来的好处~别忘了，这里用defineProperty讲解，当然用Proxy也没问题。知道吗？小程序的请求方式其实就在wx对象内部，还能用它设定拦截器。怎么弄你得自己研究下，看看wx.request说不定就恍然大悟了。
兄弟姐妹们注意，这才是今天重点，别忘了点赞好了，也差不多了，那咱们明天见。还不错的话，请关注并多多评论！有啥好建议或者想要分享的，赶紧在下面说说看呀。别忘了给我点个攒，让朋友们也都来瞧瞧这篇好玩又实用的文章哟。多谢大家支持！
const originFetch = fetch;
Object.defineProperty(window, "fetch", {
configurable: true,
enumerable: true,
// writable: true,
get() {
return (url,options) => {
return originFetch(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())
}
});
评论0