JavaScript Fetch接口在移动设备无法正常运行问题求助

• DOM加载时序问题：你当前的script标签放置在<span id="name">元素之前，虽然fetch是异步请求，但当移动端网络环境较好、接口响应极快（比如命中本地缓存）时，fetch的回调函数可能在DOM树完全解析完成前执行，此时document.querySelector("#name")会返回null，对null赋值innerText会抛出未捕获的JS错误，导致逻辑中断，页面无内容显示。PC端通常因为网络延迟略高，接口返回时DOM已经解析完毕，所以可以正常执行。
• 请求拦截问题：移动端的Chrome、Opera等浏览器大多自带广告拦截、跟踪防护功能，部分隐私策略会拦截未列入白名单的跨域第三方接口请求，导致fetch直接失败。PC端如果没有开启相关拦截插件，就可以正常请求。
• 缺少错误捕获逻辑：你的代码没有添加catch错误捕获分支，不管是DOM查询失败还是请求失败都不会有任何提示，无法直观判断问题原因。

可以按照以下步骤调整代码，即可解决兼容性问题：

1. 调整script标签位置，放到body末尾所有DOM元素的后面，确保DOM元素已经加载完成再执行JS逻辑
2. 为fetch请求链添加catch分支，捕获异常方便排查
3. 可额外添加DOMContentLoaded事件监听，进一步确保DOM解析完成再执行逻辑
4. 暂时关闭移动端浏览器的广告拦截、隐私跟踪防护功能，测试是否是拦截导致的问题

修改后的参考代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="refresh" content="15" >
        <!-- 补充viewport适配移动端显示，非必须但建议添加 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Alton Towers Predicted Queue Times</title>
    </head>
    <body>
        <h3><span id="name"></span></h3>
        <!-- script放到DOM元素后面 -->
        <script>
            // 包裹DOMContentLoaded监听，确保DOM解析完成
            document.addEventListener('DOMContentLoaded', () => {
                fetch("https://queue-times.com/parks/1/queue_times.json")
                    .then(response => {
                        if (!response.ok) throw new Error('接口请求失败: ' + response.status)
                        return response.json()
                    })
                    .then(data => {
                        const nameEl = document.querySelector("#name")
                        if (nameEl) {
                            nameEl.innerText = data.lands[0].rides[0].name
                        } else {
                            throw new Error('未找到name元素')
                        }
                    })
                    .catch(err => {
                        // 错误输出到页面方便移动端排查，生产环境可删除
                        document.body.append('错误信息: ' + err.message)
                        console.error(err)
                    })
            })
        </script>
    </body>
</html>

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