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

站长资源 2024/11/26 佚名

2 0 1

拦截器的目的

拦截器（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');&emsp;
 },
 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,fetch,请求拦截,fetch,拦截

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

评论“javascript实现fetch请求返回的统一拦截”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

node.js事件轮询机制原理知识点

详解vue-router 动态路由下子页面多页共活的解决方案

评论“javascript实现fetch请求返回的统一拦截”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接