Vue.js 2中如何确保过滤函数完成后再执行Axios请求避免未定义错误

问题本质 #

你的代码里，过滤操作是异步执行的（用setTimeout模拟），但Axios请求逻辑是同步执行的，导致filterArray还没被赋值就被转为字符串，最终传给后端的是"undefined"，后端解析自然报错。

最佳方案：等待异步过滤完成再发起请求 #

必须确保过滤操作完成后，再执行Axios请求。可以用Promise封装异步逻辑，配合async/await或者.then()实现顺序执行：

方法1：Promise + async/await（推荐，代码更清晰） #

let mainArray = [];

// 用Promise封装异步过滤逻辑
const getFilteredArray = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const filtered = mainArray.filter(obj => obj.id === 1);
      resolve(filtered);
    }, 1000);
  });
};

// 异步函数中执行请求逻辑
async function sendRequest() {
  try {
    const filterArray = await getFilteredArray();
    const frontendArray = JSON.stringify(filterArray);
    // 这里执行Axios请求
    // const response = await axios.post('/your-api', { data: frontendArray });
    
    // 模拟后端解析
    const backendArray = JSON.parse(frontendArray);
    console.log(backendArray);
  } catch (err) {
    console.error('请求或过滤出错:', err);
  }
}

// 触发执行
sendRequest();

方法2：.then()链式调用（兼容旧环境） #

如果项目环境不支持async/await，可以用Promise链式调用：

let mainArray = [];

const getFilteredArray = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const filtered = mainArray.filter(obj => obj.id === 1);
      resolve(filtered);
    }, 1000);
  });
};

getFilteredArray()
  .then(filterArray => {
    const frontendArray = JSON.stringify(filterArray);
    // 执行Axios请求
    // return axios.post('/your-api', { data: frontendArray });
  })
  .then(response => {
    console.log('请求成功:', response);
  })
  .catch(err => {
    console.error('出错:', err);
  });

为什么不推荐预设空数组？ #

预设let filterArray = []虽然能避免后端报错，但如果过滤逻辑还没完成，你发送的就是空数组，后端无法收到正确的过滤结果，会导致业务数据错误，不符合你的需求。

额外建议 #

如果生产环境中，过滤操作本身是同步的，但mainArray是从异步接口获取的，同样要确保mainArray获取完成后再执行过滤和请求——所有依赖的异步操作完成后，再执行后续的请求逻辑。

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