代码展示

  1. /**
  2.  * Request 1.0.6
  3.  * @Class Request
  4.  * @description luch-request 1.0.6 http请求插件
  5.  * @Author lu-ch
  6.  * @Date 2020-03-17
  7.  * @Email webwork.s@qq.com
  8.  * http://ext.dcloud.net.cn/plugin?id=392
  9.  */
  10. export default class Request {
  11.     config = {
  12.         baseUrl: '',
  13.         header: {
  14.             'content-type': 'application/json'
  15.         },
  16.         method: 'GET',
  17.         dataType: 'json',
  18.         // #ifndef MP-ALIPAY || APP-PLUS
  19.         responseType: 'text',
  20.         // #endif
  21.         custom: {},
  22.         // #ifdef MP-ALIPAY
  23.         timeout: 30000,
  24.         // #endif
  25.         // #ifdef APP-PLUS
  26.         sslVerify: true
  27.         // #endif
  28.     };
  30.     static posUrl(url) {
  31.         /* 判断url是否为绝对路径 */
  32.         return /(http|https):\/\/([\w.]+\/?)\S*/.test(url);
  33.     }
  35.     static mergeUrl(url, baseUrl, params) {
  36.         let mergeUrl = Request.posUrl(url) ? url : `${baseUrl}${url}`;
  37.         if (Object.keys(params).length !== 0) {
  38.             const paramsH = Request.addQueryString(params);
  39.             mergeUrl += mergeUrl.includes('?') ? `&${paramsH}` : `?${paramsH}`;
  40.         }
  41.         return mergeUrl;
  42.     }
  44.     static addQueryString(params) {
  45.         let paramsData = '';
  46.         Object.keys(params).forEach(function(key) {
  47.             paramsData += key + '=' + encodeURIComponent(params[key]) + '&';
  48.         });
  49.         return paramsData.substring(0, paramsData.length - 1);
  50.     }
  52.     /**
  53.      * @property {Function} request 请求拦截器
  54.      * @property {Function} response 响应拦截器
  55.      * @type {{request: Request.interceptor.request, response: Request.interceptor.response}}
  56.      */
  57.     interceptor = {
  58.         /**
  59.          * @param {Request~requestCallback} cb - 请求之前拦截,接收一个函数（config, cancel）=> {return config}。第一个参数为全局config,第二个参数为函数，调用则取消本次请求。
  60.          */
  61.         request: cb => {
  62.             if (cb) {
  63.                 this.requestBeforeFun = cb;
  64.             }
  65.         },
  66.         /**
  67.          * @param {Request~responseCallback} cb 响应拦截器，对响应数据做点什么
  68.          * @param {Request~responseErrCallback} ecb 响应拦截器，对响应错误做点什么
  69.          */
  70.         response: (cb, ecb) => {
  71.             if (cb) {
  72.                 this.requestComFun = cb;
  73.             }
  74.             if (ecb) {
  75.                 this.requestComFail = ecb;
  76.             }
  77.         }
  78.     };
  80.     requestBeforeFun(config) {
  81.         return config;
  82.     }
  84.     requestComFun(response) {
  85.         return response;
  86.     }
  88.     requestComFail(response) {
  89.         return response;
  90.     }
  92.     /**
  93.      * 自定义验证器，如果返回true 则进入响应拦截器的响应成功函数(resolve)，否则进入响应拦截器的响应错误函数(reject)
  94.      * @param { Number } statusCode - 请求响应体statusCode（只读）
  95.      * @return { Boolean } 如果为true,则 resolve, 否则 reject
  96.      */
  97.     validateStatus(statusCode) {
  98.         return statusCode === 200;
  99.     }
  101.     /**
  102.      * @Function
  103.      * @param {Request~setConfigCallback} f - 设置全局默认配置
  104.      */
  105.     setConfig(f) {
  106.         this.config = f(this.config);
  107.     }
  109.     /**
  110.      * @Function
  111.      * @param {Object} options - 请求配置项
  112.      * @prop {String} options.url - 请求路径
  113.      * @prop {Object} options.data - 请求参数
  114.      * @prop {Object} [options.responseType = config.responseType] [text|arraybuffer] - 响应的数据类型
  115.      * @prop {Object} [options.dataType = config.dataType] - 如果设为 json，会尝试对返回的数据做一次 JSON.parse
  116.      * @prop {Object} [options.header = config.header] - 请求header
  117.      * @prop {Object} [options.method = config.method] - 请求方法
  118.      * @returns {Promise<unknown>}
  119.      */
  120.     async request(options = {}) {
  121.         options.baseUrl = this.config.baseUrl;
  122.         options.dataType = options.dataType || this.config.dataType;
  123.         // #ifndef MP-ALIPAY || APP-PLUS
  124.         options.responseType = options.responseType || this.config.responseType;
  125.         // #endif
  126.         // #ifdef MP-ALIPAY
  127.         options.timeout = options.timeout || this.config.timeout;
  128.         // #endif
  129.         options.url = options.url || '';
  130.         options.data = options.data || {};
  131.         options.params = options.params || {};
  132.         options.header = options.header || this.config.header;
  133.         options.method = options.method || this.config.method;
  134.         options.custom = { ...this.config.custom, ...(options.custom || {}) };
  135.         // #ifdef APP-PLUS
  136.         options.sslVerify =
  137.             options.sslVerify === undefined
  138.                 ? this.config.sslVerify
  139.                 : options.sslVerify;
  140.         // #endif
  141.         options.getTask = options.getTask || this.config.getTask;
  142.         return new Promise((resolve, reject) => {
  143.             let next = true;
  144.             const cancel = (t = 'handle cancel', config = options) => {
  145.                 const err = {
  146.                     errMsg: t,
  147.                     config: config
  148.                 };
  149.                 reject(err);
  150.                 next = false;
  151.             };
  153.             const handleRe = { ...this.requestBeforeFun(options, cancel) };
  154.             const _config = { ...handleRe };
  155.             if (!next) return;
  156.             const requestTask = uni.request({
  157.                 url: Request.mergeUrl(_config.url, _config.baseUrl, _config.params),
  158.                 data: _config.data,
  159.                 header: _config.header,
  160.                 method: _config.method,
  161.                 // #ifdef MP-ALIPAY
  162.                 timeout: _config.timeout,
  163.                 // #endif
  164.                 dataType: _config.dataType,
  165.                 // #ifndef MP-ALIPAY || APP-PLUS
  166.                 responseType: _config.responseType,
  167.                 // #endif
  168.                 // #ifdef APP-PLUS
  169.                 sslVerify: _config.sslVerify,
  170.                 // #endif
  171.                 complete: response => {
  172.                     response.config = handleRe;
  173.                     if (this.validateStatus(response.statusCode)) {
  174.                         // 成功
  175.                         response = this.requestComFun(response);
  176.                         resolve(response);
  177.                     } else {
  178.                         response = this.requestComFail(response);
  179.                         reject(response);
  180.                     }
  181.                 }
  182.             });
  183.             if (handleRe.getTask) {
  184.                 handleRe.getTask(requestTask, handleRe);
  185.             }
  186.         });
  187.     }
  189.     get(url, params = {}) {
  190.         const options = {};
  191.         options.params = params;
  192.         return this.request({
  193.             url,
  194.             method: 'GET',
  195.             ...options
  196.         });
  197.     }
  199.     post(url, data, options = {}) {
  200.         return this.request({
  201.             url,
  202.             data,
  203.             method: 'POST',
  204.             ...options
  205.         });
  206.     }
  208.     // #ifndef MP-ALIPAY
  209.     put(url, data, options = {}) {
  210.         return this.request({
  211.             url,
  212.             data,
  213.             method: 'PUT',
  214.             ...options
  215.         });
  216.     }
  218.     // #endif
  220.     // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
  221.     delete(url, data, options = {}) {
  222.         return this.request({
  223.             url,
  224.             data,
  225.             method: 'DELETE',
  226.             ...options
  227.         });
  228.     }
  230.     // #endif
  232.     // #ifdef APP-PLUS || H5 || MP-WEIXIN
  233.     connect(url, data, options = {}) {
  234.         return this.request({
  235.             url,
  236.             data,
  237.             method: 'CONNECT',
  238.             ...options
  239.         });
  240.     }
  242.     // #endif
  244.     // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
  245.     head(url, data, options = {}) {
  246.         return this.request({
  247.             url,
  248.             data,
  249.             method: 'HEAD',
  250.             ...options
  251.         });
  252.     }
  254.     // #endif
  256.     // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
  257.     options(url, data, options = {}) {
  258.         return this.request({
  259.             url,
  260.             data,
  261.             method: 'OPTIONS',
  262.             ...options
  263.         });
  264.     }
  266.     // #endif
  268.     // #ifdef APP-PLUS || H5 || MP-WEIXIN
  269.     trace(url, data, options = {}) {
  270.         return this.request({
  271.             url,
  272.             data,
  273.             method: 'TRACE',
  274.             ...options
  275.         });
  276.     }
  278.     // #endif
  280.     upload(
  281.         url,
  282.         {
  283.             // #ifdef APP-PLUS
  284.             files,
  285.             // #endif
  286.             // #ifdef MP-ALIPAY
  287.             fileType,
  288.             // #endif
  289.             filePath,
  290.             name,
  291.             header,
  292.             formData = {},
  293.             custom = {},
  294.             params = {},
  295.             getTask
  296.         }
  297.     ) {
  298.         return new Promise((resolve, reject) => {
  299.             let next = true;
  300.             const globalHeader = { ...this.config.header };
  301.             delete globalHeader['content-type'];
  302.             delete globalHeader['Content-Type'];
  303.             const pubConfig = {
  304.                 baseUrl: this.config.baseUrl,
  305.                 url,
  306.                 // #ifdef MP-ALIPAY
  307.                 fileType,
  308.                 // #endif
  309.                 filePath,
  310.                 method: 'UPLOAD',
  311.                 name,
  312.                 header: header || globalHeader,
  313.                 formData,
  314.                 params,
  315.                 custom: { ...this.config.custom, ...custom },
  316.                 getTask: getTask || this.config.getTask
  317.             };
  318.             // #ifdef APP-PLUS
  319.             if (files) {
  320.                 pubConfig.files = files;
  321.             }
  322.             // #endif
  323.             const cancel = (t = 'handle cancel', config = pubConfig) => {
  324.                 const err = {
  325.                     errMsg: t,
  326.                     config: config
  327.                 };
  328.                 reject(err);
  329.                 next = false;
  330.             };
  332.             const handleRe = { ...this.requestBeforeFun(pubConfig, cancel) };
  333.             const _config = {
  334.                 url: Request.mergeUrl(handleRe.url, handleRe.baseUrl, handleRe.params),
  335.                 // #ifdef MP-ALIPAY
  336.                 fileType: handleRe.fileType,
  337.                 // #endif
  338.                 filePath: handleRe.filePath,
  339.                 name: handleRe.name,
  340.                 header: handleRe.header,
  341.                 formData: handleRe.formData,
  342.                 complete: response => {
  343.                     response.config = handleRe;
  344.                     if (typeof response.data === 'string') {
  345.                         response.data = JSON.parse(response.data);
  346.                     }
  347.                     if (this.validateStatus(response.statusCode)) {
  348.                         // 成功
  349.                         response = this.requestComFun(response);
  350.                         resolve(response);
  351.                     } else {
  352.                         response = this.requestComFail(response);
  353.                         reject(response);
  354.                     }
  355.                 }
  356.             };
  357.             // #ifdef APP-PLUS
  358.             if (handleRe.files) {
  359.                 _config.files = handleRe.files;
  360.             }
  361.             // #endif
  362.             if (!next) return;
  363.             const requestTask = uni.uploadFile(_config);
  364.             if (handleRe.getTask) {
  365.                 handleRe.getTask(requestTask, handleRe);
  366.             }
  367.         });
  368.     }
  370.     download(url, options = {}) {
  371.         return new Promise((resolve, reject) => {
  372.             let next = true;
  373.             const pubConfig = {
  374.                 baseUrl: this.config.baseUrl,
  375.                 url,
  376.                 method: 'DOWNLOAD',
  377.                 header: options.header || this.config.header,
  378.                 params: options.params || {},
  379.                 custom: { ...this.config.custom, ...(options.custom || {}) },
  380.                 getTask: options.getTask || this.config.getTask
  381.             };
  382.             const cancel = (t = 'handle cancel', config = pubConfig) => {
  383.                 const err = {
  384.                     errMsg: t,
  385.                     config: config
  386.                 };
  387.                 reject(err);
  388.                 next = false;
  389.             };
  391.             const handleRe = { ...this.requestBeforeFun(pubConfig, cancel) };
  392.             if (!next) return;
  393.             const requestTask = uni.downloadFile({
  394.                 url: Request.mergeUrl(handleRe.url, handleRe.baseUrl, handleRe.params),
  395.                 header: handleRe.header,
  396.                 complete: response => {
  397.                     response.config = handleRe;
  398.                     if (this.validateStatus(response.statusCode)) {
  399.                         // 成功
  400.                         response = this.requestComFun(response);
  401.                         resolve(response);
  402.                     } else {
  403.                         response = this.requestComFail(response);
  404.                         reject(response);
  405.                     }
  406.                 }
  407.             });
  408.             if (handleRe.getTask) {
  409.                 handleRe.getTask(requestTask, handleRe);
  410.             }
  411.         });
  412.     }
  413. }
  414. /**
  415.  * setConfig回调
  416.  * @return {Object} - 返回操作后的config
  417.  * @callback Request~setConfigCallback
  418.  * @param {Object} config - 全局默认config
  419.  */
  420. /**
  421.  * 请求拦截器回调
  422.  * @return {Object} - 返回操作后的config
  423.  * @callback Request~requestCallback
  424.  * @param {Object} config - 全局config
  425.  * @param {Function} [cancel] - 取消请求钩子，调用会取消本次请求
  426.  */
  427. /**
  428.  * 响应拦截器回调
  429.  * @return {Object} - 返回操作后的response
  430.  * @callback Request~responseCallback
  431.  * @param {Object} response - 请求结果 response
  432.  */
  433. /**
  434.  * 响应错误拦截器回调
  435.  * @return {Object} - 返回操作后的response
  436.  * @callback Request~responseErrCallback
  437.  * @param {Object} response - 请求结果 response
  438.  */