• 接口数据请求，解决跨域问题

#调用方法

  1.     import { http } from '@/utils/index.js'
  3.   http.post('/student_chat/Chat/getChatList', {
  4.     chat_type: ''
  5.   }).then(res => {
  6.     console.log(res,'res');
  7.   }).catch(err => {
  8.     console.log(err,'err');
  9.   })
  11.     http.get('', {}).then(res => {
  12.     console.log(res,'res');
  13.   }).catch(err => {
  14.     console.log(err,'err');
  15.   })

#调用结果

  1. {
  2.     "data": {
  3.         "code": 1,
  4.         "msg": "success",
  5.         "data": {
  6.             "list": [{
  7.                 "chat_no": "kf_group",
  8.                 "chat_type": "kf_group",
  9.                 "user_no": "",
  10.                 "chat_weight": 0,
  11.                 "msg_time": 0,
  12.                 "msg_unread_num": 0,
  13.                 "chat_target": {
  14.                     "target_title": "客服消息",
  15.                     "target_icon": "http://cdn.zsdx.cn/student-app/images/message/sys_kf_user.png"
  16.                 },
  17.                 "chat_user": [],
  18.                 "latest_msg": {
  19.                     "msg_id": 0,
  20.                     "msg_type": "",
  21.                     "msg_content": ""
  22.                 }
  23.             }, {
  24.                 "chat_no": "chat_no_user_recommend",
  25.                 "chat_type": "user_recommend",
  26.                 "user_no": "user_no_user_recommend",
  27.                 "chat_weight": 0,
  28.                 "msg_time": 1583801141,
  29.                 "msg_unread_num": 0,
  30.                 "chat_target": {
  31.                     "target_title": "同校同学推荐",
  32.                     "target_icon": "http://cdn.zsdx.cn/student-app/images/message/user_recommend.png"
  33.                 },
  34.                 "chat_user": [],
  35.                 "latest_msg": {
  36.                     "msg_id": 0,
  37.                     "msg_type": "",
  38.                     "msg_content": ""
  39.                 }
  40.             }, {
  41.                 "chat_no": "fc_c7061c8d390cf",
  42.                 "user_no": "st_c8142529456da",
  43.                 "chat_type": "social",
  44.                 "chat_weight": 0,
  45.                 "msg_time": 1585124777,
  46.                 "msg_unread_num": 0,
  47.                 "latest_msg": {
  48.                     "msg_id": 11371,
  49.                     "msg_type": "emoji",
  50.                     "msg_content": "{\"url\":\"http://pic.wxhand.com/dev/phaadmin_image/04d98272df70e4017eb981f9cbeaf054.png\",\"title\":\"奇怪脸\",\"preview_url\":\"\",\"w\":154,\"h\":154}"
  51.                 },
  52.                 "chat_user": {
  53.                     "student_no": "st_c8142529456da",
  54.                     "true_name": "你可愿与我再并肩",
  55.                     "head_img": "http://pic.wxhand.com/dev/student_image/9e3f6cea939ce916e18b449d9549e49f!Thumbwidth320",
  56.                     "sex": 1,
  57.                     "is_system": 0,
  58.                     "candle_step": 2,
  59.                     "candle_status": 0,
  60.                     "stuagent_level": 1
  61.                 },
  62.                 "chat_shop": [],
  63.                 "chat_company": []
  64.             }, {
  65.                 "chat_no": "fc_a905236cd4dcf",
  66.                 "user_no": "st_87ca94738e53c",
  67.                 "chat_type": "social",
  68.                 "chat_weight": 0,
  69.                 "msg_time": 1583801141,
  70.                 "msg_unread_num": 0,
  71.                 "latest_msg": {
  72.                     "msg_id": 9865,
  73.                     "msg_type": "card_image",
  74.                     "msg_content": "{\"image_url\":\"http:\\/\\/cdn.zsdx.cn\\/student-app\\/images\\/message\\/msg_exam_result.png\",\"app_action\":{\"action\":\"app_page\",\"target\":\"forum_exam_result\",\"param\":{\"submit_id\":\"490\"}}}"
  75.                 },
  76.                 "chat_user": {
  77.                     "student_no": "st_87ca94738e53c",
  78.                     "true_name": "掌大客服",
  79.                     "head_img": "http://cdn.zsdx.cn/student-app/images/message/sys_kf.png",
  80.                     "sex": 1,
  81.                     "is_system": 1,
  82.                     "candle_step": 0,
  83.                     "candle_status": 0,
  84.                     "stuagent_level": 0
  85.                 },
  86.                 "chat_shop": [],
  87.                 "chat_company": []
  88.             }]
  89.         }
  90.     },
  91.     "statusCode": 200,
  92.     "header": {
  93.         "Access-Control-Allow-Origin": "*",
  94.         "Content-Type": "application/json; charset=utf-8",
  95.         "X-Powered-By": "PHP/7.1.4",
  96.         "Access-Control-Allow-Methods": "POST, GET, OPTIONS",
  97.         "Access-Control-Allow-Credentials": "true",
  98.         "Access-Control-Max-Age": "86400",
  99.         "Date": "Wed, 25 Mar 2020 12:17:47 GMT",
  100.         "Access-Control-Allow-Headers": "zsdx-session-ticket, zsdx-app-type, zsdx-app-uuid, zsdx-version, zsdx-device-info, content-type",
  101.         "Set-Cookie": "SERVERID=d3438ece8edc13d4d09e5c8a2df783d4|1585138667|1585138188;Path=/",
  102.         "Transfer-Encoding": "Identity",
  103.         "Connection": "keep-alive"
  104.     },
  105.     "errMsg": "request:ok",
  106.     "config": {
  107.         "url": "/student_chat/Chat/getChatList",
  108.         "data": {
  109.             "chat_type": "social"
  110.         },
  111.         "method": "POST",
  112.         "baseUrl": "http://student-app-api.zsdx.cn/api",
  113.         "dataType": "json",
  114.         "params": {},
  115.         "header": {
  116.             "content-type": "application/json",
  117.             "zsdx-app-type": 1,
  118.             "zsdx-app-uuid": "",
  119.             "zsdx-device-info": "...",
  120.             "zsdx-session-ticket": "...",
  121.             "zsdx-version": "..."
  122.         },
  123.         "custom": {},
  124.         "sslVerify": true
  125.     }
  126. }

