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

 更新时间:2019年12月22日 09:29:14   作者:现在是冬天  
这篇文章主要介绍了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()
访问属性时候会调用

回想下我们使用 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

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

相关文章

  • JavaScript包装对象使用详解

    JavaScript包装对象使用详解

    javascript代码运行的过程中基本类型会找到对应的包装对象,然后包装对象把所有的属性和方法给了基本类型,然后包装对象被系统进行销毁,所以理解了包装对象可以很好的理解之前写的代码为什么可以这样做了。
    2015-07-07
  • JavaScript实现事件的中断传播和行为阻止方法示例

    JavaScript实现事件的中断传播和行为阻止方法示例

    这篇文章主要给大家介绍了利用JavaScript实现事件的中断传播和行为阻止的方法示例,文中给出了详细的介绍和示例代码,相信对大家的理解和学习具有一定的参考借鉴价值,需要的朋友们下面来一起看看吧。
    2017-01-01
  • js如何实现小程序wx.arrayBufferToBase64方法实例

    js如何实现小程序wx.arrayBufferToBase64方法实例

    这篇文章主要给大家介绍了关于js如何实现小程序wx.arrayBufferToBase64方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • 一个可拖拽列宽表格实例演示

    一个可拖拽列宽表格实例演示

    本文将详细介绍一个可拖拽列宽表格实例,需要了解更多的朋友可以参考下
    2012-11-11
  • javascript下搜索子字符串的的实现代码(脚本之家修正版)

    javascript下搜索子字符串的的实现代码(脚本之家修正版)

    由于我的项目中要求到要对一个字符串进行查找,其查找要求有点BT了
    2009-12-12
  • js中通过split函数分割字符串成数组小例子

    js中通过split函数分割字符串成数组小例子

    分割字符串成数组的方法有很多,不过使用最多的还是split函数,接下来为大家介绍下它的具体使用方法,感兴趣的朋友可以参考下
    2013-09-09
  • layui表格分页 记录勾选的实例

    layui表格分页 记录勾选的实例

    今天小编就为大家分享一篇layui表格分页 记录勾选的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js代码实现多人聊天室

    js代码实现多人聊天室

    这篇文章主要为大家详细介绍了js代码实现多人聊天室,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 解决jquery插件冲突的问题

    解决jquery插件冲突的问题

    本篇文章主要是对解决jquery插件冲突的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • CORS cross-origin resourse sharing跨域资源共享解决

    CORS cross-origin resourse sharing跨域资源共享解决

    这篇文章主要为大家介绍了CORS cross-origin resourse sharing跨域资源共享的解决方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04

最新评论