在JavaScript中显示来自API的错误

async function fetchData(url) {
    try {
        const response = await fetch(url);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        return data;
    } catch (error) {
        handleError(error);
    }
}

function handleError(error) {
    let errorMessage = 'An unexpected error occurred.';
    
    if (error.message.includes('status:')) {
        errorMessage = `Server responded with an error: ${error.message.split('status: ')[1]}`;
    } else if (error.name === 'TypeError') {
        errorMessage = 'There was a problem with the network connection.';
    }
    
    displayError(errorMessage);
}

function displayError(message) {
    const errorContainer = document.getElementById('error-container');
    if (errorContainer) {
        errorContainer.textContent = message;
        errorContainer.style.display = 'block';
    } else {
        console.error(message);
    }
}

// Usage example
fetchData('https://api.example.com/data')
    .then(data => console.log(data))
    .catch(error => console.error('Failed to fetch data:', error));