Как можно сделать запросы отменяемыми с использованием axios и AbortController в проекте на React? В моем коде запросы не отменяются и возвращаются как прежде. Что может быть причиной этой проблемы?
Есть несколько возможных причин, по которым запросы на сервер не отменяются:
1. Необходимо использовать экземпляр CancelToken для каждого запроса, чтобы иметь возможность отменить его. Вы можете создать экземпляр CancelToken с помощью axios.CancelToken.source() и передать его в параметр cancelToken каждого запроса.
Вот пример использования axios и AbortController для отмены запроса:
```javascript
import axios from "axios";
const controller = new AbortController();
const { signal } = controller;
axios.get("/api/some-data", { signal })
.then(response => {
console.log(response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log("Request canceled", error.message);
} else {
console.log("Request failed", error.message);
}
});
// Для отмены запроса вызовите controller.abort():
// controller.abort();
```
2. Убедитесь, что вы правильно устанавливаете статус отмены для каждого запроса, и отлавливаете ошибку отмены в обработчике catch(). Если вы используете async/await, убедитесь, что вы используете try/catch для отлова ошибки отмены.
3. Проверьте, не устанавливается ли другое значение cancelToken после создания запроса. Если вы устанавливаете cancelToken после создания запроса, то отмена не сработает.
4. Убедитесь, что вы используете актуальную версию axios. Некоторые старые версии axios могут иметь проблемы с отменой запросов.
Если несмотря на проверку всех вышеперечисленных причин ваш запрос все еще не отменяется, может быть проблема в других частях вашего кода или серверной части приложения.
Передайте свойство `config` вместо `data` при вызове метода `axios.post()`. В нашем случае, это будет выглядеть следующим образом:
```javascript
const resTemps = await axios.post(
'/api/files/datas',
{
fileNames: temps.map((temp) => temp.name),
layer: degree,
domain: { low: zoomDomain[0], high: zoomDomain[1] },
},
{
signal: controllerTempsRef.current.signal,
}
);
const resPressures = await axios.post(
'/api/files/datas',
{
fileNames: pressures.map((pressure) => pressure.name),
layer: degree,
domain: { low: zoomDomain[0], high: zoomDomain[1] },
},
{
signal: controllerPressuresRef.current.signal,
}
);
```