喵, 突然想发一话题, 正如标题所言, 想讨论一下前端发展到现在, 在 ajax 异步请求的一些设计.

一枚 javaer 在谈论 javascript 的东西, 希望不会被打. = =

在编写前端网页时, 会经常用到用异步请求来满足各种需求。那么我们是怎么做的?

其实先想想我们在获取数据时, 真正想做的是什么?

可能仅仅是 调用api -> 传参数 -> 获取返回值,  然后继续本地的流程.

这就是我们仅仅关心的事.

但是在十几年前的恐龙时代, 所有的浏览器只提供一个 XMLHttpRequest 对象, 里面含括了所有关于 Http 请求的设置.

很丰富, 但是也很痛苦, 因为发起一个请求需要设置大量的参数, 写一大坨无关痛痒的代码, 仅仅是为了发起请求并且获取结果.

后来 JQuery 出现了( 原谅我没玩过其他比如 prototype 这种前端框架, 我是个职业后台 ), $.ajax 简化了好多参数,

但是时代也在进步, 这时候又出来问题, 简单列几个痛点:

  1. 怎么处理回调地狱( callback hell )?
  2. 一个网页可能存在多个异步请求, 怎么管理请求, 避免散落一地?
  3. 我想在数据返回的时候做个拦截处理怎么办?
  4. 同理, 请求前想做拦截处理怎么办?
  5. 怎么管理以上的逻辑?

后来近几年 es6 遍地开花, 出现了 Promise / fetch 这种专治老司机各种不服的 API, 再有后者 es7 推出的 async/await 直接把回调地狱

打进了历史教科书, 但是后面四个问题依然存在.

然后我看到了 axios 框架, 看了一下 github 里面的教程, 好好好, 不错, 该有的都有, 但是对于我这种用惯响应式客户端的挑剔鬼而言, 是不是可以再做得更彻底一些?

比如 java 的 retrofit, 以及 feign , 都是响应式客户端的教科书, 而我依然只想做一件事,  带着参数调用 api -> 获取参数, 完事.

最后还能有统一的异常处理派发, 不至于散落一地, 简而言之, 集中式管理.

最后参考了 retrofit 项目, 写了一个 retrofitjs 工具, 来看看这又是怎么玩的( 不要脸的我照搬了 springMVC 的注解 (^○^) ):

首先是定义, 写出你需要的接口. ( 这是 TypeScript demo, 谢谢 )

然后初始化一个客户端:

到现在, retrofit 变量就是一个拥有自动重试, 拦截器链, 缓存, 重定向的客户端对象了.

so, 做完这些事之后, 怎么搞? 我说, 就这么搞:

哟, 就是这样, 一句话, 不超过100个字符, 但已经等同于一个带有一切完备功能的异步请求.

我个人觉得这才是 Http 客户端该有的姿态, 简洁有力, 直戳痛点.

其实设计也很简单, 而且这种工具在服务端已经很成熟了, 所以在参考了 retrofit 之后, 我也自己设计了一个可用的雏形, 叫做 retrofitjs.

而在其中, 用到的特性包括 es6 的 Proxy, Decorator, 所以如果真正想用, 只能通过 babel 项目来编译

其次, 如果用纯 JavaScript 实现, 不知道能不能做到兼容 es5, 因为 TypeScript 编译后, es5 object 是不能继承 es6 object 的,

所以 TypeScript 实现的支持最多只能去到 es6.

其实这个项目应该更完善, 比如缓存, 重定向, 自动重发等功能都应该实现, 但是个人时间不允许, 而且我是服务端的人了, 可不能心猿意马阿 = =||  写出这文章也是为了告诉大家, 前端的异步请求还能做的更好!

2 收藏


直接登录
最新评论
  • njz 前端工程师 02/01

    lz的想法挺好,只是太java了,忽视了JavaScript和typescript的特性

    首先对应JavaScript,因为她是一门动态解释性语言,创建一个类型去反射实际上没有一点好处,不如一个json搞定所有配置简单。而axios这种库就是为JavaScript而生的,所有对于JavaScript而言他已经足够好了

    对于typescript的而言,你的可以库是很有意义的,但是肯定有更简单的方法,因为typescript的语法可比Java灵活多了,下面是我设计的api的伪代码,可以参考一下:

    我的typescript也是入门级别,所以肯定有更简单的方法。lz何不更深入的了解一下typescript,肯定能做出比照搬java库简单得多的响应式客户端