富贵资源网 Design By www.hznty.com

拦截器的目的

拦截器(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()
访问属性时候会调用

回想下我们使用 fetch 的时候都是直接使用,所以 fetch 是 window 或者 global 对象下的一个属性啊,
每次我们使用 fetch 的时候相当于访问了 window 或者 global 的属性,也就是上面的 get 方法

拦截器的实现

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())
 }
});

只要将上述代码贴到程序入口文件即可

扩展

此文是基于 defineProperty , Proxy 同样可以实现。

另外在小程序里面 request 方法是挂在 wx 下面,同样是可以实现,

具体实现 wx.request

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。