#index.js

  1. import Request from './request'
  3. const http = new Request()
  5. http.setConfig((config) => { /* 设置全局配置 */
  6.     config.baseUrl = 'http://student-app-api.zsdx.cn/api' /* 根域名配置 */
  7.     config.header = {
  8.         ...config.header,
  9.     //请求头配置处理,配置接口需要的参数
  10.         'zsdx-app-type': '',
  11.         'zsdx-app-uuid': '',
  12.         'zsdx-device-info': '',
  13.         'zsdx-session-ticket': '',
  14.         'zsdx-version': ''
  15.     //请求头配置处理,配置接口需要的参数
  16.     }
  17.     return config
  18. })
  20. /**
  21.  * 自定义验证器，如果返回true 则进入响应拦截器的响应成功函数(resolve)，否则进入响应拦截器的响应错误函数(reject)
  22.  * @param { Number } statusCode - 请求响应体statusCode（只读）
  23.  * @return { Boolean } 如果为true,则 resolve, 否则 reject
  24.  */
  25. http.validateStatus = (statusCode) => {
  26.     return statusCode === 200
  27. }
  29. http.interceptor.request((config, cancel) => { /* 请求之前拦截器 */
  30.     config.header = {
  31.         ...config.header
  32.     }
  33.     /*
  34.     if (!token) { // 如果token不存在，调用cancel 会取消本次请求，但是该函数的catch() 仍会执行
  35.       cancel('token 不存在') // 接收一个参数，会传给catch((err) => {}) err.errMsg === 'token 不存在'
  36.     }
  37.     */
  38.     return config
  39. })
  41. http.interceptor.response((response) => { /* 请求之后拦截器 */
  42.     // if (response.data.code !== 200) { // 服务端返回的状态码不等于200，则reject()
  43.     //   return Promise.reject(response)
  44.     // }
  45.     // if (response.config.custom.verification) { // 演示自定义参数的作用
  46.     //   return response.data
  47.     // }
  48.     if(response.data.code == '1001') {    //    异常处理
  49.         //...
  50.     } else {
  51.         return response
  52.     }
  53. }, (response) => { // 请求错误做点什么
  54.     return response
  55. })
  57. export {
  58.     http
  59. }

