axios统一接口管理及优化

以前我写了一篇文章，分享了本身的项目中对于接口管理的方法。总结下来就是：定义接口文件--withAxios导出--调用接口方法。这样实现了接口的统一管理和调用接口的语义化与简单化。

 

根据在项目的使用，发现有如下问题须要优化：

1. withAxios导出的接口方法对象对编辑器来讲是不透明的，因此代码提示功能缺失。
2. 同一个方法调用屡次，如何保证组件老是获取到最后一次的返回信息。

 

根据以上问题，采用了如下解决方案：

1. 使用typescript的泛型解决。
2. 调用同一个方法时，取消掉上次未完成的请求，这里使用axios的cancel方法。实现思路是在返回的方法对象中增长一个`${name}Cancel`的方法，保存取消上一次方法的回调，下次请求时固定调用这个取消方法以保证本次请求是当前惟一一个请求。(这里只提供axios层面的解决办法，不讨论其余办法，好比采用redux-saga的话可使用takeLatest解决)

 

经过代码展现一下（React项目）：

service.ts

import { IApiItem } from '@/configs/api/declares';
import withAxios from '@/utils/withAxios';

const api: IApiItem[] = [
  { name: 'getSummary', url: 'http://xx:8000/api/getSummary' },
  { name: 'getDetail', url: 'http://xx:8000/api/getDetail' },
  { name: 'getDetailChildren', url: 'http://xx:8000/api/getDetailChildren' },
  { name: 'getCurrentUser', url: 'http://xx:8000/api/getCurrentUser' },
];

interface IProdMonitorApi {
  getSummary: any;
  getDetail: any;
  getDetailChildren: any;
  getCurrentUser: any;
}

export default withAxios<IProdMonitorApi>(api);

 

withAxios.ts

function withAxios<T>(apiConfig: IApiItem[], usePassportOrigin: boolean = false): T {
  const serviceMap = {} as T;
  apiConfig.map(({ name, url, method = 'get', ...rest }: IApiItem) => {
    return (serviceMap[name] = async function(data = {}) {
      if (serviceMap[`${name}Cancel`] && typeof serviceMap[`${name}Cancel`] === 'function') {
        serviceMap[`${name}Cancel`]();
      }

      const source = axios.CancelToken.source();
      serviceMap[`${name}Cancel`] = () => {
        source.cancel(`已取消上次未完成请求:${name}`);
      };
      rest.cancelToken = source.token;

      let key = 'params';
      const apiMethod = method.toLowerCase();
      if (apiMethod === 'post' || apiMethod === 'put') {
        key = 'data';
      }
      let fetchUrl = url;
      if (url.indexOf('http') !== 0) {
        fetchUrl = usePassportOrigin
          ? NetworkUtils.passportOrigin + url
          : NetworkUtils.serverOrigin + url;
      }
      return axios({
        method,
        url: fetchUrl,
        [key]: data,
        fetchName: name,
        ...rest,
      } as AxiosRequestConfig);
    });
  });
  return serviceMap;
}

export default withAxios;

 

在须要使用接口的地方：

import Service from "./service.ts"

Service.getSummary(requestParams).then(...)

 

说明：

1. 使用泛型虽然有了代码提示，可是额外增长了编码量，由于要手动维护一个方法接口，有利有弊吧，经过ts我尚未找到更好的方法。同事以前有过一个解决办法：接口管理使用对象的形式，而后withAxios修改这个对象各属性的getter，将getter指向经过axios包装后的方法，最终实现了本文相同的调用方式和代码提示，但这种方法有点hack的感受。
2. cancel掉上一个接口这种方式保证了数据老是来源于最后一个请求接口，但有时可能会出现问题，好比：在同一个页面须要展现两种用户：common用户和admin用户，后端给的接口是/api/v1/user，当参数type=1时为common，type=2时为admin，若是咱们把这个接口定义为一个方法getUser，在这个页面会同时发出两个请求：Service.getUser({type:1})，Service.getUser({type:2}),可是，因为withAxios会取消上一个相同方法的请求，那么极可能有一个请求被取消，解决办法是在service中定义为两种方法：getCommonUser和getAdminUser，将type直接写入url中。这样也符合咱们语义化的目标。