JavaScript fetch获取URL文本后读取属性返回undefined如何解决

问题原因 #

你在doFetch函数中往proxies数组存入的是JSON.stringify处理后的字符串，不是原始JavaScript对象，字符串本身不存在type、ip、port这类自定义属性，因此访问时返回undefined。

修复方案 #

方案1（推荐）：数组直接存储原始对象 #

删除提前序列化的逻辑，直接往数组里存入对象即可，修改doFetch中的push代码：

// 原错误逻辑
// proxies.push(JSON.stringify({'type': 'socks4', 'ip': splitText[0], 'port': splitText[1]}));
// 修改为
proxies.push({'type': 'socks4', 'ip': splitText[0], 'port': splitText[1]});

修改后随机取出的元素就是普通对象，可以直接访问对应属性。

方案2：取值时先做反序列化 #

如果确实有提前序列化的业务需求，在自执行函数中拿到随机元素后，先通过JSON.parse转回JavaScript对象再访问属性：

(async () => {
  let proxies = await doFetch();
  let proxie = proxies[Math.floor(Math.random() * proxies.length)];
  // 新增反序列化逻辑
  proxie = JSON.parse(proxie);
  console.log(proxie);
  console.log(proxie.type, proxie.ip, proxie.port);
})();

可选优化 #

你拉取的txt代理列表末尾可能存在空行，拆分后最后一条数据格式可能不合法，可以添加过滤逻辑规避无效值：

for (let i = 0; i < list.length; i++) {
  let splitText = list[i].split(':');
  // 过滤空行、格式不合法的行
  if (splitText.length >= 2 && splitText[0].trim() && splitText[1].trim()) {
    proxies.push({'type': 'socks4', 'ip': splitText[0], 'port': splitText[1]});
  }
}

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