Vue.js调用多个API时array2无法填充的问题求助

嘿，我来帮你排查这个问题！你已经确认两个API都被调用了，Vue Devtools也能识别array2，但就是没数据填充进去，大概率是错误没有被捕获，或者第二个请求的响应存在问题。下面是具体的排查方向和解决方案：

1. 先给请求加上错误捕获，暴露隐藏问题 #

你的代码里没有处理请求可能出现的错误——不管是网络问题，还是返回的JSON格式无效，或者HTTP状态码异常（比如404、500），这些错误都会默默被忽略，导致你看不到问题所在。给每个fetch添加catch逻辑，同时检查响应的ok状态：

<script> 
const app = new Vue({ 
  el: '#app', 
  data: { 
    array1: [], 
    array2: [] 
  }, 
  created(){ 
    // 第一个API请求
    fetch('http://localhost/api/first') 
      .then(response => {
        // 检查HTTP响应状态是否正常（2xx）
        if (!response.ok) {
          throw new Error(`First API 请求失败: ${response.statusText}`);
        }
        return response.json();
      })
      .then(json => { 
        this.array1 = json 
      })
      .catch(err => console.error('第一个请求出错:', err));

    // 第二个API请求
    fetch('http://localhost/api/second') 
      .then(response => {
        if (!response.ok) {
          throw new Error(`Second API 请求失败: ${response.statusText}`);
        }
        return response.json();
      })
      .then(json => { 
        // 先打印看看返回的JSON结构
        console.log('第二个API返回的数据:', json);
        this.array2 = json 
      })
      .catch(err => console.error('第二个请求出错:', err));
  } 
}) 
</script>

添加后打开浏览器控制台（F12），看看有没有报错信息，这能直接帮你定位问题。

2. 检查第二个API返回的JSON是否合法 #

Fiddler里看到的响应内容，可能看起来像JSON，但实际存在语法错误（比如最后一个属性后面多了逗号、引号不配对）。这种情况下response.json()会抛出错误，导致后续的赋值逻辑不会执行。你可以把Fiddler里的响应内容复制到浏览器控制台，用JSON.parse('复制的响应内容')执行，看是否会报错。

3. 确认返回的数据结构是否符合预期 #

有时候API返回的JSON不是直接的数组，而是嵌套在某个属性里（比如{ data: [...] }），或者返回的是一个对象而非数组。这时候你需要调整赋值逻辑，比如如果返回的是{ list: [...] }，那就要改成this.array2 = json.list。

4. 排除this指向问题（可能性较低） #

虽然你用了箭头函数，this应该已经绑定到Vue实例了，但保险起见，可以在created钩子开头先保存实例引用：

created(){ 
  const vm = this;
  // 然后在回调里用vm.array2 = json
}

不过这个问题的概率很小，优先排查前面的几点。

按照上面的步骤排查，应该能很快找到问题所在！

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