VUE + Axios 项目中 RAP 插件使用说明

前言：本插件参考了RAP官方插件实现，由于实际开发中不需要通过MockJs在前端中处理RAP返回的MockJs源数据，所以对MockJs源数据未处理，仅支持RAP返回模拟的Json数据。需要自行处理MockJs源数据的，将下文提到的rapURL中的‘mockjsdata’改为‘mockjs即可’。

1. 插件使用

1.1 引入

import axios from 'axios';
import rap from '../plugins/rap'; //目录替换为实际目录

1.2 配置

• 1.2.1 说明&举例

• rapURL组成：[RAPBaseUrl]/mockjsdata/[ProjectId]
  • rapMode值：0 - 不拦截； 1 - 拦截全部； 2 - 黑名单中的项不拦截； 3 - 仅拦截白名单中的项
  • rapFilterHeaders: 【字符串-数组】，RAP不支持的自定义Herder字段Key
  • rapFilterMethods: 【字符串-数组】，RAP不支持的Method
  • rapWhiteList/rapBlackList: 【字符串/正则-数组】，例：’[\/courses\/\d+$\/i, “courses/33”]’

rapURL: '"http://rap.host.com/mockjsdata/4"',
rapMode: 3,
rapWhiteList: '[\/courses\\/\\d+$\/i, "courses/33"]',   // 是否需要转义‘\’，根据实际需要
rapBlackList: '[]',
rapFilterHeaders: '["Authorization"]',
rapFilterMethods: '["put"]'

备注：上面的单引号、双引号、转义‘\’，根据实际需要决定是否使用，比如上面例子是是写在配置文件中，之后通过require引入。

• 1.2.2 方式一：替换

rap.config = {
  rapURL: 'http://rap.host.com/mockjsdata/4',
  rapMode: 0,
  rapWhiteList: [],
  rapBlackList: [],
  rapFilterHeaders: [],
  rapFilterMethods: []
}

• 1.2.3 方式二：更新部分配置

rap.updateConfig({
  rapURL: 'http://rap.host.com/mockjsdata/4',
  rapMode: 0
});

1.3 使用

通过Axios的插入器Interceptors使用插件

axios.interceptors.request.use((config) => {
  return rap.onFulfilled(config);
}, rap.onRejected);

备注：

• 个人项目中，如果写成
  axios.interceptors.request.use(rap.onFulfilled, rap.onRejected);
  将出错反复需要授权…貌似和this指向有关，虽然我更喜欢这么写！
• rap.onFulfilled为必须调用，rap.onRejected以实际需求决定。

2. 插件源码[rap.js]

/**
 * convert url from absolute to relative
 */
function convertUrlToRelative(url) {
  if (url instanceof RegExp) {
    return url;
  }
  if (!url) {
    throw Error(`Illegal url:${url}`);
  }
  if (url.indexOf('http://') > -1) {
    url = url.substring(url.indexOf('/', 7) + 1);
  } else if (url.indexOf('https://') > -1) {
    url = url.substring(url.indexOf('/', 8) + 1);
  }
  if (url.charAt(0) !== '/') {
    url = `/${url}`;
  }
  return url;
}

const rap = {
  config: {
    rapURL: 'http://rap.host.com/mockjsdata/4',
    rapMode: 0,
    rapWhiteList: [],
    rapBlackList: [],
    rapFilterHeaders: [],
    rapFilterMethods: []
  },
  updateConfig(config) {
    this.config = {
      ...this.config,
      ...config
    };
  },
  isRap(url) {
    let isRap = false;
    const rapMode = this.config.rapMode;
    if (rapMode === 0) { // disabled
      isRap = false;
    } else if (rapMode === 1) { // intercept all requests
      isRap = true;
    } else if (rapMode === 2 || rapMode === 3) { // black/white list mode
      const blackMode = rapMode === 2;
      isRap = blackMode;
      const list = blackMode ? this.config.rapBlackList : this.config.rapWhiteList;
      for (let i = 0; i < list.length; i += 1) {
        const o = convertUrlToRelative(list[i]);
        // console.info(`reg:${o}`);
        // console.info(`reg type:${typeof o}`);
        // console.info(`url:${url}`);
        if ((typeof o === 'string' && (url.indexOf(o) >= 0 || o.indexOf(url) >= 0))
          || (typeof o === 'object' && o instanceof RegExp && o.test(url))) {
          // 正则匹配规则最好不要用/g，否则第一次匹配true，第二次匹配false，系lastIndex引起
          isRap = !blackMode;
          break;
        }
      }
    }
    return isRap;
  },
  onFulfilled(config) {
    if (this.isRap(config.url)) {
      config.url = config.url.replace(config.baseURL, this.config.rapURL);
      config.baseURL = this.config.rapURL;

      //处理RAP上不支持的Header
      if (config.headers && config.headers.common && this.config.rapFilterHeaders.length > 0) {
        this.config.rapFilterHeaders.forEach((value) => {
          delete config.headers.common[value];
        });
        // delete config.headers.common.Authorization; // RAP上不需要Authorization字段，否则报错
      }

      //处理RAP上不支持的Method
      if (this.config.rapFilterMethods && this.config.rapFilterMethods.length > 0) {
        this.config.rapFilterMethods.forEach((value) => {
          if (config.method === value) {
            config.method = 'get';
          }
        });
      }
    }
    return config;
  },
  onRejected(error) {
    return Promise.reject(error);
  }
};

export default rap;

3. 参考资料

RAP用户手册
ng-rap插件源码
服务器代理方式实现VUE上使用RAP_源码
VUE + Axios上通过XMLHttpRequest使用RAP_源码

赏

您一定是个帅哥， 要不也是个美女！

支付宝

微信