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

2019年8月26日 271次阅读 来源: 马隆博

关于作者

  • 马隆博(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，偶然会有一些大数据相干，会引荐一些好玩的东西。愿望你会喜好~

《http.js 在Ajax单页面中的运用》

    原文作者：马隆博
    原文地址: https://segmentfault.com/a/1190000000635171
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