重写 form-create 中下拉菜单等组件的 fetch 请求为 axios

最新推荐文章于 2024-09-14 12:08:07 发布

OlyLis

最新推荐文章于 2024-09-14 12:08:07 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.csdn.net/lister1005/article/details/131306732

项目中通常使用axios拦截器处理请求，如添加token和baseUrl。文章讲述了在遇到form-create自带请求不支持这些功能时，如何替换其内部请求，利用自定义的服务（service）来实现与拦截器的兼容，从而在fetch请求中携带token和baseUrl。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中一般都有实用axios的拦截器创建的请求服务，form-create的自带请求就无法携带token和baseUrl等使用起来非常不便，将其替换

import formCreate from '@form-create/element-ui'
import { service } from '@/config/axios/service' // 对应你项目中的拦截器配置文件

// 创建vueapp实例
const app = ......


interface Option {
  action: string
  method?: AxiosMethod
  data?: object
  dataType?: object
  headers?: object
  withCredentials?: boolean
  onSuccess: (body: any) => void
  onError?: (e: Error | ProgressEvent) => void
  _parse?: string
}

// 第一个是原fetch用到的option，第二个没找到源码中引用的地方不知道有什么用
const overrideFetch = (option: Option, effectArgs) => {
    // console.log('--fetch option--', option)

    service({
      url: option.action,
      method: option.method,
      data: option.data,
      headers: option.headers,
      withCredentials: option.withCredentials
    })
      .then((res) => {
        try {
          if (option._parse) {
            // 使用内置 api 处理解析函数字符串转化为 函数类型
            const parseFn = formCreate.parseFn(option._parse)
            res.data = parseFn(res)
          }
        } catch (e) {
          console.log('--parseFn error--', e)
        }
        option.onSuccess?.(res)
      })
      .catch((e) => {
        option.onError?.(e)
      })

    return option
  }

// 重写 fetch 请求方法，select 等动态获取数据请求通过拦截器
// @ts-ignore
formCreate.fetch = overrideFetch

app.use(formCreate)