使用Axios调用Jobs API返回异常数据，如何转为JSON格式？

看起来你碰到的是JSONP格式的响应，不是标准的JSON数据——这就是为什么你拿到的res.data是被displayJobs()函数包裹的字符串，没法直接通过属性访问的原因。浏览器的JSON查看器会自动识别这种格式并帮你提取里面的JSON内容，但Axios默认只会处理标准JSON，所以需要我们手动处理一下。

下面给你两种可行的解决方法：

方法一：手动提取并解析JSON #

在回调里先把包裹的函数调用部分去掉，再解析成JSON对象：

const url = // 你的API地址
axios.get(url)
  .then(function(res){
    // 剔除开头的displayJobs(和结尾的)，提取中间的JSON字符串
    const cleanJsonStr = res.data.replace(/^displayJobs\(/, '').replace(/\)$/, '');
    const parsedData = JSON.parse(cleanJsonStr);
    // 现在就能正常访问属性了
    console.log(parsedData.jobTitle);
  })
  .catch(function(){
    console.log("err");
  })

方法二：用Axios的transformResponse自动处理 #

如果不想每次请求都手动处理，可以在请求配置里加入transformResponse，让Axios自动帮你处理响应数据：

const url = // 你的API地址
axios.get(url, {
  transformResponse: [function (data) {
    // 同样提取并解析JSON
    const cleanJsonStr = data.replace(/^displayJobs\(/, '').replace(/\)$/, '');
    return JSON.parse(cleanJsonStr);
  }]
})
.then(function(res){
  // 这里res.data已经是解析好的对象了
  console.log(res.data.jobTitle);
})
.catch(function(){
  console.log("err");
})

额外建议 #

你可以看看这个API的文档，有没有参数能让它返回标准JSON格式（比如?format=json这类参数）。如果有的话，优先用这种方式，比手动处理JSONP要更稳定、更省心。

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