JS新手使用Axios调用API遇异步执行顺序异常问题求助

核心问题原因 #

和你熟悉的C++、Python默认同步执行的逻辑不同，JS的网络请求默认是异步非阻塞的，不会卡住主线程等请求返回再往下走。你定义的getAPIData是async异步函数，调用它不会阻塞后续代码执行，只会立刻返回一个Promise对象，你现在直接把这个Promise赋值给jsonData，当然拿不到真实的接口返回值，后续formatData自然就提前空跑了。

正确实现方案 #

你只需要把主执行逻辑改成异步串行的顺序即可，推荐用和你现有代码风格统一的async/await写法：

let jsonData = [];
const formattedData = [];

async function getAPIData() {
  console.log('Start getAPIData');
  const response = await axios.get('https://myurl.domain/api', {
    headers: {
      crossDomain: true,
      'app-id': 'won\'t tell',
      'app-secret': 'won\'t tell either'
    }
  });
  console.log(response.data);
  console.log('End getAPIData');
  // 直接返回接口真实数据，避免全局变量传递的隐患
  return response.data;
}

// 把要处理的原始数据当参数传入，逻辑更可控
function formatData(rawData) {
  console.log('Start formatData');
  /* 在这里把rawData处理成你需要的格式，写入formattedData即可 */
  console.log('End formatData');
}

function updateHTMLWithData() {
  // 这里写Vue更新表格的逻辑，此时formattedData已经有处理好的内容
}

// 主执行逻辑包成async函数，用await保证执行顺序
async function main() {
  console.log('Start Main Code');
  // await会等getAPIData请求完成、拿到返回值再执行后续代码
  jsonData = await getAPIData();
  console.log('After getAPIData'); 
  formatData(jsonData);
  updateHTMLWithData();
  console.log(formattedData);
  console.log('Fin du script');
}

// 页面加载后自动执行主逻辑
window.onload = main;

Vue绑定数据优化建议 #

如果用Vue实现页面更新，建议直接把formattedData定义为Vue的响应式变量，处理完数据直接赋值即可自动触发页面渲染，参考结构如下：

<!-- 页面结构示例 -->
<div id="app">
  <h1>数据展示页</h1>
  <table border="1">
    <thead>
      <tr>
        <th>字段1</th>
        <th>字段2</th>
        <!-- 补充其他表头字段 -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in formattedData" :key="item.id">
        <td>{{item.field1}}</td>
        <td>{{item.field2}}</td>
        <!-- 补充其他表格字段 -->
      </tr>
    </tbody>
  </table>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      formattedData: []
    }
  },
  // Vue的mounted钩子会在页面加载完成后自动执行
  async mounted() {
    const rawData = await getAPIData();
    // 直接给响应式变量赋值，页面会自动更新
    this.formattedData = formatData(rawData);
  }
}).mount('#app')
</script>

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