Загрузка файлов — обычное требование в веб-приложениях, а использование таких библиотек, как Axios, с Next.js упрощает задачу. Однако могут возникнуть ситуации, когда вам потребуется отменить текущую загрузку файла. В этой статье мы рассмотрим различные способы отмены загрузки при использовании Axios с Next.js. Мы предоставим примеры кода для каждого подхода, чтобы помочь вам эффективно реализовать их в своих проектах.

Метод 1: использование функции cancelTokenв Axios
Пример кода:

import axios from 'axios';
const cancelTokenSource = axios.CancelToken.source();
const uploadFile = async (file) => {
  try {
    const formData = new FormData();
    formData.append('file', file);
    const response = await axios.post('/upload', formData, {
      cancelToken: cancelTokenSource.token,
    });
    // Handle the response
  } catch (error) {
    if (axios.isCancel(error)) {
      console.log('Upload canceled', error.message);
    } else {
      // Handle other errors
    }
  }
};
const cancelUpload = () => {
  cancelTokenSource.cancel('Upload canceled by the user');
};

Метод 2: использование обратного вызова onUploadProgressв Axios
Пример кода:

import axios from 'axios';
const uploadFile = async (file) => {
  try {
    const formData = new FormData();
    formData.append('file', file);
    const response = await axios.post('/upload', formData, {
      onUploadProgress: (progressEvent) => {
        const percentage = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        console.log(`Upload progress: ${percentage}%`);
      },
    });
    // Handle the response
  } catch (error) {
    // Handle errors
  }
};

Метод 3: использование объекта xhrдля отмены запроса
Пример кода:

import axios from 'axios';
let xhr;
const uploadFile = (file) => {
  const formData = new FormData();
  formData.append('file', file);
  xhr = axios.post('/upload', formData);
  xhr.upload.addEventListener('progress', (event) => {
    const percentage = Math.round((event.loaded * 100) / event.total);
    console.log(`Upload progress: ${percentage}%`);
  });
};
const cancelUpload = () => {
  if (xhr) {
    xhr.abort();
    console.log('Upload canceled');
  }
};

В этой статье мы рассмотрели три различных способа отмены загрузки файлов при использовании Axios с Next.js. Первый метод продемонстрировал использование cancelTokenдля прерывания запроса. Второй метод использовал обратный вызов onUploadProgressдля отслеживания хода загрузки и потенциальной ее отмены. Наконец, третий метод продемонстрировал, как использовать объект xhrдля прерывания запроса вручную. Поняв и внедрив эти методы, вы сможете улучшить взаимодействие с пользователем и эффективно обрабатывать отмену загрузки файлов в своих приложениях Next.js.

Не забывайте обрабатывать потенциальные ошибки и крайние случаи, не рассмотренные в этих примерах, чтобы обеспечить надежную реализацию.