OpenLibrary API Fetch请求报错排查及电子书属性格式验证

1. 修复API请求URL格式 #

你的URL中包含HTML转义字符"，这会导致请求地址无效。正确写法可直接用字符串拼接或更简洁的模板字符串：

// 推荐模板字符串写法
var searchURL = `https://openlibrary.org/api/books?bibkeys=ISBN:${isbn}&format=json&jscmd=data`;

// 或普通字符串拼接
var searchURL = "https://openlibrary.org/api/books?bibkeys=ISBN:" + isbn + "&format=json&jscmd=data";

2. 修正API响应处理逻辑 #

OpenLibrary API返回的结果不是带items数组的对象，而是以ISBN:xxx为键的单条数据对象。需提取该对象的值，而非调用response2.items.map：

fetch(searchURL)
  .then(function(response) {
    // 先验证请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    return response.json();
  })
  .then(function(responseData) {
    // 获取对应ISBN的书籍数据
    const bookKey = `ISBN:${isbn}`;
    const book = responseData[bookKey];
    if (book) {
      createBookList(book);
    } else {
      console.log("未找到对应ISBN的书籍");
    }
  })
  .catch(function(error) {
    // 打印具体错误信息，便于排查
    console.error("请求出错:", error);
  });

3. 修正电子书可用性属性的访问路径 #

OpenLibrary返回的ebooks是数组，且格式数据存于formats字段下，而非直接的epub_url等属性。调整createBookList中的属性访问逻辑：

var createBookList = function(book) {
  // ... 其他DOM创建代码不变
  
  // 先判断是否存在电子书数据
  if (book.ebooks && book.ebooks.length > 0) {
    const ebook = book.ebooks[0];
    const formats = ebook.availability.formats || {};
    
    bookEPUB.textContent = formats.epub || "无EPUB资源";
    bookPDF.textContent = formats.pdf || "无PDF资源";
    bookTEXT.textContent = formats.text || "无文本资源";
    bookREAD.textContent = ebook.availability.read_url || "无在线阅读链接";
  } else {
    bookEPUB.textContent = "无电子书资源";
    bookPDF.textContent = "无电子书资源";
    bookTEXT.textContent = "无电子书资源";
    bookREAD.textContent = "无电子书资源";
  }
  
  // ... 后续DOM拼接代码不变
}

4. 其他细节修复 #

• 按钮onclick赋值错误，需传入函数而非直接传book：

  checkAvailability.onclick = function() {
    console.log("检查书籍可用性:", book);
  };
  

• 给按钮添加显示文本：checkAvailability.value = "检查可用性";

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