VueJS结合axios调用Get API时的生命周期问题

看起来你遇到的核心问题是axios异步请求没有成功返回数据，同时代码里还有几个小细节导致渲染和日志输出不符合预期。我来一步步帮你排查和解决：

一、先搞懂console.log的输出差异 #

你提到三个console.log只有第三个不为空，这是因为：

• 第三个console.log(this.notes)是在axios.get()外面同步执行的，它会在异步请求完成之前就运行，所以输出的是你初始化的[{}]。
• 前两个console.log在then回调里，只有当请求成功返回时才会执行。如果请求失败（比如跨域、接口错误），then根本不会触发，所以这两个日志自然不会输出。

二、排查API请求失败的原因 #

首先要确认请求到底有没有成功，给请求加上catch回调捕获错误，这样就能看到问题所在：

mounted: function () { 
  axios.get('http://5.135.119.239:3090/notes/')
  .then(function(response){
      console.log('请求返回的数据:', response.data); // 明确打印返回的数据
      this.notes = response.data;
      console.log('更新后的notes:', this.notes);
  }.bind(this))
  .catch(function(error){
      console.error('请求出错了:', error); // 关键！捕获所有请求错误
  });
  // ... 拖拽初始化代码
}

然后打开浏览器的Network面板，查看这个GET请求的状态：

• 如果状态码是4xx/5xx：说明后端接口有问题，需要排查后端服务。
• 如果状态码是200但响应数据为空：那就是后端没返回数据，需要和后端确认接口逻辑。
• 如果请求根本没发出去，或者提示跨域错误：这是跨域问题，解决方法有两种：
  1. 后端配置CORS（允许你的前端域名访问）；
  2. 本地开发时，在Vue项目的vue.config.js里配置代理：

     module.exports = {
       devServer: {
         proxy: {
           '/notes': {
             target: 'http://5.135.119.239:3090',
             changeOrigin: true
           }
         }
       }
     }
     

     然后把请求地址改成'/notes/'，这样本地开发时会自动代理到目标接口。

三、修复模板渲染的问题 #

你的模板里有两个独立的v-for遍历notes，而且第二个v-for的key用了note.content，这可能导致：

• 如果多个note的content重复，会触发Vue的key重复警告，渲染异常；
• 两个循环会导致每个note的标题和内容分开渲染，逻辑不清晰。

建议把两个循环合并成一个，并且用唯一标识当key（比如接口返回的note.id，如果有的话）：

<template> 
<div ref="myDraggable" class="draggable" id="cardpokemon"> 
  <!-- 合并v-for，用唯一key -->
  <div v-for="note in notes" v-bind:key="note.id" class="note-item"> 
    <h2>{{ note.title }}</h2> 
    <div class="subcard"> 
      <h3>{{ note.content }}</h3> 
    </div>
  </div>

  <select onchange="this.parentNode.style.backgroundColor = this.value"> 
    <option value="">Pokemon Type</option> 
    <option value="#F9F564">Electrique</option> 
    <option value="#F58A51">Feu</option> 
    <option value="#71E4FB">Eau</option> 
    <option value="#FABEF0">Fée</option> 
    <option value="#8EEC8D">Plante</option> 
    <option value="#9789A9">Ténèbre</option> 
    <option value="#B6B6B6">Roche</option> 
  </select> 

  <input type="button" id="buttonfleche" value="->" /> 
</div> 
</template>

另外，初始化notes的时候可以改成[]而不是[{}]，避免页面一开始渲染空的标题和内容。

四、额外的小建议 #

• 尽量避免在模板里用原生的onchange，可以改成Vue的@change，这样更符合Vue的语法：

  <select @change="changeBackgroundColor($event)"> 
    <!-- 选项不变 -->
  </select>
  

  然后在methods里添加方法：

  methods: {
    changeBackgroundColor(event) {
      this.$refs.myDraggable.style.backgroundColor = event.target.value;
    },
    // ... 其他方法
  }
  

按照上面的步骤排查和修改，应该就能解决你的问题了！

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