当前位置:   article > 正文

es6 Promise封装ajax_es6封装ajax

es6封装ajax

 利用Promis 做一个简单的 数据请求封装。

  1. function requestP(options = {}) {
  2. const {
  3. url,
  4. data,
  5. type,
  6. async,
  7. header,
  8. dataType,
  9. responseType,
  10. success,
  11. fail,
  12. complete
  13. } = options;
  14. return new Promise((res, rej) => {
  15. $.ajax({
  16. type:type||"post",
  17. url: url,
  18. dataType: "json",
  19. data: data||"",
  20. async:async||true,
  21. error: function(err) {
  22. console.log("err",err);
  23. console.log("失败:" + JSON.stringify(err));
  24. mui.toast("网络出错,请检查网络连接!");
  25. rej(err);
  26. },
  27. success: function(data) {
  28. if(data.error_code > 0) {
  29. //console.log(data);
  30. console.log( JSON.stringify(data));
  31. rej(data);
  32. if(data.msg == "访问令牌不存在或已失效") {
  33. mui.toast("访问令牌不存在或已失效,请退出从新登陆");
  34. } else {
  35. mui.toast(data.msg);
  36. }
  37. }
  38. if(data.error_code == 0) {
  39. res(data);
  40. }
  41. },
  42. complete: function() {
  43. mui.hideLoading();
  44. }
  45. });
  46. });
  47. }
  48. function isHttpSuccess(status) {
  49. return status >= 200 && status < 300 || status === 304;
  50. }
  51. /**
  52. * ajax高级封装
  53. * 参数:[Object]option = {},参考wx.request;
  54. * [Boolen]keepLogin = false
  55. * 返回值:[promise]res
  56. */
  57. function req(options = {}, keepLogin = true) {
  58. if (keepLogin) {
  59. return new Promise((res, rej) => {
  60. // 获取sessionId成功之后,发起请求
  61. requestP(options)
  62. .then((r2) => {
  63. if (r2.rcode === 401) {
  64. console.log("登陆失效")
  65. } else {
  66. res(r2);
  67. }
  68. })
  69. .catch((err) => {
  70. // 请求出错
  71. rej(err);
  72. });
  73. });
  74. } else {
  75. // 不需要sessionId,直接发起请求
  76. return requestP(options);
  77. }
  78. }

 

  1. const apiUrl = '';
  2. const R = {
  3. //获取公司列表
  4. get_company_list(data) {
  5. const url = `${apiUrl}/member/Company/lst`
  6. return req({ url, data });
  7. },
  8. //绑定微信
  9. bind_wx(data){
  10. const url = `${apiUrl}/member/Index/bind`
  11. return req({ url, data });
  12. },
  13. //获取积分列表
  14. get_member_score_list(data){
  15. const url = `${apiUrl}/member/member_score/ajaxList`
  16. return req({ url, data });
  17. },
  18. //获取会员卡
  19. get_member_card_list(data){
  20. const url = `${apiUrl}/member/member_card/ajaxList`
  21. return req({ url, data });
  22. },
  23. //获取储值列表
  24. get_balance_list(data){
  25. const url = `${apiUrl}/member/balance/ajaxList`
  26. return req({ url, data });
  27. },
  28. //获取订单列表
  29. get_order_list(data){
  30. const url = `${apiUrl}/member/order/ajaxList`
  31. return req({ url, data });
  32. },
  33. //获取门店列表
  34. get_store_list(data){
  35. const url = `${apiUrl}/member/store/ajaxList`
  36. return req({ url, data });
  37. },
  38. //获取会员详情
  39. get_member_detail(data){
  40. const url = `${apiUrl}/member/member/detail`
  41. return req({ url, data });
  42. },
  43. //获取优惠券列表
  44. get_coupon_list(data){
  45. const url = `${apiUrl}/member/coupon/ajaxList`
  46. return req({ url, data });
  47. },
  48. //获取优惠券数量
  49. get_coupon_count(data){
  50. const url = `${apiUrl}/member/coupon/usableCount`
  51. return req({ url, data });
  52. },
  53. }

然后可以把,所有的 接口都写到同一个 js中。

在别的页面只需要引入这2个js 调用 R.get......这类的 函数 用 .then 就可以获取数据了

如果感兴趣,也可以关注我的微信公众号,因为刚起步,所以只有几篇文章,之后会慢慢更新。

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/148191
推荐阅读
相关标签
  

闽ICP备14008679号