You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

169 lines
5.6 KiB

3 years ago
  1. import deepMerge from "../function/deepMerge";
  2. import validate from "../function/test";
  3. class Request {
  4. // 设置全局默认配置
  5. setConfig(customConfig) {
  6. // 深度合并对象,否则会造成对象深层属性丢失
  7. this.config = deepMerge(this.config, customConfig);
  8. }
  9. // 主要请求部分
  10. request(options = {}) {
  11. // 检查请求拦截
  12. if (this.interceptor.request && typeof this.interceptor.request === 'function') {
  13. let tmpConfig = {};
  14. let interceptorRequest = this.interceptor.request(options);
  15. if (interceptorRequest === false) {
  16. // 返回一个处于pending状态中的Promise,来取消原promise,避免进入then()回调
  17. return new Promise(()=>{});
  18. }
  19. this.options = interceptorRequest;
  20. }
  21. options.dataType = options.dataType || this.config.dataType;
  22. options.responseType = options.responseType || this.config.responseType;
  23. options.url = options.url || '';
  24. options.params = options.params || {};
  25. options.header = Object.assign({}, this.config.header, options.header);
  26. options.method = options.method || this.config.method;
  27. return new Promise((resolve, reject) => {
  28. options.complete = (response) => {
  29. // 请求返回后,隐藏loading(如果请求返回快的话,可能会没有loading)
  30. uni.hideLoading();
  31. // 清除定时器,如果请求回来了,就无需loading
  32. clearTimeout(this.config.timer);
  33. this.config.timer = null;
  34. // 判断用户对拦截返回数据的要求,如果originalData为true,返回所有的数据(response)到拦截器,否则只返回response.data
  35. if(this.config.originalData) {
  36. // 判断是否存在拦截器
  37. if (this.interceptor.response && typeof this.interceptor.response === 'function') {
  38. let resInterceptors = this.interceptor.response(response);
  39. // 如果拦截器不返回false,就将拦截器返回的内容给this.$u.post的then回调
  40. if (resInterceptors !== false) {
  41. resolve(resInterceptors);
  42. } else {
  43. // 如果拦截器返回false,意味着拦截器定义者认为返回有问题,直接接入catch回调
  44. reject(response);
  45. }
  46. } else {
  47. // 如果要求返回原始数据,就算没有拦截器,也返回最原始的数据
  48. resolve(response);
  49. }
  50. } else {
  51. if (response.statusCode == 200) {
  52. if (this.interceptor.response && typeof this.interceptor.response === 'function') {
  53. let resInterceptors = this.interceptor.response(response.data);
  54. if (resInterceptors !== false) {
  55. resolve(resInterceptors);
  56. } else {
  57. reject(response.data);
  58. }
  59. } else {
  60. // 如果不是返回原始数据(originalData=false),且没有拦截器的情况下,返回纯数据给then回调
  61. resolve(response.data);
  62. }
  63. } else {
  64. // 不返回原始数据的情况下,服务器状态码不为200,modal弹框提示
  65. // if(response.errMsg) {
  66. // uni.showModal({
  67. // title: response.errMsg
  68. // });
  69. // }
  70. reject(response)
  71. }
  72. }
  73. }
  74. // 判断用户传递的URL是否/开头,如果不是,加上/,这里使用了uView的test.js验证库的url()方法
  75. options.url = validate.url(options.url) ? options.url : (this.config.baseUrl + (options.url.indexOf('/') == 0 ?
  76. options.url : '/' + options.url));
  77. // 是否显示loading
  78. // 加一个是否已有timer定时器的判断,否则有两个同时请求的时候,后者会清除前者的定时器id
  79. // 而没有清除前者的定时器,导致前者超时,一直显示loading
  80. if(this.config.showLoading && !this.config.timer) {
  81. this.config.timer = setTimeout(() => {
  82. uni.showLoading({
  83. title: this.config.loadingText,
  84. mask: this.config.loadingMask
  85. })
  86. this.config.timer = null;
  87. }, this.config.loadingTime);
  88. }
  89. uni.request(options);
  90. })
  91. // .catch(res => {
  92. // // 如果返回reject(),不让其进入this.$u.post().then().catch()后面的catct()
  93. // // 因为很多人都会忘了写后面的catch(),导致报错捕获不到catch
  94. // return new Promise(()=>{});
  95. // })
  96. }
  97. constructor() {
  98. this.config = {
  99. baseUrl: '', // 请求的根域名
  100. // 默认的请求头
  101. header: {},
  102. method: 'POST',
  103. // 设置为json,返回后uni.request会对数据进行一次JSON.parse
  104. dataType: 'json',
  105. // 此参数无需处理,因为5+和支付宝小程序不支持,默认为text即可
  106. responseType: 'text',
  107. showLoading: true, // 是否显示请求中的loading
  108. loadingText: '请求中...',
  109. loadingTime: 800, // 在此时间内,请求还没回来的话,就显示加载中动画,单位ms
  110. timer: null, // 定时器
  111. originalData: false, // 是否在拦截器中返回服务端的原始数据,见文档说明
  112. loadingMask: true, // 展示loading的时候,是否给一个透明的蒙层,防止触摸穿透
  113. }
  114. // 拦截器
  115. this.interceptor = {
  116. // 请求前的拦截
  117. request: null,
  118. // 请求后的拦截
  119. response: null
  120. }
  121. // get请求
  122. this.get = (url, data = {}, header = {}) => {
  123. return this.request({
  124. method: 'GET',
  125. url,
  126. header,
  127. data
  128. })
  129. }
  130. // post请求
  131. this.post = (url, data = {}, header = {}) => {
  132. return this.request({
  133. url,
  134. method: 'POST',
  135. header,
  136. data
  137. })
  138. }
  139. // put请求,不支持支付宝小程序(HX2.6.15)
  140. this.put = (url, data = {}, header = {}) => {
  141. return this.request({
  142. url,
  143. method: 'PUT',
  144. header,
  145. data
  146. })
  147. }
  148. // delete请求,不支持支付宝和头条小程序(HX2.6.15)
  149. this.delete = (url, data = {}, header = {}) => {
  150. return this.request({
  151. url,
  152. method: 'DELETE',
  153. header,
  154. data
  155. })
  156. }
  157. }
  158. }
  159. export default new Request