1

关于作者

  • 马隆博(Lenbo Ma),Java,Javascript

  • Blog: http://mlongbo.com

  • E-Mail: mlongbo@gmail.com

  • 文章编写于: 2014/08/10

转载请注明出处:

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


要解决的问题

  1. 简化api使用;

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

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

实现

简化API

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

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

  2. 可以动态设置请求参数;

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

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

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

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

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

    • 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,偶尔会有一些大数据相关,会推荐一些好玩的东西。希望你会喜欢~

扫描二维码关注我


马隆博
489 声望27 粉丝

擅长 Java、JavaScript、Golang