Axios获取书籍描述请求仅在macOS/iOS Safari中未触发问题求助

问题概述 #

基于Axios的Web应用中，获取书籍列表、图片的请求在所有浏览器正常，但获取书籍描述的请求仅在Safari（macOS/iOS）完全未触发：代码执行到书籍标题匹配逻辑处正常，控制台无报错，网络面板无请求记录。已尝试Async/await改写、添加event.preventDefault()，均无效。

针对性排查与解决方案 #

1. 校验请求URL的合法性 #

Safari对URL格式的容错性低于Chrome等浏览器，若activeBook.key包含多余空格、特殊字符或格式错误（如重复的斜杠），可能导致请求被静默拦截。
在请求前添加日志打印URL，确认格式：

console.log('Target URL:', `https://openlibrary.org${activeBook.key}.json`);

若URL存在异常，对activeBook.key做标准化处理：

const validKey = activeBook.key.trim().replace(/^\/|\/$/g, ''); // 去除首尾斜杠
axios.get(`https://openlibrary.org/${validKey}.json`)

2. 强制异步任务进入事件队列 #

Safari在同步循环（如for...of）中对异步任务的调度可能存在延迟，可将请求逻辑包装为立即执行的异步函数，或用setTimeout强制推入事件队列：

// 立即执行异步函数
(async () => {
  try {
    const response = await axios.get(`https://openlibrary.org${activeBook.key}.json`);
    changeHeading();
    let bookDescription = response.data.description;
    // 数据处理逻辑
    createBookDescription(bookDescription);
  } catch (err) {
    createBookDescription("Book description not available");
  }
})();

// 或用setTimeout触发
setTimeout(() => {
  axios.get(`https://openlibrary.org${activeBook.key}.json`)
    .then(res => { /* 原处理逻辑 */ })
    .catch(err => { /* 原错误处理 */ });
}, 0);

3. 修正字符串匹配的精度问题 #

Safari对字符串===比较的严格性更高，若bookTitle与activeBook.title存在不可见字符（如换行、全角空格），可能导致逻辑分支执行异常：
对字符串做标准化处理后再匹配：

const normalizedBookTitle = bookTitle.trim().replace(/\s+/g, ' ').toLowerCase();
for (let activeBook of activeBooks) {
  const normalizedActiveTitle = activeBook.title.trim().replace(/\s+/g, ' ').toLowerCase();
  if (normalizedActiveTitle === normalizedBookTitle) {
    // 发起请求逻辑
  }
}

4. 替换为原生Fetch验证兼容性 #

若Axios在Safari存在版本或配置兼容性问题，临时替换为原生Fetch测试请求是否能触发：

fetch(`https://openlibrary.org${activeBook.key}.json`, {
  headers: { 'Accept': 'application/json' }
})
  .then(res => res.json())
  .then(data => {
    changeHeading();
    let bookDescription = data.description;
    // 数据处理逻辑
    createBookDescription(bookDescription);
  })
  .catch(err => {
    createBookDescription("Book description not available");
  });

若Fetch正常工作，建议升级Axios至最新稳定版，或检查Axios全局配置是否存在针对该请求的特殊限制。

5. 优化事件绑定逻辑 #

确认点击事件的绑定方式：若使用事件委托，Safari对事件目标的识别可能存在差异；若点击元素为<a>标签，需同时阻止默认行为与事件冒泡：

// 点击事件处理函数
function handleBookClick(e) {
  e.preventDefault();
  e.stopPropagation();
  fetchBookDescription();
}

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