uniapp的请求封装（含post ,get,put ,delete）

男娘i 2023-02-17 02:16 59阅读 0赞

最近使用uniapp写小程序，但是没有合适的数据请求，于是自己熬夜写了一个。
这是对应代码的下载链接
也可以直接找我要代码
下面是对于代码的解释:

  1. 请求的初步封装

    export default class request { 

    1. // 配置项
    2. constructor(options) { 
    3.     //请求公共地址
    4.     this.baseUrl = options.baseUrl || "";
    5.     //公共文件上传请求地址
    6.     this.fileUrl = options.fileUrl || "";
    7.     //默认请求头
    8.     this.header = options.header || { };
    9.     //默认配置
    10.     this.config = { 
    11.     // 这是对于接口的错误是否提示
    12.         isPrompt: options.isPrompt === false ? false : true,
    13.         // 是否加载动画提示
    14.         load: options.load === false ? false : true,
    15.         // 是否需要token
    16.         needToken: options.needToken === false ? false : true, 
    17.         // 公共数据的处理
    18.         isFactory: options.isFactory === false ? false : true,
    19.         loadMore: options.loadMore === false ? false : true
    20.     };
    21. }
    23. // 获取默认信息
    24. getDefault(data, options = { }) { 
    25.     //判断url是不是链接
    26.     let urlType = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~/])+$/.test(data.url);
    27.     let config = Object.assign({ }, this.config, options, data);
    28.     if (data.method == "FILE") { 
    29.         config.url = urlType ? data.url : this.fileUrl + data.url;
    30.     } else { 
    31.         config.url = urlType ? data.url : this.baseUrl + data.url;
    32.     }
    33.     //请求头
    34.     if (options.header) { 
    35.         config.header = Object.assign({ }, this.header, options.header);
    36.     } else if (data.header) { 
    37.         config.header = Object.assign({ }, this.header, data.header);
    38.     } else { 
    39.         config.header = this.header;
    40.     }
    41.     return config;
    42. }
    44. //post请求
    45. post(url = '', data = { }, options = { }) { 
    46.     return this.request({ 
    47.         method: "POST",
    48.         data: data,
    49.         url: url,
    50.         ...options
    51.     });
    52. }
    54. //get请求
    55. get(url = '', data = { }, options = { }) { 
    56.     return this.request({ 
    57.         method: "GET",
    58.         data: data,
    59.         url: url,
    60.         ...options
    61.     });
    62. }
    64. //put请求
    65. put(url = '', data = { }, options = { }) { 
    66.     return this.request({ 
    67.         method: "PUT",
    68.         data: data,
    69.         url: url,
    70.         ...options
    71.     });
    72. }
    74. //delete请求
    75. delete(url = '', data = { }, options = { }) { 
    76.     return this.request({ 
    77.         method: "DELETE",
    78.         data: data,
    79.         url: url,
    80.         ...options
    81.     });
    82. }
    84. //接口请求方法
    85. request(data) { 
    86.         const _this = this;
    87.     return new Promise((resolve, reject) => { 
    88.         if (!data.url) { 
    89.             console.log("request缺失数据url");
    90.             reject({ 
    91.                 errMsg: "缺失数据url",
    92.                 statusCode: 0
    93.             });
    94.             return;
    95.         }
    96.         let requestInfo = this.getDefault(data);
    97.         //请求前回调
    98.         if (_this.requestStart) { 
    99.             let requestStart = this.requestStart(requestInfo);
    100.             if (typeof requestStart == "object") { 
    101.                 requestInfo.data = requestStart.data;
    102.                 requestInfo.header = requestStart.header;
    103.                 requestInfo.isPrompt = requestStart.isPrompt;
    104.                 requestInfo.needToken = requestStart.needToken;
    105.                 requestInfo.load = requestStart.load;
    106.                 requestInfo.isFactory = requestStart.isFactory;
    107.             } else { 
    108.                 //请求完成回调
    109.                 _this.requestEnd && _this.requestEnd(requestInfo, { 
    110.                     errMsg: "请求开始拦截器未通过",
    111.                     statusCode: 0
    112.                 });
    113.                 reject({ 
    114.                     errMsg: "请求开始拦截器未通过",
    115.                     statusCode: 0
    116.                 });
    117.                 return;
    118.             }
    119.         }
    120.         let requestData = { 
    121.             url: requestInfo.url,
    122.             header: requestInfo.header, //加入请求头
    123.             success: (res) => { 
    124.                 //请求完成回调
    125.                 this.requestEnd && this.requestEnd(requestInfo, res);
    126.                 //是否用外部的数据处理方法
    127.                 if (requestInfo.isFactory && this.dataFactory) { 
    128.                     //数据处理
    129.                     this.dataFactory({ 
    130.                         ...requestInfo,
    131.                         response: res,
    132.                         resolve: resolve,
    133.                         reject: reject
    134.                     });
    135.                 } else { 
    136.                     resolve(res);
    137.                 }
    138.             },
    139.             fail: (err) => { 
    140.                 console.log("err");
    141.                 //请求完成回调
    142.                 this.requestEnd && this.requestEnd(requestInfo, err);
    143.                 reject(err);
    144.             }
    145.         };

    }

  2. 跟地址，token的配置，请求拦截和响应拦截

    import request from “./request”;
    // 全局配置的请求域名
    let baseUrl = “http://sunshine.createnetwork.cn/api/“;
    //可以new多个request来支持多个域名请求
    let $http = new request({ 

    1. //接口请求地址
    2. baseUrl: baseUrl,
    3. //设置请求头（如果使用报错跨域问题，可能是content-type请求类型和后台那边设置的不一致）
    4. header: { 
    5.     'content-type': 'application/json;charset=UTF-8'
    6. },
    7. //以下是默认值可不写
    8. //是否提示--默认提示
    9. isPrompt: true,
    10. // 1 请求是否带token 默认带token
    11. needToken: true,
    12. //是否显示请求动画
    13. load: true,
    14. //是否使用处理数据模板
    15. isFactory: true

    });

  1. //当前接口请求数
  2. let requestNum = 0;
  3. //请求开始拦截器
  4. $http.requestStart = function(options) { 
  5.     if (options.load) { 
  6.         if (requestNum <= 0) { 
  7.             //打开加载动画
  8.             uni.showLoading({ 
  9.                 title: '加载中',   
  10.                 mask: true
  11.             });
  12.         }
  13.         requestNum += 1;
  14.     }
  17.     if (options.needToken){ 
  18.         //请求前加入token
  19.             if(options.needToken){ 
  21.             }
  22.             // 这个是异步获取token 应该是同步获取
  23.             // let token =""
  24.             // uni.getStorage({ 
  25.             // key: 'Authorization',
  26.             // success: function (res) { 
  27.             // console.log(res.data,6);
  28.             // token = res.data
  29.             // }
  30.             // });
  31.              const token = uni.getStorageSync('Authorization');
  33.             if (!token) { 
  34.                 console.log(token,6);
  35.                         if (options.needToken) { 
  36.                             // uni.reLaunch({ 
  37.                             // // 如果没有token就转跳到登入页面
  38.                             // url: '../pages/login/logi'
  39.                             // });
  40.                             // return false;
  41.                             uni.showModal({ 
  42.                                 title: '温馨提示',
  43.                                 content: '此时此刻需要您登录喔~',
  44.                                 confirmText: "去登录",
  45.                                 cancelText: "再逛会",
  46.                                 success: res2 => { 
  47.                                     loginPopupNum--;
  48.                                     if (res2.confirm) { 
  49.                                         uni.navigateTo({ 
  50.                                             url: "../../pages/login/login"
  51.                                         });
  52.                                     }
  53.                                 }
  54.                             });
  55.                         }
  56.                     }
  57.                 // 请求头中配置token 
  58.             options.header['Authorization'] = 'Bearer ' + token 
  60.         }
  61.         return options;
  62.     }
  64. //请求结束 响应拦截
  65. $http.requestEnd = function(options, resolve) { 
  66.     //判断当前接口是否需要加载动画 
  67.     if (options.load) { 
  68.         requestNum = requestNum - 1;
  69.         if (requestNum <= 0) { 
  70.             uni.hideLoading();
  71.         }
  72.     }
  73.     if (resolve.errMsg && resolve.statusCode && resolve.statusCode > 300) { 
  74.         setTimeout(() => { 
  75.             uni.showToast({ 
  76.                 title: "网络错误，请检查一下网络",
  77.                 icon: "none"
  78.             });
  79.         }, 500);
  80.     }
  81.     // if()
  82. }
  83. //登录弹窗次数
  84. let loginPopupNum = 0;
  85. //所有接口数据处理（可在接口里设置不调用此方法）
  86. //此方法需要开发者根据各自的接口返回类型修改，以下只是模板
  87. $http.dataFactory = function(res) { 
  88.     console.log("接口请求数据", { 
  89.         httpUrl: res.url,
  90.         resolve: res.response,
  91.         header: res.header,
  92.         data: res.data,
  93.         method: res.method,
  94.     });
  95.     // 判断接口请求是否成功
  96.     console.log(res.response.statusCode,10);
  97.     if (res.response.statusCode || res.response.statusCode == 200) { 
  99.         let httpData = res.response.data;
  102.         console.log(httpData.success);
  103.         //判断数据是否请求成功
  104.         if (res.response.statusCode == 200 || res.response.statusCode == 201) { 
  105.             // 返回正确的结果(then接受数据)
  106.             res.resolve(httpData);
  107.             console.log(res.response.statusCode,res.resolve(httpData.data));
  109.         } else if (res.response.statusCode == 401  || res.response.statusCode == 403) {  
  110.             // 对401 403的处理
  111.             // 刷新token
  112.             $http.put('authorizations/current').
  113.             then(function (response) { 
  114.                 //这里只会在接口是成功状态返回
  115.                 // 返回成功再次存储 token数据
  116.                      uni.setStorageSync('Authorization', response);
  119.             }).catch(function (error) {     
  120.                 //这里只会在接口是失败状态返回，不需要去处理错误提示
  121.                 console.log(error);
  122.             });
  123.             // 返回错误的结果(catch接受数据)
  124.             res.reject(res.response);
  125.         } else {  //其他错误提示
  126.             if (res.isPrompt) {  //设置可以提示的时候
  127.                 setTimeout(function() { 
  128.                     uni.showToast({ 
  129.                         // title: httpData.info, //提示后台接口抛出的错误信息
  130.                         title: httpData.info,
  131.                         icon: "none",
  132.                         duration: 3000
  133.                     });
  134.                 }, 500);
  135.             }
  136.             // 返回错误的结果(catch接受数据)
  137.             res.reject(res.response);
  138.         }
  142.     } else { 
  143.         // 返回错误的结果(catch接受数据)
  144.         res.reject(res.response);
  145.     }
  146. };
  147. export default $http;

发表评论

表情：
评论列表 （有 0 条评论，59人围观）

还没有评论，来说两句吧...

相关阅读