我想把 Axios 二次封装 用的TS泛型的,但是 Axios 不支持扩展自定义配置 我应该怎么做

举报
皮牙子抓饭 发表于 2023/05/12 14:49:05 2023/05/12
【摘要】 如果 Axios 不支持扩展自定义配置,你可以考虑使用 Axios 的拦截器来对请求和响应进行处理,从而实现二次封装和自定义配置的目的。具体步骤如下:创建一个 Axios 实例,这样你可以设置默认的配置,例如默认的请求头、超时时间等。例如:import axios from 'axios'const instance = axios.create({ baseURL: 'http://ap...

如果 Axios 不支持扩展自定义配置,你可以考虑使用 Axios 的拦截器来对请求和响应进行处理,从而实现二次封装和自定义配置的目的。具体步骤如下:

  1. 创建一个 Axios 实例,这样你可以设置默认的配置,例如默认的请求头、超时时间等。例如:
    import axios from 'axios'
    
    const instance = axios.create({
      baseURL: 'http://api.example.com',
      timeout: 5000,
      headers: {
        'Content-Type': 'application/json'
      }
    })
    
  2. 使用 Axios 的拦截器,在请求或响应被 then 或 catch 处理前,对它们进行预处理或者加工处理。例如:
    // 请求拦截器
    instance.interceptors.request.use(
      config => {
        // 处理请求前的配置
        return config
      },
      error => {
        // 处理请求错误
        return Promise.reject(error)
      }
    )
    
    // 响应拦截器
    instance.interceptors.response.use(
      response => {
        // 处理响应数据
        return response
      },
      error => {
        // 处理响应错误
        return Promise.reject(error)
      }
    )
    

    在拦截器中,你可以根据自己的需求对请求和响应进行预处理或者加工处理,例如在请求中添加公共的请求头、在响应中对数据进行格式化等。

  3. 对外提供一个函数,这个函数可以接收自定义的配置参数,例如:
    function request<T = any>(config: AxiosRequestConfig): Promise<T> {
      return instance.request<T>(config)
    }
    

    在这个函数中,你可以将自定义的配置参数和默认配置合并,并调用 Axios 实例的 request 方法来发起请求。

    最后,你可以根据自己的需求对这个函数进行进一步的封装和扩展,例如添加错误处理逻辑、统一的错误提示等。

    综上所述,使用 Axios 的拦截器是一种常见的二次封装和自定义配置的方式,可以满足大部分场景的需求。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。