前端 http 请求

前端平台对 Axios 进行了封装，支持的请求方式与高级使用方法请看 Axios API。

实现自己模块的工具类

由于 axios 需要设置 baseURL。但是不同的模块的 baseURL 可能不同。所以为了方便使用，框架中封装了一个类 AjaxUtils，在 src/util/http/ajax-utils.ts 中。需要创建实例实现各自模块的工具类，下面以创建单点登录的工具类为例

/**
 * 单点登录模块 Ajax 工具类
 */
const ajaxSso = new AjaxUtils({
  baseURL: apiBaseUrl.sso,
});

export { ajax, ajaxSso };

忽略验证

在配置项中添加 ignoreAuthUrlPatterns 配置参数，这是一个数组，使用 glob 语法规则验证。忽略验证后就不会携带 token。

/**
 * 单点登录模块 Ajax 工具类
 */
const ajaxSso = new AjaxUtils({
  baseURL: apiBaseUrl.sso,
  ignoreAuthUrlPatterns: ['sso_auth/logout', 'captcha/**'],
});

忽略验证但要携带 token

在配置项中添加 ignoreAuthAddTokenUrlPatterns 配置参数，这是一个数组，使用 glob 语法规则验证。这些 url 需要添加 accessToken。这种场景非常少见，只有刷新 token 时才有涉及。

/**
 * 单点登录模块 Ajax 工具类
 */
const ajaxSso = new AjaxUtils({
  baseURL: apiBaseUrl.sso,
  ignoreAuthAddTokenUrlPatterns: ['sso_auth/refresh_access_token'],
});

captcha/** 为 captcha 下的全部请求，sso_auth/logout 为仅这个请求无需验证

自定义自己的请求过滤器

在配置项中添加 requestFilter 配置参数，这是一个 (config: InternalAxiosRequestConfig<any>) => void 类型的函数。

下面第 7 行代码就是自定义添加 tenantSN header，这在非验证接口中很重要，比如 webcall 的客户端

/**
 * 单点登录模块 Ajax 工具类
 */
const ajaxSso = new AjaxUtils({
  baseURL: apiBaseUrl.sso,
  requestFilter: config => {
    AjaxUtils.addTenantSnHeader(config, tenantSN)
  },
});

使用工具类

提示

你无需纠结 baseURL 结尾是否需要有 /，也无需纠结 url 开头是否有 /，因为 axios 内部会分别去除 baseURL 结尾的 / 和 url 开头的 / 再进行拼接，源码如下

/**
 * Creates a new URL by combining the specified URLs
 *
 * @param {string} baseURL The base URL
 * @param {string} relativeURL The relative URL
 *
 * @returns {string} The combined URL
 */
export default function combineURLs(baseURL, relativeURL) {
  return relativeURL ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '') : baseURL;
}

我们以最常用的postRawJson方法为例

ajaxSso
  .postRawJson<void>(`sso_auth/login`, {
    username: 'username',
    password: 'password',
  })
  .then(result => {
    if (result.status === ResultStatusEnum.SUCCESS) {
      // 这里写请求成功的操作
    } else if (result.status === ResultStatusEnum.ERROR_SYSTEM) {
      
    } else {
      
    }
  })
  .catch(() => {
    // 这里可以自定义你的异常处理
  });

取消请求

在某些场景可能会用到取消请求的操作，如：文件下载、文件上传时。

实现方案

使用 AbortController 来实现取消请求的功能，axios 已经支持使用此方式。

提示

signal 参数是在 config 参数中，已封装的工具类中仅有部分方法支持 config?: AxiosRequestConfig 参数，使用时需要注意！

const controller = new AbortController();

axios
  .get('/foo/bar', {
    signal: controller.signal,
  })
  .then(function (response) {
    //...
  });
// 取消请求
controller.abort();