Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

XHR 拦截器实现 —— XCeptor

  之前用过 Angular 的 HTTP 拦截器和 jQuery 的 Ajax 全局事件。觉得这类东西确实很有用,但这些毕竟都只是框架中的一部分,在无框架或一些轻型框架中要怎么办?于是我又造了个轮子,直接劫持原生的 XHR 对象来实现 XHR 拦截器。忌讳劫持原生的朋友请自觉无视。
  本打算借鉴一些规范里的 API 设计思想来完成这套 API 设计的,但翻遍的规范,感觉各种不如愿!于是自己设计了一套。代码已经丢在了 Github 上,这里就不发了。
  我的想法是给「请求」和「响应」这两个动作添加钩子。并且在钩子的处理函数中通过其返回值来选择三个执行方向:
  这样设计的目的是让各类如监听、篡改、伪造等的拦截需求变得更易用。也许有人会觉得使用返回值来决定程序执行方向的做法很土(其实我自己都这么觉得)?但实际上 Promise 的设计也是返回值决定执行方向,只不过 Promise 是两个方向,而我的设计是三个方向。
  另外也许是个人喜好原因,我把 API 设计成了类似 expressjs 那样的,虽然逻辑有点僵硬,但确实非常易用。下面是个,这个程序将拦截请求,使它不发送到服务器,并且伪造出一个响应。
<script src="http://yanagieiichi.github.io/xceptor/xceptor.js"></script>
<script>
XCeptor.get("/test",function(req,res){
  res.status=200;
  res.responseText="Hello World";
  return false;
});

var xhr=new XMLHttpRequest;
xhr.open("GET","/test");
xhr.onload=function(e){
  alert(xhr.responseText);
};
xhr.send();
</script>
网名:
34.203.245.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^