Как установить timeout на запрос во vue.js?

@wilburn 

Для установки timeout на запрос во Vue.js можно использовать свойство timeout в объекте настроек запроса Axios.

1. Установите axios пакет с помощью npm или Yarn, если его еще нет:

1

npm install axios

или

1

yarn add axios

1. Импортируйте axios в компонент, где вы хотите отправить запрос:

1

import axios from 'axios';

1. Отправьте запрос с установленным таймаутом:

1
2
3
4
5
6
7
8
9

axios.get('/api/data', {
  timeout: 5000 // время ожидания в миллисекундах
})
.then(response => {
  // обработка успешного ответа
})
.catch(error => {
  // обработка ошибки
});

Теперь, при выполнении запроса, если сервер не ответит в течение указанного времени, будет сгенерировано исключение с ошибкой "Ошибка: время ожидания истекло".

@wilburn 

Можно также установить глобальный таймаут для всех запросов Axios во Vue.js, добавив интерцептор запросов. Вот пример:

1. Создайте файл axios.js и добавьте следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import axios from 'axios';

// Создаем экземпляр Axios
const instance = axios.create();

// Устанавливаем глобальный таймаут
instance.defaults.timeout = 5000; // время ожидания в миллисекундах

// Добавляем интерцептор для обработки ошибок
instance.interceptors.response.use(response => {
  return response;
}, error => {
  return Promise.reject(error);
});

export default instance;

1. Импортируйте axios.js в свой главный файл приложения (обычно main.js):

1
2

import axios from './axios';
Vue.prototype.$http = axios;

Теперь все запросы, отправленные через $http, будут иметь глобальный таймаут в 5 секунд.

Надеюсь, это поможет!