index.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  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. // resolve(resInterceptors);
  55. if (resInterceptors !== false) {
  56. resolve(resInterceptors);
  57. } else {
  58. reject(response.data);
  59. }
  60. } else {
  61. // 如果不是返回原始数据(originalData=false),且没有拦截器的情况下,返回纯数据给then回调
  62. resolve(response.data);
  63. }
  64. } else {
  65. // 不返回原始数据的情况下,服务器状态码不为200,modal弹框提示
  66. // if(response.errMsg) {
  67. // uni.showModal({
  68. // title: response.errMsg
  69. // });
  70. // }
  71. // 交由外部统一的异常处理- by enilu
  72. if (this.interceptor.error && typeof this.interceptor.error === 'function') {
  73. let resInterceptors = this.interceptor.error(response);
  74. if (resInterceptors !== false) {
  75. resolve(resInterceptors);
  76. } else {
  77. reject(response)
  78. }
  79. } else {
  80. // 如果不是返回原始数据(originalData=false),且没有拦截器的情况下,返回纯数据给then回调
  81. reject(response)
  82. }
  83. }
  84. }
  85. }
  86. // 判断用户传递的URL是否/开头,如果不是,加上/,这里使用了uView的test.js验证库的url()方法
  87. options.url = validate.url(options.url) ? options.url : (this.config.baseUrl + (options.url.indexOf('/') == 0 ?
  88. options.url : '/' + options.url));
  89. // 是否显示loading
  90. // 加一个是否已有timer定时器的判断,否则有两个同时请求的时候,后者会清除前者的定时器id
  91. // 而没有清除前者的定时器,导致前者超时,一直显示loading
  92. if(this.config.showLoading && !this.config.timer) {
  93. this.config.timer = setTimeout(() => {
  94. uni.showLoading({
  95. title: this.config.loadingText,
  96. mask: this.config.loadingMask
  97. })
  98. this.config.timer = null;
  99. }, this.config.loadingTime);
  100. }
  101. uni.request(options);
  102. })
  103. // .catch(res => {
  104. // // 如果返回reject(),不让其进入this.$u.post().then().catch()后面的catct()
  105. // // 因为很多人都会忘了写后面的catch(),导致报错捕获不到catch
  106. // return new Promise(()=>{});
  107. // })
  108. }
  109. constructor() {
  110. this.config = {
  111. baseUrl: '', // 请求的根域名
  112. // 默认的请求头
  113. header: {},
  114. method: 'POST',
  115. // 设置为json,返回后uni.request会对数据进行一次JSON.parse
  116. dataType: 'json',
  117. // 此参数无需处理,因为5+和支付宝小程序不支持,默认为text即可
  118. responseType: 'text',
  119. showLoading: true, // 是否显示请求中的loading
  120. loadingText: '请求中...',
  121. loadingTime: 800, // 在此时间内,请求还没回来的话,就显示加载中动画,单位ms
  122. timer: null, // 定时器
  123. originalData: false, // 是否在拦截器中返回服务端的原始数据,见文档说明
  124. loadingMask: true, // 展示loading的时候,是否给一个透明的蒙层,防止触摸穿透
  125. }
  126. // 拦截器
  127. this.interceptor = {
  128. // 请求前的拦截
  129. request: null,
  130. // 请求后的拦截
  131. response: null,
  132. //异常统一处理
  133. error:null,
  134. }
  135. // get请求
  136. this.get = (url, data = {}, header = {}) => {
  137. return this.request({
  138. method: 'GET',
  139. url,
  140. header,
  141. data
  142. })
  143. }
  144. // post请求
  145. this.post = (url, data = {}, header = {}) => {
  146. return this.request({
  147. url,
  148. method: 'POST',
  149. header,
  150. data
  151. })
  152. }
  153. // put请求,不支持支付宝小程序(HX2.6.15)
  154. this.put = (url, data = {}, header = {}) => {
  155. return this.request({
  156. url,
  157. method: 'PUT',
  158. header,
  159. data
  160. })
  161. }
  162. // delete请求,不支持支付宝和头条小程序(HX2.6.15)
  163. this.delete = (url, data = {}, header = {}) => {
  164. return this.request({
  165. url,
  166. method: 'DELETE',
  167. header,
  168. data
  169. })
  170. }
  171. }
  172. }
  173. export default new Request