请教一个typescript封装axios的问题

发布于 2022-09-12 22:27:27 字数 2159 浏览 19 评论 0

首先问题是现在有些接口需要loading,或者需要token之类的,需要一些额外的配置传进来判断,以前用js是直接像这样写就好了:

export function post(url: string, params: object, extraConfig?: Config) {
  extraConfig = dealConfig(extraConfig);
  return request({
    url,
    method: 'post',
    data: params,
    extraConfig
  });
}

但是现在ts的话直接写会报错,只能加在了headers里面,这样就会导致请求接口的时候能看到这个,就很奇怪的感觉:

image.png

不能在请求的时候delete extraConfig,因为有些配置在响应的时候也需要用到。小弟刚开始用ts,请求大佬指点一下这一块的封装该怎么写?

完整代码如下:

import axios from 'axios';

const request = axios.create({
  timeout: 50 * 1000,
  headers: {
    'Content-Type': 'application/json'
  }
});

request.interceptors.request.use(
  config => {
    const headers = config.headers;
    const { extraConfig } = headers;
    if (extraConfig) {
      const { needLoading, needToken } = extraConfig;
      if (needLoading) {
        // loading
      }
      if (needToken) {
        // headers.token = xxxx;
      }
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

request.interceptors.response.use(
  response => {
    if (response.config.headers.extraConfig.needHandleError) {
      // 需要处理的错误直接返回原样格式
    }
    // ...
  },
  error => {
    // ...
  }
);

interface Config {
  needLoading?: boolean;
  needToken?: boolean;
  needHandleError?: boolean;
}

function dealConfig(extraConfig?: Config): Config {
  const defaultExtraConfig = {
    needLoading: true,
    needToken: true,
    needHandleError: false
  };
  if (typeof extraConfig === 'undefined') {
    extraConfig = JSON.parse(JSON.stringify(defaultExtraConfig));
  } else {
    Object.keys(defaultExtraConfig).forEach(key => {
      if (!Object.prototype.hasOwnProperty.call(extraConfig, key)) {
        (extraConfig as Config)[key] = defaultExtraConfig[key];
      }
    });
  }
  return extraConfig;
}

export function post(url: string, params: object, extraConfig?: Config) {
  extraConfig = dealConfig(extraConfig);
  return request({
    url,
    method: 'post',
    data: params,
    headers: {
      extraConfig
    }
  });
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文