深入理解Fetch API错误处理：捕获HTTP状态码与网络异常

let searchBtn = document.getElementById("search-btn");
let countryInp = document.getElementById("country-inp");
let resultDiv = document.getElementById("result"); // 假设有一个用于显示结果的div

searchBtn.addEventListener("click", () => {
    let countryName = countryInp.value.trim(); // 使用trim()去除首尾空格

    // 1. 请求前的数据验证
    if (countryName.length === 0) {
        resultDiv.innerHTML = `<h3>输入框不能为空。</h3>`;
        return; // 阻止API请求
    }

    let finalURL = `https://restcountries.com/v3.1/name/${countryName}?fullText=true`;
    console.log(`请求URL: ${finalURL}`);

    fetch(finalURL)
        .then(response => {
            // 2. 检查HTTP响应状态
            if (!response.ok) {
                // 如果响应状态不是2xx，则抛出错误
                // 可以根据statusText或status code提供更具体的错误信息
                const errorText = response.status === 404 ? "未找到该国家，请检查国家名称。" : `HTTP错误: ${response.status} ${response.statusText}`;
                throw new Error(errorText);
            }
            return response.json(); // 解析JSON数据
        })
        .then(data => {
            // 3. 成功处理数据
            // 检查data是否为数组且有内容，以防API返回空数组或其他非预期格式
            if (!Array.isArray(data) || data.length === 0) {
                throw new Error("API返回数据格式异常或为空。");
            }
            const countryData = data[0];
            resultDiv.innerHTML = `
                <img src="${countryData.flags.svg}" class="flag-img">
                <h2>${countryData.name.common}</h2>
                <div class="wrapper">
                    <div class="data-wrapper">
                        <h4>首都:</h4>
                        <span>${countryData.capital[0]}</span>
                    </div>
                </div>
                <div class="wrapper">
                    <div class="data-wrapper">
                        <h4>所属洲:</h4>
                        <span>${countryData.continents[0]}</span>
                    </div>
                </div>
                <div class="wrapper">
                    <div class="data-wrapper">
                        <h4>货币:</h4>
                        <span>${Object.keys(countryData.currencies)[0]}</span>
                    </div>
                </div>
            `;
            console.log(countryData);
        })
        .catch(error => {
            // 4. 统一的错误捕获与显示
            // 这里会捕获到网络错误、response.ok为false时抛出的错误以及数据解析错误
            console.error("请求或处理数据时发生错误:", error);
            resultDiv.innerHTML = `<h3>${error.message || "请求失败，请稍后再试。"}</h3>`;
        });
});

<div class="container">
    <input type="text" id="country-inp" placeholder="输入国家名称..." value="United Kingdom">
    <button id="search-btn">搜索</button>
    <div id="result">
        <!-- 结果将显示在这里 -->
    </div>
</div>