主要封装uni-app网络中的请求以及上传、下载即 uni.request(OBJECT)、uni.uploadFile(OBJECT)和uni.downloadFile(OBJECT);

拦截器封装实现

请求拦截器

  1. ## interceptor.ts
  2. /**
  3.  * 请求拦截
  4.  * @param {RequestOption} options 请求配置
  5.  * @param {boolean} hideLoading 是否打开 加载中 弹窗
  6.  */
  7. const reqInterceptor = async (options: RequestOption, hideLoading?: boolean) => {
  8.   // 请求拦截时， 设置 header 的一些内容
  9.   options.header = {
  10.     // 设置默认的 header
  11.     "Content-Type": "application/json;charset=UTF-8",
  12.     ...options.header,
  13.     // 拦截到请求，设置需要的header处理
  14.   };
  15.   if(!hideLoading) {
  16.     uni.showLoading({title: "正在加载..."});
  17.   }
  18.   return options;
  19. }

响应拦截器

  1. ## interceptor.ts
  2. /**
  3.  * 响应拦截
  4.  * @param {ResponseSuccess} response 响应返回的数据
  5.  */
  6. const resInterceptor = (response: ResponseSuccess) => {
  7.   // 请求完成
  8.   uni.hideLoading();
  9.   const statusCode = response.statusCode as number;
  10.   if(statusCode >= 200 && statusCode < 300) {
  11.     // 日志收集
  12.     let _result = null;
  13.     if("data" in response) _result = response.data;
  14.     if("tempFilePath" in response) _result = response.tempFilePath;
  15.     return _result;
  16.   } else if(statusCode === 500) {
  17.     uni.showToast({icon: "none", title: "服务器错误"});
  18.     // 日志收集
  19.     return {
  20.       wakaryReqReject: true,
  21.       msg: "服务器错误",
  22.       res: response
  23.     }
  24.   } else {
  25.     uni.showToast({icon: "none", title: "服务器异常"});
  26.     // 日志收集
  27.     return {
  28.       wakaryReqReject: true,
  29.       msg: "服务器异常",
  30.       res: response
  31.     }
  32.   }
  33. }

封装Request请求

Request具体实现

  1. ## request.ts
  2. /* 引用类型申明 */
  3. import { RequestMethod, RequestConfig, ResponseSuccess, ResponseFail, ResponseComplete, NewRequestOptions, RequestTask, UniRequestConfig } from 'request';
  4. import {reqInterceptor, resInterceptor} from './interceptor';
  5. import {RequestMethods, RequestType} from './requestEnum';
  7. const baseUrl:string = process.env.NODE_ENV === "development"?"http://test1.massmakers.cn":"线上地址";
  8. export default class Request {
  9.     private _config: RequestConfig;
  10.     private _requestInterceptor: Function | null;
  11.     private _responseInterceptor: Function | null;
  12.     private _success: Function | null;
  13.     private _fail: Function | null;
  14.     private _complete: Function | null;
  15.     /**
  16.      * 构造器
  17.      * @param {RequestConfig} config 默认配置
  18.      * @param {Function} callback 剩余参数--拦截器等
  19.      */
  20.     constructor(config: RequestConfig, ...callback: Function[]) {
  21.         this._config = config;
  22.         this._config.baseUrl = this._config.baseUrl || baseUrl;
  23.         [this._requestInterceptor=null, this._responseInterceptor=null, this._success=null,this._fail=null,this._complete=null] = callback;
  24.     }
  25.     /**
  26.      * 请求 api
  27.      * @param {RequestMethods} method 请求方式
  28.      * @param {string} apiUrl 接口路径
  29.      * @param {NewRequestOptions} options 请求剩余配置
  30.      */
  31.     public async request(method: RequestMethods, apiUrl: string, params?: object, options?: NewRequestOptions):Promise<string | object> {
  32.         // 处理请求配置
  33.         let _config = await this.reqConfig(this._config, method, apiUrl, params, options);
  34.         const _type = options?.type || RequestType.REQUEST;
  35.         const _successHandler = options?.success || null, _failHandler = options?.fail || null, _completeHandler = options?.complete || null;
  36.         if(!_config || typeof _config !== "object") {
  37.             return Promise.reject('参数不正确');
  38.         }
  39.         // 处理结束
  40.         return new Promise((resolve, reject) => {
  41.             _config["success"] = (response: ResponseSuccess): void => {
  42.                 let _res = this._responseInterceptor?.(response) || null;
  43.                 _successHandler?.(response);
  44.                 if (_res?.wakaryReqReject) {
  45.                     delete _res.wakaryReqReject;
  46.                     reject(_res);
  47.                 } else {
  48.                     resolve(_res);
  49.                 }
  50.             }
  51.             _config["fail"] = (err: ResponseFail): void => {
  52.                 _failHandler?.(err);
  53.             }
  54.             _config["complete"] = (res: ResponseComplete): void => {
  55.                 _completeHandler?.(res);
  56.             }
  57.             switch(_type) {
  58.                 case RequestType.REQUEST:
  59.                     uni.request(_config);
  60.                     break;
  61.                 case RequestType.UPLOADFILE:
  62.                     uni.uploadFile(_config);
  63.                     break;
  64.                 case RequestType.DOWNLOADFILE:
  65.                     uni.uploadFile(_config);
  66.                     break;
  67.                 default:
  68.             }
  69.         });
  70.     }
  71.     /**
  72.      * 处理请求配置
  73.      * @param {RequestConfig} config 默认配置
  74.      * @param {RequestMethods} method 请求方式
  75.      * @param {string} apiUrl 接口路径
  76.      * @param {NewRequestOptions} options 请求剩余配置
  77.      */
  78.     private async reqConfig(config: RequestConfig, method: RequestMethods, apiUrl: string, params?: object, options?: NewRequestOptions):Promise<UniRequestConfig> {
  79.         const regExp = /(http|https):\/\/([\w.]+\/?)\S*/;
  80.         const _options = options || null, _type = _options?.type || RequestType.REQUEST, _hideLoading = _options?.hideLoading || false;
  81.         let _data = _options && _options.data || null;
  82.         let _config: UniRequestConfig = {
  83.             url: regExp.test(apiUrl)?apiUrl: config.baseUrl + apiUrl,
  84.             method,
  85.             data: Object.assign({},params,  _data)
  86.         };
  87.         try {
  88.             _config = await this._requestInterceptor?.(Object.assign({},_options, _config), _hideLoading);
  89.         } catch(e) {
  90.             throw e;
  91.         }
  92.         switch(_type) {
  93.             case RequestType.REQUEST:
  94.                 _config.dataType = _config.dataType || "json";
  95.                 _config.responseType = _config.responseType || "text";
  96.                 break;
  97.             case RequestType.UPLOADFILE:
  98.                 delete _config.header["Content-Type"];
  99.                 delete _config.header["Referer"];
  100.                 break;
  101.             case RequestType.DOWNLOADFILE:
  102.                 delete _config.header["Referer"];
  103.                 break;
  104.             default:
  105.         }
  106.         return Promise.resolve(_config);
  107.     }
  108. }

