Vue中独立API请求无法并行执行，Laravel本地开发如何解决？

你的问题核心是Laravel默认的artisan serve是单进程运行，同一时间只能处理一个请求，导致自动补全请求被阻塞，必须等第一个耗时请求完成后才能批量处理。以下是几种可行的解决方法：

1. 改用Laravel Sail（推荐） #

Sail是Laravel官方的Docker开发环境，天然支持多进程处理请求。启动时可指定工作进程数量：

sail up --workers=4

配置后就能同时处理多个独立请求，自动补全请求不会再被阻塞。

2. 使用Laravel Valet #

Valet基于Caddy服务器，默认支持并发请求，无需额外配置。只要项目已通过Valet链接，就能直接处理并行请求。

3. 手动配置Nginx/Apache多进程 #

如果自己搭建本地Web服务器：

• Nginx：在nginx.conf中设置worker_processes auto;，让Nginx根据CPU核心数自动创建工作进程，同时确保events块的worker_connections数值足够。
• Apache：启用event MPM模块，调整httpd.conf参数：

  <IfModule mpm_event_module>
      StartServers             2
      MinSpareThreads         25
      MaxSpareThreads         75
      ThreadLimit             64
      ThreadsPerChild         25
      MaxRequestWorkers      150
      MaxConnectionsPerChild   0
  </IfModule>
  

4. 放弃使用artisan serve #

artisan serve仅用于快速测试，本质是PHP内置单进程单线程服务器，完全不支持并发。换成上述任意一种多进程环境即可解决问题。

附你的代码片段 #

触发耗时请求的组件：

<button @click="apiCall()">Click Me</button>

对应Vue方法：

async apiCall() {
    const form = new FormData();
    form.append("stuff", this.stuff);

    this.data = await fetch('/api-1', {
            body: form,
            method: "POST",
        })
            .then((r) => r.json())
            .then((j) => {
                return j.data;
            });
}

自动补全输入框组件：

<input v-model="text" @input="secondApiCall()" />

对应Vue方法：

secondApiCall() {
 axios
      .post("/api-2", {
        text: this.text,
      })
      .then((r) => {
        console.log(r.data);
      })
      .catch((error) => {});
 }

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