Блог

Я работаю над проектом с графиками, и мне нужно иметь возможность отменять свои запросы, если пользователь выберет другую вкладку.

Вот мой вызов API

 export const getDifferentialData = (
  sourceId: string,
  sourceLine: string,
  source: any
) => {
  const graph1Request = getData(
    sourceId,
    sourceLine,
    source
  )
  const graph2Request = getData(
    sourceId,
    sourceLine,
    source
  )

  return Promise.all([graph1Request, graph2Request]).then(results => {
    const [graphA, graphB] = results

    return {
      graphA: parsedData(graphA),
      graphB: parsedData(graphB),
    }
  })
}

export const getData = (
  sourceId: string,
  sourceLine: string,
  source?: any
) => {
  if (sourceId amp;amp; sourceLine) {
    return api.get(`apiGoesHere`, { cancelToken: source.token }).then(response => {
        const { data } = response
        return parsedData(data)
      })
  } else {
    return api.get(`apiGoesHere`, { cancelToken: source.token }).then(response => {
        const { data } = response
        return parsedData(data)
      })
  }
}
 

И компонент, в котором я выполняю вызов. userDidChangeTab вызывается при нажатии на вкладку и вызывает fetchGraph

 const Graph: FC<Props> = () => {
  const source = axios.CancelToken.source();

  // we ensure that the query filters are up to date with the tab selected
  const userDidChangeTab = (tabIndex: number) => {
    const isDifferentialTabSelected = isDifferentialTab(tabIndex)
    let newFilters = queryFilters

    if (isDifferentialTabSelected) {
      newFilters = {
        // props go here
      }
    } else {
      newFilters = {
        // props go here
      }
    }

    source.cancel()

    fetchGraph(isDifferentialTabSelected)
    setActiveTab(tabIndex)
  }

  // Function to fetch two differential graphs.
  const fetchGraph = (isDifferential: boolean) => {
    setFetching(true)

    if (isDifferential) {
      getDifferentialData(
        sourceId,
        sourceLine,
        source
      )
        .then(({ graphA, graphB }: any) => {
          setGraphData(graphA)
          setMatchData(new diffMatch(graphA, graphB, 1.0))
        })
        .catch(reason => {
          const errorMessage = errorMessageFromReason(reason)
          addMessageToContainer(errorMessage, true)
        })
        .finally(() => {
          setFetching(false)
        })
    } else {
      getGraph(
        sourceId,
        sourceLine,
        source
      )
        .then((graphData: any) => {
          setGraphData(graphData)
          setMatchData(null)
        })
        .catch(reason => {
          const errorMessage = errorMessageFromReason(reason)
          addMessageToContainer(errorMessage, true)
        })
        .finally(() => {
          setFetching(false)
        })
    }
  }
}