#request.js

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

#文档说明

  1. - 基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截
  2. - 支持全局挂载
  3. - 支持多个全局配置实例
  4. - 支持自定义验证器
  5. - 支持文件上传/下载（如不使用可以删除class里upload，download 方法）
  6. - 把 http-request 文件夹放到项目 utils/ 目录下
  8. **Example**
  9. ---
  10. 创建实例  
  12. ``` javascript 
  13. const http = new Request();

执行GET请求

  1. http.get('/user/login', {params: {userName: 'name', password: '123456'}}).then(res => {
  3. }).catch(err => {
  5. })
  6. // 局部修改配置，局部配置优先级高于全局配置
  7. http.get('/user/login', {
  8.     params: {userName: 'name', password: '123456'}, /* 会加在url上 */
  9.     header: {}, /* 会覆盖全局header */
  10.     dataType: 'json',
  11.     // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
  12.     custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
  13.     // #ifndef MP-ALIPAY || APP-PLUS
  14.     responseType: 'text',
  15.     // #endif
  16.     // #ifdef MP-ALIPAY
  17.     timeout: 30000, // 仅支付宝小程序支持
  18.     // #endif
  19.     // #ifdef APP-PLUS
  20.     sslVerify: true, // 验证 ssl 证书 仅5+App安卓端支持（HBuilderX 2.3.3+）
  21.     // #endif
  22.     // 返回当前请求的task, options。请勿在此处修改options。非必填
  23.     getTask: (task, options) => {
  24.          // setTimeout(() => {
  25.          //   task.abort()
  26.          // }, 500)
  27.     }
  28. }).then(res => {
  30. }).catch(err => {
  32. })

执行POST请求

  1. http.post('/user/login', {userName: 'name', password: '123456'} ).then(res => {
  3. }).catch(err => {
  5. })
  6. // 局部修改配置，局部配置优先级高于全局配置
  7. http.post('/user/login', {userName: 'name', password: '123456'}, {
  8.     params: {}, /* 会加在url上 */
  9.     header: {}, /* 会覆盖全局header */
  10.     dataType: 'json',
  11.     // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
  12.     custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
  13.     // #ifndef MP-ALIPAY || APP-PLUS
  14.     responseType: 'text',
  15.     // #endif
  16.     // #ifdef MP-ALIPAY
  17.     timeout: 30000, // 仅支付宝小程序支持
  18.     // #endif
  19.     // #ifdef APP-PLUS
  20.     sslVerify: true, // 验证 ssl 证书 仅5+App安卓端支持（HBuilderX 2.3.3+）
  21.     // #endif
  22.     // 返回当前请求的task, options。请勿在此处修改options。非必填
  23.     getTask: (task, options) => {
  24.          // setTimeout(() => {
  25.          //   task.abort()
  26.          // }, 500)
  27.     }
  28. }).then(res => {
  30. }).catch(err => {
  32. })

执行upload请求

  1.   http.upload('api/upload/img', {
  2.     params: {}, /* 会加在url上 */
  3.     files: [], // 仅5+App支持
  4.     fileType: 'image/video/audio', // 仅支付宝小程序，且必填。
  5.     filePath: '', // 要上传文件资源的路径。
  6.     // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
  7.     custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
  8.     name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
  9.     header: {},
  10.     formData: {}, // HTTP 请求中其他额外的 form data
  11.     // 返回当前请求的task, options。请勿在此处修改options。非必填
  12.     getTask: (task, options) => {
  13.       // task.onProgressUpdate((res) => {
  14.       //   console.log('上传进度' + res.progress);
  15.       //   console.log('已经上传的数据长度' + res.totalBytesSent);
  16.       //   console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
  17.       //
  18.       //   // 测试条件，取消上传任务。
  19.       //   if (res.progress > 50) {
  20.       //     uploadTask.abort();
  21.       //   }
  22.       // });
  23.     }
  24.   }).then(res => {
  25.     // 返回的res.data 已经进行JSON.parse
  26.   }).catch(err => {
  28.   })

luch-request API

  1.  http.request({
  2.     method: 'POST', // 请求方法必须大写
  3.     url: '/user/12345',
  4.     data: {
  5.       firstName: 'Fred',
  6.       lastName: 'Flintstone'
  7.     },
  8.     params: { // 会拼接到url上
  9.       token: '1111'
  10.     },
  11.     // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
  12.     custom: {}, // 自定义参数
  13.     // 返回当前请求的task, options。请勿在此处修改options。非必填
  14.     getTask: (task, options) => {
  15.       // setTimeout(() => {
  16.       //   task.abort()
  17.       // }, 500)
  18.     }
  19.   })
  21.   // 具体参数说明：[uni.uploadFile](https://uniapp.dcloud.io/api/request/network-file)
  22.   http.upload('api/upload/img', {
  23.     params: {}, /* 会加在url上 */
  24.     files: [], // 仅5+App支持
  25.     fileType: 'image/video/audio', // 仅支付宝小程序，且必填。
  26.     filePath: '', // 要上传文件资源的路径。
  27.     name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
  28.     header: {}, // 如填写，会覆盖全局header,
  29.     custom: {}, // 自定义参数
  30.     formData: {}, // HTTP 请求中其他额外的 form data
  31.     // 返回当前请求的task, options。请勿在此处修改options。非必填
  32.     getTask: (task, options) => {
  33.       // setTimeout(() => {
  34.       //   task.abort()
  35.       // }, 500)
  36.     }
  37.   }).then(res => {
  38.     // 返回的res.data 已经进行JSON.parse
  39.   }).catch(err => {
  41.   })
  43.   // 具体参数说明：[uni.downloadFile](https://uniapp.dcloud.io/api/request/network-file?id=downloadfile)
  44.   http.download('api/download', {
  45.     params: {}, /* 会加在url上 */
  46.     header: {}, // 如填写，会覆盖全局header,
  47.     custom: {}, // 自定义参数
  48.     // 返回当前请求的task, options。非必填
  49.     getTask: (task, options) => {
  50.       // setTimeout(() => {
  51.       //   task.abort()
  52.       // }, 500)
  53.     }
  54.   }).then(res => {
  56.   }).catch(err => {
  58.   })

请求方法别名 / 实例方法

  1. http.request(config)
  2. http.get(url[, config])
  3. http.upload(url[, config])
  4. http.delete(url[, data[, config]])
  5. http.head(url[, data[, config]])
  6. http.post(url[, data[, config]])
  7. http.put(url[, data[, config]])
  8. http.connect(url[, data[, config]])
  9. http.options(url[, data[, config]])
  10. http.trace(url[, data[, config]])

全局请求配置

  1. {
  2.     baseUrl: '',
  3.     header: {
  4.       'content-type': 'application/json'
  5.     },
  6.     method: 'GET',
  7.     dataType: 'json',
  8.     // #ifndef MP-ALIPAY || APP-PLUS
  9.     responseType: 'text',
  10.     // #endif
  11.     // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
  12.     custom: {}, // 全局自定义参数默认值
  13.     // #ifdef MP-ALIPAY
  14.     timeout: 30000,
  15.     // #endif
  16.     // #ifdef APP-PLUS
  17.     sslVerify: true,
  18.     // #endif
  19.     // 局部优先级高于全局，返回当前请求的task,options。请勿在此处修改options。非必填
  20.     // getTask: (task, options) => {
  21.     // 相当于设置了请求超时时间500ms
  22.     //   setTimeout(() => {
  23.     //     task.abort()
  24.     //   }, 500)
  25.     // }
  26.   }

全局配置修改setConfig

  1. /**
  2.      * @description 修改全局默认配置
  3.      * @param {Function}   
  4. */
  5. http.setConfig((config) => { /* config 为默认全局配置*/
  6.     config.baseUrl = 'http://www.bbb.cn'; /* 根域名 */
  7.     config.header = {
  8.         a: 1,
  9.         b: 2
  10.     }
  11.     return config
  12. })

自定义验证器validateStatus

  1. /**
  2.  * 自定义验证器，如果返回true 则进入响应拦截器的响应成功函数(resolve)，否则进入响应拦截器的响应错误函数(reject)
  3.  * @param { Number } statusCode - 请求响应体statusCode（只读）
  4.  * @return { Boolean } 如果为true,则 resolve, 否则 reject
  5. */
  6. http.validateStatus = (statusCode) => { // 默认
  7.      return statusCode === 200
  8. }
  10. // 举个栗子
  11. http.validateStatus = (statusCode) => {
  12.    return statusCode && statusCode >= 200 && statusCode < 300
  13. }

拦截器

在请求之前拦截

  1. /**
  2.  * @param { Function} cancel - 取消请求,调用cancel 会取消本次请求，但是该函数的catch() 仍会执行; 不会进入响应拦截器
  3.  *
  4.  * @param {String} text ['handle cancel'| any] - catch((err) => {}) err.errMsg === 'handle cancel'。非必传，默认'handle cancel'
  5.  * @cancel {Object} config - catch((err) => {}) err.config === config; 非必传，默认为request拦截器修改之前的config
  6.  * function cancel(text, config) {}
  7.  */
  8.  http.interceptor.request((config, cancel) => { /* cancel 为函数，如果调用会取消本次请求。需要注意：调用cancel,本次请求的catch仍会执行。必须return config */
  9.     config.header = {
  10.       ...config.header,
  11.       a: 1
  12.     }
  13.     // if (config.custom.auth) {
  14.     //   config.header.token = 'token'
  15.     // }
  16.     /**
  17.     if (!token) { // 如果token不存在，调用cancel 会取消本次请求，不会进入响应拦截器，但是该函数的catch() 仍会执行
  18.       cancel('token 不存在', config) //  把修改后的config传入，之后响应就可以拿到修改后的config。 如果调用了cancel但是不传修改后的config，则catch((err) => {}) err.config 为request拦截器修改之前的config
  19.     }
  20.     **/
  21.     return config
  22.   })

在请求之后拦截

  1. http.interceptor.response((response) => { /* 对响应成功做点什么 （statusCode === 200），必须return response*/
  2.   //  if (response.data.code !== 200) { // 服务端返回的状态码不等于200，则reject()
  3.   //    return Promise.reject(response)
  4.   //  }
  5.  // if (response.config.custom.verification) { // 演示自定义参数的作用
  6.   //   return response.data
  7.   // }
  8.   console.log(response)
  9.   return response
  10. }, (response) => { /*  对响应错误做点什么 （statusCode !== 200），必须return response*/
  11.   console.log(response)
  12.   return response
  13. })

常见问题

  1. 为什么会请求两次？
    • 总有些小白问这些很那啥的问题，有两种可能，一种是‘post三次握手’，还有一种可能是本地访问接口时跨域请求，所以浏览器会先发一个option 去预测能否成功，然后再发一个真正的请求（自己观察请求头，Request Method，百度简单请求）。
  2. 如何跨域？
    • 问的人不少，可以先百度了解一下。如何跨域
  3. post 怎么传不了数组的参数啊？
    • uni-request
      可以点击看一下uni-request 的api 文档，data支持的文件类型只有Object/String/ArrayBuffer这个真跟我没啥关系 0.0
  4. ‘Content-Type’ 为什么要小写？
    • hbuilderX 更新至‘2.3.0.20190919’ 后，uni.request post请求，如果 ‘Content-Type’ 大写，就会在后面自动拼接‘ application/json’，请求头变成 Content-Type: application/json;charset=UTF-8 application/json，导致后端无法解析类型，Status Code 415，post 请求失败。但是小写就不会出现这个问题。至于为什么我也没有深究，我现在也不清楚这是他们的bug,还是以后就这样规范了。我能做的只有立马兼容，至于后边uni官方会不会继续变动也不清楚。

```