介绍
这篇文章将为大家详细讲解有关javascript如何实现取回请求返回的统一拦截,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>拦截器的目的
拦截器(拦截器)一般用于发起http请求之前或之后对请求进行统一的处理,
如令牌实现的登录鉴权(每个请求带上令牌),统一处理404响应等等。
<强>之前的实现
区别于axios,获取没有搜到请求返回拦截器相关api,那之前是怎么实现统一拦截的呢,
参照antd-pro,写一个统一的请求方法,所有的请求都调用这个方法,从而实现请求与返回的拦截。
这样我们每次都要去引入这个方法使用,那么有没有更好实现呢?
<强>常见的一道面试题
vue双向绑定的原理
<李> vue2基于defineProperty
<李> vue3基于代理
极简的双向绑定
,, const obj =, {};
Object.defineProperty (obj, & # 39;文本# 39;,,{
,得到:函数(),{
console.log才能(& # 39;get val # 39;);和emsp;
},
,集:函数(newVal), {
console.log才能(& # 39;set val: & # 39;, +, newVal);
,,. getelementbyid(& # 39;输入# 39;).value =, newVal;
,,. getelementbyid(& # 39;跨度# 39;).innerHTML =, newVal;
,}
});
const input =, . getelementbyid(& # 39;输入# 39;);
input.addEventListener (& # 39; keyup # 39;,,函数(e) {=,,obj.text e.target.value;
}) 其中我们可以看到运用了看数据劫持。
<强> defineProperty
查看MDN
我们可以发现defineProperty的使用方法
Object.defineProperty (obj,,,,描述符), 描述符属性与方法包含
属价值性的值(不用多说了)
可配置:真的,
总开关,一旦为false,就不能再设置他的(价值,可写,可配置)
可列举的:真的,
是否能在……在循环中遍历出来或在对象。键中列举出来。
可写:真的,
如果为false,属性的值就不能被重写,只能为只读了
设置()
设置属性时候会调用
得到()
访问属性时候会调用
回想下我们使用获取的时候都是直接使用,所以获取是窗口或者全球对象下的一个属性啊,
每次我们使用获取的时候相当于访问了窗口或者全球的属性,也就是上面的得到方法
<强>拦截器的实现
const originFetch =,获取;
Object.defineProperty(窗口,“fetch",, {
,可配置:没错,
,可列举的:真的,
,//可写:没错,
,得到(){
return 才能;(url选项),=祝辞,{
,,return originFetch (url,{…选项,{
,,,头:,{
,,,,& # 39;内容类型# 39;:,& # 39;application/json; charset=utf - 8 # 39;
,,,,接受,& # 39;应用程序/json # 39;
,,,,令牌:localStorage.getItem(& # 39;标记# 39;),
,,,,//这里统一加token 实现请求拦截
,,},…options.headers
,,}})(checkStatus),
,,//,checkStatus 这里可以做返回错误处理,实现返回拦截
,然后才能(response =祝辞response.json ())
,}
}); 只要将上述代码贴到程序入口文件即可
关于“javascript如何实现取回请求返回的统一拦截”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
