Question

背景：我有一个无限滚动组件，当用户进入底部div时，该组件会不断向第三方API发出请求。我遇到了一个问题，如果用户在未完成的请求完成之前切换页面，则会造成内存泄漏。

我尝试过的操作：我尝试按照this answer中的建议使用全局取消令牌来取消所有未完成的api请求，但这会阻止以后的所有请求。

问题：我正在寻找一种方法，可以从api文件外部取消所有API调用中的所有当前和以前的请求，同时仍然允许将来的请求。

我的api文件如下：

import React from 'react'
import axios from 'axios'

export const fetchAvatars = (query, amount) => {
  return axios.get('https://pixabay.com/api/', {
    params: {
      key: process.env.PIXABAY_API,
      q: query,
      orientation: 'vertical',
      per_page: amount,
      image_type: 'photo'
    }
  })
}

export const fetchVideos = (amount, category, editorsChoice, query) => {
  return axios.get('https://pixabay.com/api/videos/', {
    params: {
      key: process.env.PIXABAY_API,
      q: query,
      per_page: amount,
      category: category,
      editors_choice: editorsChoice,
      min_height: 1080,
      orientation: 'horizontal'
    }
  })
}

export const fetchVideoFromID = (id) => {
  return axios.get('https://pixabay.com/api/videos/', {
    params: {
      key: process.env.PIXABAY_API,
      id: id
    }
  }).catch(err => {
    if (!err.response) {
      console.log('network error, probably bad id')
    }
    else console.log(err)
  })
}

export const fetchPictureFromID = (id) => {
  return axios.get('https://pixabay.com/api/', {
    params: {
      key: process.env.PIXABAY_API,
      id: id
    }
  }).catch(err => {
    console.log(err)
  })
}

export const getRandomName = () => {
  return axios.get('https://randomuser.me/api/?nat=gb,au,ca')
}

Axios中止所有先前的请求

0 个答案: