JavaScript fetch请求console无输出且ip参数undefined问题排查

最初console.log无输出的核心原因 #

• 代码缺失异常捕获逻辑：接口请求因参数错误、密钥无效、跨域限制等问题失败抛出异常时，没有对应的错误接收逻辑，错误被运行时静默吞掉，根本执行不到写了console.log的代码分支。
• 响应取值逻辑错误：fetch返回的response是原始HTTP响应实例，本身不承载接口返回的业务字段，原代码直接从response上读取security、ip_address等业务字段时会触发逻辑异常，直接中断代码执行。

接口提示ip为undefined的核心原因 #

• 两个请求函数都声明了名为ip的形参，根据JS作用域规则，函数内部的形参优先级高于全局作用域的同名变量，会覆盖你在全局定义的const ip = "ip_address"。
• 代码末尾调用函数时用了无参写法getVPN()、getLocation()，没有给形参传入任何实际值，函数内部拿到的ip形参默认就是undefined，最终拼接到请求URL里的ip参数自然为undefined。

这个问题有两种改法：如果不需要动态切换查询IP，直接删掉两个函数声明里的ip形参，函数会直接读取全局的ip变量；如果需要支持查询不同IP，调用函数时把目标IP作为实参传入即可，传参写法的复用性更高。

修正后的可运行代码 #

const ipKey = "替换为你自己的abstractapi服务密钥";
const vpnKey = "替换为你自己的vpnapi服务密钥";
const ip = "填写要查询的实际IP地址";

const getVPN = async (queryIp) => {
    try {
        const vpn_url = `https://vpnapi.io/api/${queryIp}?key=${vpnKey}`;
        const response = await fetch(vpn_url);
        // 校验HTTP请求状态
        if (!response.ok) throw new Error(`VPN接口请求异常，状态码：${response.status}`);
        const resData = await response.json();
        const output = `
-----------------
VPN检测结果: ${JSON.stringify(resData.security)}
-----------------`;
        console.log(output);
    } catch (err) {
        console.error('getVPN执行失败：', err);
    }
};

const getLocation = async (queryIp) => {
    try {
        const ip_url = `https://ipgeolocation.abstractapi.com/v1/?api_key=${ipKey}&ip_address=${queryIp}`;
        const response = await fetch(ip_url);
        if (!response.ok) throw new Error(`IP定位接口请求异常，状态码：${response.status}`);
        const resData = await response.json();
        const output = `
IP Address: ${resData.ip_address}
Country: ${resData.country}
State: ${resData.region}
City: ${resData.city}
Zip Code: ${resData.postal_code}
Lat/Long: ${resData.latitude}, ${resData.longitude}
-------------------------------
`;
        console.log(output);
    } catch (err) {
        console.error('getLocation执行失败：', err);
    }
};

// 调用时传入IP参数
getVPN(ip);
getLocation(ip);

关键修正点 #

• 重命名函数形参为queryIp，从命名上避免和全局ip变量产生作用域冲突，调用时显式传入全局定义的ip变量，彻底解决ip参数为undefined的问题
• 统一使用async/await语法，去掉冗余的.then()嵌套，增加try/catch全链路错误捕获，任何环节出错都会在控制台打印明确的错误信息，不会再出现静默失败、控制台无输出的问题
• 新增HTTP响应状态校验，只有请求状态正常时才会解析响应数据，所有业务字段从解析后的JSON结果对象上读取，修正了原代码从原始HTTP响应实例取值的逻辑错误
• 对VPN接口返回的security对象做了JSON序列化处理，避免直接拼接字符串时出现[object Object]的无效输出

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