html/lab6/task1/script.js - main - RoditelevVV/web-static-labs

html/lab6/task1/script.js
131 строка5 KB
karpov
finish lab5, proba lab6
19 мар 2026, 17:02
19 мар 2026, 17:02e0606a0
'use strict';

class RandomCat {
    constructor() {
        this.loadCatBtn = document.getElementById('loadCatBtn');
        this.catContainer = document.getElementById('catContainer');
        this.statusDiv = document.getElementById('status');
        
        this.controller = null; // Для отмены запроса
        
        this.init();
    }
    
    init() {
        this.loadCatBtn.addEventListener('click', () => this.loadRandomCat());
    }
    
    async loadRandomCat() {
        // Отменяем предыдущий запрос, если он был
        if (this.controller) {
            this.controller.abort();
        }
        
        // Создаем новый контроллер для текущего запроса
        this.controller = new AbortController();
        const signal = this.controller.signal;
        
        // Показываем загрузку
        this.showLoading();
        this.loadCatBtn.disabled = true;
        
        // Таймаут на 10 секунд (если сервер не отвечает)
        const timeoutId = setTimeout(() => {
            this.controller.abort();
        }, 10000);
        
        try {
            // Пробуем первый API (The Cat API)
            try {
                const response = await fetch('https://api.thecatapi.com/v1/images/search', {
                    signal: signal
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP ошибка! Статус: ${response.status}`);
                }
                
                const data = await response.json();
                
                if (!data || !data[0] || !data[0].url) {
                    throw new Error('Не удалось получить URL изображения');
                }
                
                // Отображаем котика
                this.showCatImage(data[0].url, 'The Cat API');
                clearTimeout(timeoutId);
                this.loadCatBtn.disabled = false;
                this.controller = null;
                return;
                
            } catch (firstError) {
                console.log('Первый API не сработал, пробуем второй...', firstError);
                
                // Если первый не сработал, пробуем второй (CATAAS - работает в РФ)
                try {
                    const backupResponse = await fetch('https://cataas.com/cat?json=true', {
                        signal: signal
                    });
                    
                    if (!backupResponse.ok) {
                        throw new Error(`HTTP ошибка! Статус: ${backupResponse.status}`);
                    }
                    
                    const backupData = await backupResponse.json();
                    
                    if (!backupData || !backupData.url) {
                        throw new Error('Не удалось получить URL изображения');
                    }
                    
                    // Формируем URL для CATAAS
                    const imageUrl = 'https://cataas.com' + backupData.url;
                    
                    // Отображаем котика
                    this.showCatImage(imageUrl, 'CATAAS');
                    clearTimeout(timeoutId);
                    this.loadCatBtn.disabled = false;
                    this.controller = null;
                    return;
                    
                } catch (secondError) {
                    console.error('Второй API тоже не сработал:', secondError);
                    throw new Error('Все API не отвечают');
                }
            }
            
        } catch (error) {
            clearTimeout(timeoutId);
            
            // Проверяем, не была ли это отмена запроса
            if (error.name === 'AbortError') {
                this.showError('⏰ Запрос был отменён (таймаут 10 секунд)');
            } else {
                console.error('Ошибка:', error);
                this.showError('❌ Не удалось загрузить картинку');
            }
            this.loadCatBtn.disabled = false;
            this.controller = null;
        }
    }
    
    showLoading() {
        this.catContainer.innerHTML = '<p class="loading">⏳ Загружаем котика...</p>';
        this.statusDiv.textContent = '';
    }
    
    showCatImage(imageUrl, source = '') {
        this.catContainer.innerHTML = `<img src="${imageUrl}" alt="Случайный котик" class="cat-image">`;
        let sourceText = source ? ` (источник: ${source})` : '';
        this.statusDiv.textContent = `✅ Котик успешно загружен${sourceText}!`;
    }
    
    showError(message) {
        this.catContainer.innerHTML = `<div class="error-message">${message}</div>`;
        this.statusDiv.textContent = message;
    }
}

// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', () => {
    new RandomCat();
});