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

Пользователь

от wilburn , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от abel , год назад

@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 => {
  // обработка ошибки
});


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

Пользователь

от kennedi_pfeffer , 2 дня назад

@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 секунд.


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