|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- import deepMerge from "../function/deepMerge";
- import validate from "../function/test";
- class Request {
- // 设置全局默认配置
- setConfig(customConfig) {
- // 深度合并对象,否则会造成对象深层属性丢失
- this.config = deepMerge(this.config, customConfig);
- }
-
- // 主要请求部分
- request(options = {}) {
- // 检查请求拦截
- if (this.interceptor.request && typeof this.interceptor.request === 'function') {
- let tmpConfig = {};
- let interceptorRequest = this.interceptor.request(options);
- if (interceptorRequest === false) {
- // 返回一个处于pending状态中的Promise,来取消原promise,避免进入then()回调
- return new Promise(()=>{});
- }
- this.options = interceptorRequest;
- }
- options.dataType = options.dataType || this.config.dataType;
- options.responseType = options.responseType || this.config.responseType;
- options.url = options.url || '';
- options.params = options.params || {};
- options.header = Object.assign({}, this.config.header, options.header);
- options.method = options.method || this.config.method;
-
- return new Promise((resolve, reject) => {
- options.complete = (response) => {
- // 请求返回后,隐藏loading(如果请求返回快的话,可能会没有loading)
- uni.hideLoading();
- // 清除定时器,如果请求回来了,就无需loading
- clearTimeout(this.config.timer);
- this.config.timer = null;
- // 判断用户对拦截返回数据的要求,如果originalData为true,返回所有的数据(response)到拦截器,否则只返回response.data
- if(this.config.originalData) {
- // 判断是否存在拦截器
- if (this.interceptor.response && typeof this.interceptor.response === 'function') {
- let resInterceptors = this.interceptor.response(response);
- // 如果拦截器不返回false,就将拦截器返回的内容给this.$u.post的then回调
- if (resInterceptors !== false) {
- resolve(resInterceptors);
- } else {
- // 如果拦截器返回false,意味着拦截器定义者认为返回有问题,直接接入catch回调
- reject(response);
- }
- } else {
- // 如果要求返回原始数据,就算没有拦截器,也返回最原始的数据
- resolve(response);
- }
- } else {
- if (response.statusCode == 200) {
- if (this.interceptor.response && typeof this.interceptor.response === 'function') {
- let resInterceptors = this.interceptor.response(response.data);
- if (resInterceptors !== false) {
- resolve(resInterceptors);
- } else {
- reject(response.data);
- }
- } else {
- // 如果不是返回原始数据(originalData=false),且没有拦截器的情况下,返回纯数据给then回调
- resolve(response.data);
- }
- } else {
- // 不返回原始数据的情况下,服务器状态码不为200,modal弹框提示
- // if(response.errMsg) {
- // uni.showModal({
- // title: response.errMsg
- // });
- // }
- reject(response)
- }
- }
- }
-
- // 判断用户传递的URL是否/开头,如果不是,加上/,这里使用了uView的test.js验证库的url()方法
- options.url = validate.url(options.url) ? options.url : (this.config.baseUrl + (options.url.indexOf('/') == 0 ?
- options.url : '/' + options.url));
-
- // 是否显示loading
- // 加一个是否已有timer定时器的判断,否则有两个同时请求的时候,后者会清除前者的定时器id
- // 而没有清除前者的定时器,导致前者超时,一直显示loading
- if(this.config.showLoading && !this.config.timer) {
- this.config.timer = setTimeout(() => {
- uni.showLoading({
- title: this.config.loadingText,
- mask: this.config.loadingMask
- })
- this.config.timer = null;
- }, this.config.loadingTime);
- }
- uni.request(options);
- })
- // .catch(res => {
- // // 如果返回reject(),不让其进入this.$u.post().then().catch()后面的catct()
- // // 因为很多人都会忘了写后面的catch(),导致报错捕获不到catch
- // return new Promise(()=>{});
- // })
- }
-
- constructor() {
- this.config = {
- baseUrl: '', // 请求的根域名
- // 默认的请求头
- header: {},
- method: 'POST',
- // 设置为json,返回后uni.request会对数据进行一次JSON.parse
- dataType: 'json',
- // 此参数无需处理,因为5+和支付宝小程序不支持,默认为text即可
- responseType: 'text',
- showLoading: true, // 是否显示请求中的loading
- loadingText: '请求中...',
- loadingTime: 800, // 在此时间内,请求还没回来的话,就显示加载中动画,单位ms
- timer: null, // 定时器
- originalData: false, // 是否在拦截器中返回服务端的原始数据,见文档说明
- loadingMask: true, // 展示loading的时候,是否给一个透明的蒙层,防止触摸穿透
- }
-
- // 拦截器
- this.interceptor = {
- // 请求前的拦截
- request: null,
- // 请求后的拦截
- response: null
- }
-
- // get请求
- this.get = (url, data = {}, header = {}) => {
- return this.request({
- method: 'GET',
- url,
- header,
- data
- })
- }
-
- // post请求
- this.post = (url, data = {}, header = {}) => {
- return this.request({
- url,
- method: 'POST',
- header,
- data
- })
- }
-
- // put请求,不支持支付宝小程序(HX2.6.15)
- this.put = (url, data = {}, header = {}) => {
- return this.request({
- url,
- method: 'PUT',
- header,
- data
- })
- }
-
- // delete请求,不支持支付宝和头条小程序(HX2.6.15)
- this.delete = (url, data = {}, header = {}) => {
- return this.request({
- url,
- method: 'DELETE',
- header,
- data
- })
- }
- }
- }
- export default new Request
|