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


Posted in Javascript onDecember 22, 2019

拦截器的目的

拦截器(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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
Angular7.2.7路由使用初体验
Mar 01 Javascript
php结合js实现多条件组合查询
May 28 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 #Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 #Javascript
javascript中的相等操作符(==与===区别)
Dec 21 #Javascript
JavaScript中的相等操作符使用详解
Dec 21 #Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 #Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 #Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 #Javascript
You might like
写一个用户在线显示的程序
2006/10/09 PHP
在PHP中执行系统外部命令
2006/10/09 PHP
php取得字符串首字母的方法
2015/03/25 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
python利用tkinter实现屏保
2019/07/30 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
党建示范点实施方案
2014/03/12 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
县委务虚会发言材料
2014/10/20 职场文书
校长个人总结
2015/03/03 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python