替换API返回对象WebVersionTextURL属性http前缀为https不生效求助

核心错误原因 #

• 字符串替换未生效：JavaScript中字符串为不可变类型，replace方法不会修改原字符串，只会返回替换后的新字符串，你的代码未接收该返回值，请求时仍使用原始http地址，触发混合内容拦截。
• 异步请求无法获取返回值：你编写的getText函数依赖XMLHttpRequest的异步回调，回调内的返回值无法传递到函数外部，因此控制台会打印undefined。

修复后完整代码 #

<button id="go" class="btn">TEST</button>
<p>Check console for result</p>

<script>
const logBtn = document.getElementById('go');
logBtn.addEventListener('click', fetchData);

// 改写为返回Promise的异步函数
function getText(URL){
    return new Promise((resolve, reject) => {
        var request = new XMLHttpRequest();
        request.open('GET', URL, true);
        request.send(null);
        request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    var type = request.getResponseHeader('Content-Type');
                    if (type.indexOf("text") !== -1) {
                        resolve(request.responseText);
                    } else {
                        resolve('');
                    }
                } else {
                    reject(new Error(`请求失败，状态码：${request.status}`));
                }
            }
        }
    })
}

async function fetchData() {
    const response = await fetch('url_to_api_connection_here');
    const data = await response.json();

    // 改用for循环支持异步等待，forEach不支持await
    for (let obj of data) {
        for (let [key, value] of Object.entries(obj)) {
            console.log(`${key} ${value}`);
            if (key === "WebVersionTextURL") {
                // 接收replace返回的新字符串
                const httpsUrl = value.replace("http://", "https://");
                // 等待请求返回文本
                const content = await getText(httpsUrl);
                console.log(`${key} 内容：`, content);
                // 将内容存回对象，后续可直接输出到JSON
                obj.WebVersionContent = content;
            }
        }
        console.log('-------------------');
    }
    // 处理完成的data已经包含拉取到的文本内容，可直接使用
    console.log('最终处理完成的数据：', data);
}
</script>

修改说明 #

• 修正了字符串替换逻辑，将替换后的https地址存入新变量使用，解决混合内容拦截问题
• 重写getText函数为Promise风格，可配合await拿到请求返回的文本内容
• 将遍历方式从forEach改为for...of，支持异步等待逻辑正常执行
• 新增将拉取到的文本内容存入原对象的逻辑，你可以直接将处理后的data转为JSON输出即可

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