实现 fetch 请求返回的统一拦截

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

拦截器的目的

拦截器(interceptors)一般用于发起 http 请求之前或之后对请求进行统一的处理,
如 token 实现的登录鉴权(每个请求带上 token),统一处理 404 响应等等。

之前的实现

区别于 axios,fetch 没有搜到请求返回拦截器相关 api,那之前是怎么实现统一拦截的呢,
参照 antd-pro,写一个统一的请求方法,所有的请求都调用这个方法,从而实现请求与返回的拦截。
这样我们每次都要去引入这个方法使用,那么有没有更好实现呢?

常见的一道面试题

vue 双向绑定的原理

极简的双向绑定

   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 属性与方法包含
回想下我们使用 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

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看