响应式HTTP Client在前端的应用_前端开发者

前端发展到现在, 在ajax异步请求的一些设计。 在编写前端网页时, 会经常用到用异步请求来满足各种需求。 那么我们是怎么做的? 其实先想想我们在获取数据时, 真正想做的是什么? 可能仅仅是调用api – > 传参数 – > 获取返回值, 然后继续本地的流程。 这就是我们仅仅关心的事。 但是在十几年前的恐龙时代, 所有的浏览器只提供一个XMLHttpRequest对象, 里面含括了所有关于Http请求的设置。 很丰富, 但是也很痛苦, 因为发起一个请求需要设置大量的参数, 写一大坨无关痛痒的代码, 仅仅是为了发起请求并且获取结果。 后来jquery出现了我没玩过其他比如prototype这种前端框架, 我是个职业后台), $.ajax简化了好多参数, 但是时代也在进步, 这时候又出来问题, 简单列几个痛点: 怎么处理回调地狱( callback地狱)? 一个网页可能存在多个异步请求, 怎么管理请求, 避免散落一地? 我想在数据返回的时候做一个拦截处理怎么办? 同理, 请求前想做拦截处理怎么办? 怎么管理以上的逻辑? 后来近几年es6遍地开花, 出现了Promise / fetch这种专治老司机各种不服的API, 再有后者es7推出的async / await直接把回调地狱打进了历史教科书, 但是后面四个问题依然存在。 然后我看到了axios框架, 看了一下github里面的教程, 好好好, 不错, 该有的都有, 但是对于我这种用惯响应式客户端的挑剔鬼而言, 是不是可以再做得得更彻底一些? 比如java的改造, 空值;
}
@Args(“ createStartTime”,“ createEndingTime”,“ updateStartTime”,“ updateEndingTime”,“ status”,“ nickname”,“ account”) @PostMapping(“ / count_by_multi_condition”) public countByMultiCondition( createStartTime: number, createEndingTime: number, updateStartTime: number, updateEndingTime: number, status: number, nickname: string, account: string): Promise < any > {
return空值;
}
@Args(“ id”,“ status”,“ name”) @PostMapping(“ / update_user_detail”) public updateUserDetail( id: string, status: number, name: string): Promise < any > {
return空值;
}
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 @ ResponseBody() @ RequestMapping(“ / user”) class UserDetailClient {
@ args(“ createStartTime”,“ createEndingTime”,“ updateStartTime”,“ updateEndingTime”,“ status”,“ nickname”,“ account”,“ page”,“ row”) @ PostMapping(“ / query_by_multi_condition”) public queryByMultiCondition( createStartTime: number, createEndingTime: number, updateStartTime: number, updateEndingTime: number, status: number, nickname: string, account: string, page: number, row: number): Promise < any > {
return空值;
}
@Args(“ createStartTime”,“ createEndingTime”,“ updateStartTime”,“ updateEndingTime”,“ status”,“ nickname”,“ account”) @ PostMapping(“ / count_by_multi_condition”) public countByMultiCondition( createStartTime: number, createEndingTime: number, updateStartTime: number, updateEndingTime: number, status: number, nickname: string, account: string): Promise < any > {
return空值;
}
@Args(“ id”,“ status”,“ name”) @ PostMapping(“ / update_user_detail”) public updateUserDetail( id: string, status: number, name: string): Promise < any > {
return空值;
}
}
然后初始化一个客户端:
let retrofit = new FetchRetrofit.Builder()。 baseUrl( REQUEST_ADDRESS).timeout( 0) //忽略AuthenticationInterceptor,还有一大坨没有贴出来.addInterceptor(new AuthenticationInterceptor()).build ); 让userDetailClient:UserDetailClient = retrofit.create(UserDetailClient); 1 2 3 4 5 6 7 8 let retrofit = new FetchRetrofit。Builder()。baseUrl(请求_地址)。timeout(0)//忽略AuthenticationInterceptor,还有一大坨没有贴出来。addInterceptor(new AuthenticationInterceptor())。build(); 让userDetailClient:UserDetailClient =翻新。创建(UserDetailClient);到现在,retrofit变量就是一个拥有自动重试,拦截器链,缓存,重定向的客户端对象了.so,做完这些事之后,怎么搞?我说,就这么搞:let users =(等待userDetailClient.queryByMultiCondition(createStartTime,createEndingTime,updateStartTime,updateEndingTime,状态,昵称,帐户,页面-1,范围))。body.result; 1 2 3 4 let users =(等待userDetailClient。queryByMultiCondition(createStartTime,createEndingTime,updateStartTime,updateEndingTime,状态,昵称,帐户,页面-1,范围))。身体 。结果;哟,就是这样,一句话,不超过100个字符,但已经等同于一个带有一切完成功能的异步请求。我个人觉得这才是Http客户端该有的姿态,简洁有力,直冲痛点。其实设计也很简单,而且这种工具在服务端已经很成熟了,所以在参考了retrofit之后,我也自己设计了一个可用的雏形,叫做retrofitjs。而在其中,用到的特性包括es6的Proxy,Decorator,所以如果真正想用,只能通过babel项目来编译其次,如果用纯JavaScript实现,不知道能不能做到兼容es5,因为TypeScript编译后,es5对象是不能继承es6对象的,所以TypeScript实现的支持最多只能去到es6。其实这个项目应该更完善,比如缓存,重定向,自动重发等功能都应该实现,但是是个人时间不允许,而且我是服务端的人了,可不能心猿意马阿= = || 写出这文章也是为了告诉大家,前端的异步请求还能做的更好!范围 ) ) 。身体 。结果;哟,就是这样,一句话,不超过100个字符,但已经等同于一个带有一切完成功能的异步请求。我个人觉得这才是Http客户端该有的姿态,简洁有力,直冲痛点。其实设计也很简单,而且这种工具在服务端已经很成熟了,所以在参考了retrofit之后,我也自己设计了一个可用的雏形,叫做retrofitjs。而在其中,用到的特性包括es6的Proxy,Decorator,所以如果真正想用,只能通过babel项目来编译其次,如果用纯JavaScript实现,不知道能不能做到兼容es5,因为TypeScript编译后,es5对象是不能继承es6对象的,所以TypeScript实现的支持最多只能去到es6。其实这个项目应该更完善,比如缓存,重定向,自动重发等功能都应该实现,但是是个人时间不允许,而且我是服务端的人了,可不能心猿意马阿= = || 写出这文章也是为了告诉大家,前端的异步请求还能做的更好!范围 ) ) 。身体 。结果;哟,就是这样,一句话,不超过100个字符,但已经等同于一个带有一切完成功能的异步请求。我个人觉得这才是Http客户端该有的姿态,简洁有力,直冲痛点。其实设计也很简单,而且这种工具在服务端已经很成熟了,所以在参考了retrofit之后,我也自己设计了一个可用的雏形,叫做retrofitjs。而在其中,用到的特性包括es6的Proxy,Decorator,所以如果真正想用,只能通过babel项目来编译其次,如果用纯JavaScript实现,不知道能不能做到兼容es5,因为TypeScript编译后,es5对象是不能继承es6对象的,所以TypeScript实现的支持最多只能去到es6。其实这个项目应该更完善,比如缓存,重定向,自动重发等功能都应该实现。
» 本文来自:前端开发者 » 《响应式HTTP Client在前端的应用_前端开发者》
» 本文链接地址:https://www.rokub.com/2162.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!