再次封装, 对象模式传递请求类型 method

  1. ## request.ts
  2. /**
  3.  * js 中 this 作用域问题
  4.  * for 循环遍历 实现 request.get 方式传参method
  5.  */
  6. const _this = new Request({},reqInterceptor,resInterceptor);
  7. const request: RequestMethod = {};
  8. for (let method in RequestMethods) {
  9.     request[method.toLowerCase()] =(apiUrl: string, params?: object, options?: NewRequestOptions) => _this.request(method as RequestMethods,apiUrl, params, options);
  10. }
  12. export {request};

至此,request封装完成.

Tips:

  • 原 uni-app 请求中 中断请求 未封装,需要使用中断处理的需要使用原uni-app请求;

附录:

请求封装中使用的枚举数据

  1. export const enum RequestType {
  2.   REQUEST = "request",
  3.   UPLOADFILE = "upload",
  4.   DOWNLOADFILE = "download"
  5. }
  6. export enum RequestMethods {
  7.   GET = "GET",
  8.   POST = "POST",
  9.   PUT = "PUT",
  10.   DELETE = "DELETE",
  11.   CONNECT = "CONNECT",
  12.   HEAD = "HEAD",
  13.   OPTIONS = "OPTIONS",
  14.   TRACE = "TRACE"
  15. }

请求封装中使用的类型申明 .d.ts (存放在根目录下的typings文件夹下)

  1. declare module 'request' {
  2.   import {RequestType} from '@/utils/request/requestEnum';
  4.   export interface RequestMethod {
  5.     [RequestMethods.GET]?: Function;
  6.     [RequestMethods.POST]?: Function;
  7.     [RequestMethods.PUT]?: Function;
  8.     [RequestMethods.DELETE]?: Function;
  9.     [RequestMethods.CONNECT]?: Function;
  10.     [RequestMethods.HEAD]?: Function;
  11.     [RequestMethods.OPTIONS]?: Function;
  12.     [RequestMethods.TRACE]?: Function;
  13.     [method: string]: Function;
  14.   }
  15.   export interface NewAddRequestOptions {
  16.     hideLoading?: boolean;
  17.     type?: RequestType;
  18.   }
  19.   export type RequestOption = UniApp.RequestOptions & UniApp.UploadFileOption & UniApp.DownloadFileOption;
  20.   export type NewRequestOptions = NewAddRequestOptions & RequestOption;
  21.   export type ResponseSuccess = UniApp.RequestSuccessCallbackResult | UniApp.UploadFileSuccessCallbackResult | UniApp.DownloadSuccessData;
  22.   export type ResponseFail = UniApp.GeneralCallbackResult;
  23.   export type ResponseComplete = UniApp.GeneralCallbackResult;
  24.   export type RequestTask = UniApp.RequestTask | UniApp.UploadTask | UniApp.DownloadTask | null;
  25.   export interface RequestConfig {
  26.     baseUrl?: string;
  27.   }
  28. }

参考资料

uni-app官方文档之网络