Vue多组件中Axios同步执行而非异步的问题排查

嘿，我来帮你拆解下这个问题～

你遇到的情况核心原因是：你的Ajax请求被设置成了同步模式，而JavaScript是单线程的，同步请求会阻塞整个事件循环——这就导致在你的2秒请求完成前，所有后续的代码（包括其他组件created钩子中的Ajax请求）都没法执行，看起来就像是所有操作都变成同步了。

常见错误排查点 #

先检查你的Ajax请求代码，是不是不小心开启了同步配置：

• 如果用的是原生XMLHttpRequest：有没有写xhr.open('GET', '/your-url', false)？第三个参数设为false就是同步模式，这会直接阻塞线程。
• 如果用的是jQuery的$.ajax：是不是加了async: false配置项？
• 如果用的是axios：虽然axios默认是异步的，但要确认有没有错误地使用了同步写法（不过axios本身不支持同步请求，除非你用了第三方同步适配器，但这种情况很少见）。

解决方案：改成异步请求 #

把同步请求改成异步，就能让所有请求并行执行，不会互相阻塞。结合你的component1.vue代码，给你几个示例：

1. 原生XHR异步写法 #

export default {
  data: () => {
    return {
      balance: { chips: 0, coins: 0, rewards: 0 }
    }
  },
  created() {
    const xhr = new XMLHttpRequest();
    // 第三个参数默认是true，代表异步，可省略
    xhr.open('GET', '/api/get-balance');
    xhr.onload = () => {
      if (xhr.status === 200) {
        this.balance = JSON.parse(xhr.responseText);
      }
    };
    xhr.onerror = () => {
      console.error('加载余额失败');
    };
    xhr.send();
  }
}

2. axios异步写法（推荐） #

import axios from 'axios';

export default {
  data: () => {
    return {
      balance: { chips: 0, coins: 0, rewards: 0 }
    }
  },
  created() {
    axios.get('/api/get-balance')
      .then(response => {
        this.balance = response.data;
      })
      .catch(err => {
        console.error('加载余额失败:', err);
      });
  }
}

3. async/await写法（更简洁的异步语法） #

import axios from 'axios';

export default {
  data: () => {
    return {
      balance: { chips: 0, coins: 0, rewards: 0 }
    }
  },
  async created() {
    try {
      const response = await axios.get('/api/get-balance');
      this.balance = response.data;
    } catch (err) {
      console.error('加载余额失败:', err);
    }
  }
}

为什么异步请求不会阻塞其他组件？ #

异步请求会把网络操作交给浏览器的后台线程处理，JS主线程不会等待请求完成，而是继续执行其他代码（比如其他组件的created钩子）。当请求完成后，浏览器会把回调函数加入事件队列，等主线程空闲时再执行——这样所有组件的请求都能并行发起，不会互相卡住。

内容的提问来源于stack exchange，提问作者Get Off My Lawn