④ 版本② axios 封装

HttpRequestBase 类

1 构造函数

constructor(baseUrl) {

  const basePort = getUrlPort(baseUrl);

  this.baseUrl = baseUrl;

  this.baseUrlWithPort2 = baseUrl.replace(/(\/\/.*:)(\d+)/, `$1${basePort + 1}`);

  this.basePort = basePort; // 原始端口

  this.queue = {};

  this.triggerTime = '';

  this.alikeUrl = []; // ajax标识--请求地址&请求方式

  this.CancelToken = axios.CancelToken;

  // 在一个ajax响应后再执行一下取消操作，把已经完成的请求从pending中移除

  this.removeAlikeUrl = config => {

    // 截取 baseUrl 后的字符串

    let configUrl =

      config.url.indexOf(config.baseURL) !== -1

        ? config.url.substring(config.baseURL.length, config.url.length)

        : config.url;

    for (var i = this.alikeUrl.length - 1; i >= 0; i--) {

      if (this.alikeUrl[i].u === configUrl + '&' + config.method) {

        this.alikeUrl[i].cancel('axios请求被取消');

        this.alikeUrl.splice(i, 1);

        break;

      }

    }

  };

}

2 事件处理程序

2.1 请求封装

request(options) {

  // 创建 axios 请求

  const instance = axios.create();

  // 请求参数处理

  options = this.getInsideConfig(options);

  // 请求响应拦截

  this.interceptors(instance, options.url);

  return instance(options);

}

2.2 请求参数处理

transformRequest 允许在向服务器发送前修改请求数据，只能用put post patch请求方法

getFinalBaseURL(apiUrl) {

  return checkIsUsePort2(apiUrl, this.basePort) ? this.baseUrlWithPort2 : this.baseUrl;

}

getInsideConfig(options) {

  const config = {

    baseURL: this.getFinalBaseURL(options.url),

    headers: {

      'Content-Type': 'application/x-www-form-urlencoded',

      Authorization: SessionIdConfigure.getLocalId()

    },

    // 在向服务器发送前修改请求数据

    transformRequest: [

      data => {

        let ret = '';

        for (var i in data) {

          if (data[i] instanceof Array) {

            for (var j in data[i]) {

              ret += i + '=' + (

                typeof data[i][j] === 'object'

                  ? JSON.stringify(data[i][j])

                  : encodeURIComponent(data[i][j])

                ) + '&';

            }

          } else {

            if (

              !(String(data[i]) === 'null' || String(data[i]) === 'undefined') &&

              String(data[i]).indexOf('NaN-aN-aN') === -1

            ) {

              ret += i + '=' + encodeURIComponent(data[i]) + '&';

            } else {

              ret += i + '=&';

            }

          }

        }

        return ret;

      }

    ],

    ...options

  }

  return config;

}

2.3 取消loading效果

destroy(url) {

  if (this.queue[url]) delete this.queue[url];

  if (!Object.keys(this.queue).length) {

    store.commit('appLoading/display', false);

  }

}

2.4 请求响应拦截处理

interceptors(instance, url) {

  let isNoSpin = proStorage.fetch('noSpin');

  isNoSpin && proStorage.save('noSpin', 'false');

  // 请求拦截

  // 响应拦截

}

请求拦截

/**

 * 请求拦截

 * @property {Function} config.cancelTrigger 可传入自定义请求取消方法

 */

instance.interceptors.request.use(

  config => {

    this.removeAlikeUrl(config); //在一个ajax发送前执行一下取消操作

    let cancelTrigger = config.cancelTrigger;

    if (!config.cancelTrigger) {

      config.cancelToken = new this.CancelToken(c => {

        cancelTrigger = c;

      });

    }

    // ajax标识--请求地址&请求方式

    this.alikeUrl.push({ u: config.url + '&' + config.method, cancel: cancelTrigger });

    // 触发时间

    this.triggerTime = new Date();

    // 添加全局的loading...

    if (!Object.keys(this.queue).length && (!isNoSpin || isNoSpin === 'false')) {

      store.commit('appLoading/display', true);

    }

    if (!isNoSpin || isNoSpin === 'false') {

      this.queue[url] = true;

    }

    isNoSpin = null;

    return config;

  },

  error => {

    return Promise.reject(error);

  }

);

响应拦截

instance.interceptors.response.use(

  res => {

    // 在一个ajax响应后再执行一下取消操作

    this.removeAlikeUrl(res.config);

    this.destroy(url);

    const { data, status } = res;

    const {

      config: { method }

    } = JSON.parse(JSON.stringify(res));

    if (

      store.state.interfaceLog.storageLog.developmentOff &&

      url.indexOf('analysis/api/') !== -1 &&

      method === 'post' &&

      data.code === 1

    ) {

      let query_key, query_name, query_time, exec_time;

      if (data.data && Object.keys(data.data).length > 0) {

        query_key = data.data['query_key'];

        query_name = data.data['query_name'];

        query_time = data.data['query_time'];

        exec_time = data.data['exec_time'];

      } else if (data.os_data && data.os_data[0] && Object.keys(data.os_data[0]).length > 0) {

        query_key = data.os_data[0].data['query_key'];

        query_name = data.os_data[0].data['query_name'];

        query_time = data.os_data[0].data['query_time'];

        exec_time = data.os_data[0].data['exec_time'];

      }

      const logData = {

        url,

        query_key,

        query_name,

        query_time,

        exec_time,

        title: router.currentRoute.meta.title,

        param: res.config.data,

        triggerTime: this.triggerTime,

        msg: data.msg

      };

      store.commit('addStorageLog', logData);

    }

    interceptResponse(data.code);

    return { data, status };

  },

  error => {

    this.destroy(url);

    console.error('response: ', typeof error === 'object' ? error.message : error);

    if (!axios.isCancel(error)) {

      this.removeAlikeUrl(error.config);

      let errorInfo = error.response;

      if (!errorInfo) {

        const {

          request: { statusText, status },

          config

        } = error;

        errorInfo = {

          statusText,

          status,

          request: { responseURL: config.url }

        };

      }

      interceptResponse(errorInfo.status);

    }

    return Promise.reject(error);

  }

);

2.5 类外方法

请求过期提示

function interceptResponse(status) {

  if (status === 401 && router.currentRoute.name !== 'Login') {

    Modal.warning({

      title: '提示',

      content: 'Session已过期！请您确认返回登录页面重新登录！',

      onOk: () => {

        store.commit('user/logout');

      }

    })

  }

}

是否使用第二端口

// 以 /analysis 和 /query 开头的接口需切换端口，现在的匹配模式包含了前后的'/'符号

function checkIsUsePort2(url, basePort) {

  return (basePort === 9001 || basePort >= 30000) && /^\/(analysis|query)[^/]*\//.test(url);

}

获取地址端口号

function getUrlPort(url) {

  let result = url.match(/\/\/.*:(\d+)/);

  return result && Number(result[1]);

}

巴特西

④ 版本② axios 封装

HttpRequestBase 类

1 构造函数

2 事件处理程序

2.1 请求封装

2.2 请求参数处理

2.3 取消loading效果

2.4 请求响应拦截处理

2.5 类外方法

最新文章

热门文章