Vue3+Axios下如何实现请求队列以保证请求顺序？

集成P-queue实现队列化请求 #

P-queue可以轻松和Axios集成，通过限制并发数为1强制请求串行执行，完美解决网络异常导致的顺序错乱问题。

实现步骤 #

1. 安装P-queue：

npm install p-queue

2. 创建队列并封装Axios请求：

import { PQueue } from 'p-queue';
import axios from 'axios';

// 初始化队列，并发数设为1确保请求按顺序执行
const serialRequestQueue = new PQueue({ concurrency: 1 });

// 封装串行POST请求函数
const serialPost = (url, data) => {
  // 将Axios请求加入队列，返回Promise
  return serialRequestQueue.add(() => axios.post(url, data));
};

3. 在Vue组件中使用：

// 步骤1提交
const handleStep1 = async () => {
  try {
    const response = await serialPost('/api/form/step1', step1Form.value);
    // 处理步骤1成功逻辑，比如跳转步骤2
  } catch (error) {
    console.error('步骤1请求失败:', error);
    // 可选：清空队列，阻止后续请求执行
    // serialRequestQueue.clear();
  }
};

// 步骤2提交
const handleStep2 = async () => {
  try {
    const response = await serialPost('/api/form/step2', step2Form.value);
    // 处理步骤2成功逻辑
  } catch (error) {
    console.error('步骤2请求失败:', error);
  }
};

不管网络延迟如何，队列都会严格按照请求添加的顺序执行，前一个请求完成（成功或失败）后才会启动下一个。

无需第三方库的替代方案 #

方案1：async/await链式调用 #

如果是用户按顺序触发步骤（比如点击“下一步”），可以用async/await强制请求串行，同时维护一个请求状态避免重复触发：

import axios from 'axios';

const isRequesting = ref(false);

// 步骤1提交
const handleStep1 = async () => {
  if (isRequesting.value) return;
  isRequesting.value = true;
  try {
    await axios.post('/api/form/step1', step1Form.value);
    // 步骤1成功，允许进入步骤2
  } catch (error) {
    console.error('步骤1请求失败:', error);
  } finally {
    isRequesting.value = false;
  }
};

// 步骤2提交
const handleStep2 = async () => {
  if (isRequesting.value) return;
  isRequesting.value = true;
  try {
    await axios.post('/api/form/step2', step2Form.value);
    // 步骤2成功逻辑
  } catch (error) {
    console.error('步骤2请求失败:', error);
  } finally {
    isRequesting.value = false;
  }
};

这种方式代码简洁，无需额外依赖，适合步骤触发逻辑明确的场景。

方案2：手动封装串行队列 #

完全自定义队列逻辑，灵活性更高：

import axios from 'axios';

const requestQueue = [];
let isProcessing = false;

// 添加请求到队列
const enqueueRequest = (requestFn) => {
  return new Promise((resolve, reject) => {
    requestQueue.push({ requestFn, resolve, reject });
    processNext();
  });
};

// 处理队列中的下一个请求
const processNext = async () => {
  if (isProcessing || requestQueue.length === 0) return;
  isProcessing = true;
  const { requestFn, resolve, reject } = requestQueue.shift();
  try {
    const result = await requestFn();
    resolve(result);
  } catch (error) {
    reject(error);
  } finally {
    isProcessing = false;
    processNext();
  }
};

// 使用示例
const handleStep1 = () => {
  return enqueueRequest(() => axios.post('/api/form/step1', step1Form.value));
};

const handleStep2 = () => {
  return enqueueRequest(() => axios.post('/api/form/step2', step2Form.value));
};

这个方案可以根据需求扩展，比如添加优先级、暂停/恢复队列等功能。

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