axios请求返回JSONP格式字符串 如何提取圆括号内的JSON数据

问题根因 #

你当前获取的是JSONP格式的字符串响应，数据外层被test(开头、);结尾的回调函数包裹，没有被axios自动解析为JavaScript对象，因此直接访问对象属性会返回undefined。

解决方案 #

你可以通过字符串匹配提取括号内的内容，再将其解析为可操作的JS对象，推荐使用安全性更高的实现方式，避免eval带来的安全风险。

完整修改后的代码 #

axios.request(options).then( (response) => {
  const jsonpContent = response.data;
  // 正则匹配提取test()括号内部的内容
  const matchResult = jsonpContent.match(/^test\(([\s\S]*?)\);?$/);
  if (!matchResult) {
    console.error('响应格式不符合预期');
    return;
  }
  // 将括号内的JS对象字面量解析为对象
  const targetData = new Function('return ' + matchResult[1])();
  // 现在可以正常访问属性
  console.log(targetData.coord.lon);
}).catch((error)  => {
    console.error(error);
})

额外优化建议 #

如果有权限调整接口逻辑，优先要求后端直接返回标准JSON格式数据，axios会自动将其解析为对象，无需额外做格式处理，稳定性更高。

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