Прервать все запросы Axios при изменении маршрута использовать vue-router

В основном вам нужно сгенерировать глобальный токен отмены

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

и используйте его во всех своих запросах, передав его в параметре конфигурации

GET запрос:

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.info('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

POST запрос:

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

Затем в навигационной защите vue-router beforeEach вы можете отменить все запросы, используя:

source.cancel('Operation canceled by the user.');

Вот официальное руководство Axios по отмене: https://github.com/axios/axios#cancellation

Ответ от @fabruex правильный. Я просто хотел добавить здесь, что если у вас много вызовов api, вам нужно передать токен отмены в каждую конфигурацию вызова api. Чтобы уменьшить этот код, вы можете создать экземпляр axios и добавить перехватчик запросов, который добавит этот общий токен отмены, а затем вы можете назначить новое значение токену, когда отмена будет выполнена или ваш маршрут изменился.

// Some global common cancel token source

let cancelSource = axios.CancelToken.source();

// Request interceptor

export const requestInterceptor = config => {
  config.cancelToken = cancelSource.token;
  return config;
};

// Add request interceptor like this
const request = axios.create({ baseURL: SOME_URL });
request.interceptors.request.use(requestInterceptor);


// Now you can use this axios instance like this

await request.get('/users');

// and

await request.post('/users', data);

// When you will cancel
cancelSource.cancel('Your cancellation message');

// And all the api calls initiated by axios instance which has request interceptor will be cancelled.

Отредактируйте, чтобы ответить @Suneet Jain

Вы можете создать класс и создать экземпляр, который вы можете обновить

class CancelToken {
  constructor(initialValue) {
    this.source = initialValue;
  }
  getSource() {
    return this.source;
  }
  setSource(value) {
    this.source = value;
  }
  cancel() {
    this.source.cancel();
  }
}
export const cancelSource = new CancelToken(axios.CancelToken.source());

Вы можете импортировать этот экземпляр cancelSource и при необходимости отменить вызов, например. когда вы выходите из системы, вы можете вызвать, чтобы отменить все запросы, у которых есть токен отмены, предоставленный cancelSource.getSource()

Итак, после выхода

cancelSource.cancel('CANCELLED');

И когда пользователь снова войдет в систему, установите новый токен отмены для этого глобального экземпляра

cancelSource.setSource(axios.CancelToken.source());