How to invoke the cancelRequest func in the flatRequest?

[hanzhenfang]

function createCommonRequest<ResponseData = any>(
  axiosConfig?: CreateAxiosDefaults,
  options?: Partial<RequestOption<ResponseData>>
) {
  const opts = createDefaultOptions<ResponseData>(options)
  const axiosConf = createAxiosConfig(axiosConfig)
  const abordControllerMap = new Map<string, AbortController>()
  const instance = axios.create(axiosConf)
  const retryOpts = createRetryOptions(axiosConf)
  axiosRetry(instance, retryOpts)

  instance.interceptors.request.use((conf) => {
    const requestId = nanoid()
    const config: InternalAxiosRequestConfig = { ...conf }
    config.headers.set(REQUEST_ID_KEY, requestId)

    if (!config.signal) {
      const aborter = new AbortController()
      config.signal = aborter.signal
      abordControllerMap.set(requestId, aborter)
    }
    // 用户可能在请求开始前修改配置文件
    const ultimateConf = opts.onRequest(conf) || conf
    return ultimateConf
  })

  instance.interceptors.response.use(
    async (response) => {
      const responseType: ResponseType = (response.config?.responseType as ResponseType) || 'json'
      if (responseType !== 'json' || opts.isBackendSuccess(response)) {
        return Promise.resolve(response)
      }
      const fail = await opts.onBackEndFail(response, instance)
      if (fail) return fail

      const backendError = new AxiosError<ResponseData>(
        'the backend request error',
        BACKEND_ERROR_CODE,
        response.config,
        response.request,
        response
      )
      await opts.onError(backendError)
      return Promise.reject(backendError)
    },
    async (error: AxiosError<ResponseData>) => {
      await opts.onError(error)
      return Promise.reject(error)
    }
  )

[hanzhenfang]

Then I create the flatRequest using the below function.

export function createFlatRequest<ResponseData = any, State = Record<string, unknown>>(
  axiosConfig?: CreateAxiosDefaults,
  options?: Partial<RequestOption<ResponseData>>
) {
  const { instance, opts, cancelAllRequest, cancelRequest } = createCommonRequest<ResponseData>(axiosConfig, options)

  const flatRequest: FlagRequestInstance<State, ResponseData> = async function flatRequest<
    T = any,
    R extends ResponseType = 'json'
  >(config: CustomAxiosRequestConfig) {
    try {
      const response: AxiosResponse<ResponseData> = await instance(config)
      const responseType = response.config?.responseType || 'json'
      if (responseType === 'json') {
        const data = opts.transformBackendResponse(response)
        return { data, err: null, response }
      }
      return { data: response.data as MappedType<R, T>, error: null, response }
    } catch (error) {
      return { data: null, error, response: (error as AxiosError<ResponseData>).response }
    }
  } as FlagRequestInstance<State, ResponseData>

  flatRequest.cancelRequest = cancelRequest
  flatRequest.cancelAllRequest = cancelAllRequest
  flatRequest.state = {} as State
  return flatRequest
}

[hanzhenfang]

My problem is: I don't know how to get the requestId out of the function.
There must be something I missed :(

[honghuangdc]

just use AbortController normally
https://developer.mozilla.org/en-US/docs/Web/API/AbortController

[hanzhenfang]

Thanks for your reply first, but you may have misunderstood my real intention.

1. I make a flat request and use the request to fetch a URL, just like the picture below

2. Now I want to cancel the request under some conditions,but I can't get the requested where created in createCommonRequest function.
   

3. request.cancelRequest

---

I know how to use AbortController, but I can't understand how to use it in this condition.

[hanzhenfang]

Looking forward to your reply.

[honghuangdc]

currently, the function cancelRequest is for cancelAllRequest, can not execute alone