使用searchBar调用Google Books API无法正常展示数据及缩略图报错问题

1. 带空格关键词无搜索结果问题 #

原因 #

URL 不允许直接出现空格，输入harry potter时，未编码的空格会导致请求参数被截断，API 无法识别完整搜索词，因此无返回结果。

修复方法 #

使用encodeURIComponent()对搜索关键词进行 URL 编码后再拼接请求路径，同时增加空结果判断避免报错：

function searchBook(query){ 
    // 对搜索词编码，处理空格、特殊符号
    const encodedQuery = encodeURIComponent(query);
    const url = BASE_URL + encodedQuery + '&' + API_KEY;

    fetch(url)
    .then(res => res.json())
    .then(books => {
        // 优先判断是否有返回结果
        if(books?.items) {
            showBooks(books.items);
        } else {
            document.getElementById('book_container').innerHTML = '<p>未找到匹配的图书</p>';
        }
    })
    .catch(err => console.error('搜索请求失败：', err));
}

2. 图片字段偶发报错问题 #

原因 #

Google Books API 不是所有返回的图书条目都包含imageLinks字段，部分条目即使有imageLinks也可能缺失thumbnail属性，直接访问嵌套属性会在字段缺失时抛出错误，打断后续渲染逻辑。

修复方法 #

使用可选链?.判断字段是否存在，同时设置默认缺省值：

showBooks = books => {
    const main = document.getElementById('book_container');
    main.innerHTML = "";
    books.forEach(book => {
        // 所有字段增加判空和默认值，避免渲染报错
        const title = book.volumeInfo.title || '无标题';
        const author = book.volumeInfo.authors?.join('、') || '无作者信息';
        const img = book.volumeInfo.imageLinks?.thumbnail || 'https://via.placeholder.com/128x192?text=暂无封面';

        const bookEl = document.createElement('div');
        bookEl.classList.add('book');
        bookEl.innerHTML = `
        <div class="book">
            <img src="${img}" alt="${title}封面">
            <div class="book_info">
                <h3>${title}</h3>
                <p>${author}</p>
            </div>
        </div>
        `
        main.appendChild(bookEl);
    });
};

额外优化建议 #

当前keyup事件每次输入都会触发请求，容易触发 API 限流，可增加防抖逻辑减少无效请求：

let searchTimer = null;
const searchBar =  document.getElementById('search');
searchBar.addEventListener('keyup', (e) =>{
    clearTimeout(searchTimer);
    const searchString = e.target.value;
    // 300ms无新输入才发起搜索，可自行调整间隔时长
    searchTimer = setTimeout(() => {
        searchBook(searchString);
    }, 300);
})

内容的提问来源于stack exchange，提问作者Carl