http.js 在Ajax单页面中的应用

DC_er 发布于2019-08-21 10:17 / 3453人阅读

摘要：发送全局参数我做单页面应用时，会有这样一个情景当用户登录后，服务器会返回一个值，之后的大部分请求都需要传递这个参数。因此，我在中增加这样一个函数来解决上面的问题。

关于作者

马隆博(Lenbo Ma)，Java，Javascript

Blog: http://mlongbo.com

E-Mail: mlongbo@gmail.com

文章编写于: 2014/08/10

转载请注明出处:

http://mlongbo.com/http-js-zai-ajaxdan-y...

要解决的问题

简化api使用;

为页面中Ajax请求设置全局拦截器;

页面中所有Ajax请求向服务器发送全局参数;

实现 简化API

我个人喜欢链式调用，以及简单明了的API设计。因此，我主要在以下几个部分做了简化:

为每种请求类型增加一个函数。如: $http.get(); $http.post(); $http.del(); $http.put();

可以动态设置请求参数;

req.push(key,val); or req.push(jsonObj); //设置请求参数, 可同时增加一个或多个参数

req.data(jsonObj); //会覆盖push函数设置过的值

req.header(key,val); or req.header(jsonObj); //请求头, 可同时增一个或多个

req.headers(jsonObj); //会覆盖header函数设置过的值

同样, 其他的功能也可以拆分成独立函数来设置, 比如:

req.type(typeStr); //设置响应数据类型

req.cache(boolean); //是否缓存

总之，你完全可以按照你自己最喜爱的方式定制API。

拦截器实现

之所以会有拦截器的需求，是因为我之前所做的一个应用的数据响应格式如下:

{
  code: 1,
  message: "响应信息"
}

其中code值会有这样几种值:

0 failed

1 success

2 session timeout

因此我需要统一处理会话过期情况，比如通知用户重新登录等。

我使用req.interceptor(type,func(res){}); 来增加一个拦截器。当服务器响应数据时，将先调用设置的全局拦截器，之后再去调用业务相关的回调函数。如果我http.js去服务器获取html模板代码时，即响应的数据类型是text/html，而不是application/json，这时候再去做拦截就不好玩了。因此，我用了一个type参数来给interceptor分组。

发送全局参数

我做单页面应用时，会有这样一个情景:

当用户登录后，服务器会返回一个token值，之后的大部分api请求都需要传递这个token参数。因此，如果在每次ajax请求时都手动增加一个token参数值，就感觉有些效率低下。同样，你的同事们可能也会遇到和你同样的情况，这时候还要一个个告诉他们怎么设置token参数就很不好玩儿了。

因此，我在http.js中增加$http.global(key,val); or $http.global(jsonObj);这样一个函数来解决上面的问题。

结语

至于基于什么ajax库来封装，你可以使用原生ajax，jquery ajax，或者其他你喜欢的ajax library。同时，欢迎各种讨论 ^_^

这是我写的http.js代码片段，不太全面，也许可供你参考。

扫描二维码，关注我。
内容大多会是后端技术、前端工程、DevOps，偶尔会有一些大数据相关，会推荐一些好玩的东西。希望你会喜欢~

云服务器 GPU云服务器单页面应用在深度学习中的应用机器学习在企业中的应用云主机在我们工作中的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85252.html

基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战

摘要：原作者原链接基于多入口生成模板用于服务端渲染的方案及实战法律声明警告本作品遵循署名非商业性使用禁止演绎未本地化版本协议发布。这是什么背景现代化的前端项目中很多都使用了客户端渲染的单页面应用。原作者：@LinuxerPHL原链接：基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战法律声明警告：本作品遵循署名-非商业性使用-禁止演绎3.0 未本地化版本（CC BY-...

big_cat 2019-08-26 10:37 评论0 收藏0
基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战

摘要：原作者原博文地址基于多入口生成模板用于服务端渲染的方案及实战法律声明警告本作品遵循署名非商业性使用禁止演绎未本地化版本协议发布。这是什么背景现代化的前端项目中很多都使用了客户端渲染的单页面应用。原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战法律声明警告：本作品遵循署名-非商业性使用-禁止演绎3.0 未本地化版本（...

Lavender 2019-08-26 10:37 评论0 收藏0
基于 jQuery Ajax 定制自己喜爱的 API

摘要：你觉得的怎么样，想不想定制更适合自己的丝滑。这篇文章基于我之前的的一篇在单页面中的应用整理而来。因此，我基于，重新封装了一层。内容大多会是后端技术前端工程，偶尔会有一些大数据相关，会推荐一些好玩的东西。希望你会喜欢一切，源于喜欢。 showImg(http://ww1.sinaimg.cn/large/b196a42dgw1f2t2s0fkzoj20fu0643yd.jpg); 你觉得...

30e8336b8229 2019-08-19 18:05 评论0 收藏0
一种SPA（单页面应用）架构

摘要：个人认为单页面应用的优势相当明显前后端职责分离，架构清晰前端进行交互逻辑，后端负责数据处理。上面的这种单页面应用也有其相应的一种开发工作流，当然这种工作流也适合非单页面应用进行产品功能原型设计。未经允许，请勿转载。本文同时也发布在我的博客。（如果对SPA概念不清楚的同学可以先自行了解相关概念）平时喜欢做点小页面来玩玩，并且一直采用单页面应用（Single Page Appl...

Codeing_ls 2019-08-21 12:23 评论0 收藏0
SPA那点事

摘要：单页面应用的出现依然存在着争议性，我们该如何看待他的两面性呢接下来小生给大家总结一下他的优缺点。单页面应用的优势无刷新体验没有了令人诟病的页面频繁刷新，同时节约浏览器资源，路由响应比较及时，提升了用户的体验。前端猿一天不学习就没饭吃了，后端猿三天不学习仍旧有白米饭摆于桌前。IT行业的快速发展一直在推动着前端技术栈在不断地更新换代，前端的发展成了互联网时代的一个缩影。而单页面应用的发展...

PumpkinDylan 2019-08-01 17:39 评论0 收藏0