Vue-resource无法返回数据，如何在验证方法中获取API响应？

这个问题的核心是异步操作的执行时机——你原来的checkEmailAvailability是基于回调的异步函数，而validate方法在调用它时，会直接返回undefined，因为异步请求还没完成，回调里的return available根本影响不到外层validate的返回值。

第一步：重构异步函数为Promise风格 #

先把checkEmailAvailability改成返回Promise的形式，这是现代JS处理异步逻辑更清晰的方式：

checkEmailAvailability(email) {
  return Vue.http.get(BASE_URL_USER + '/check-email', {params: {email}})
    .then(response => response.body.available)
    .catch(() => false);
}

这里去掉了回调参数，直接返回请求的Promise链：请求成功时返回available状态，失败时默认返回false。

第二步：让validate返回Promise #

大多数表单验证框架（比如Vue生态里的VeeValidate）都支持异步验证返回Promise，所以修改你的validate方法：

validate() {
  // 直接返回Promise，验证框架会等待它resolve后判断结果
  return Api.checkEmailAvailability(this.username);
}

如果你更喜欢可读性更强的代码，也可以用async/await语法：

async validate() {
  const isAvailable = await Api.checkEmailAvailability(this.username);
  return isAvailable;
}

async函数会自动把返回值包装成Promise，效果和上面一致。

如果你必须保留回调模式 #

如果因为某些原因不能修改checkEmailAvailability的回调写法，那可以手动用Promise封装一下：

validate() {
  return new Promise((resolve) => {
    Api.checkUsernameAvailability(this.username, available => {
      resolve(available);
    });
  });
}

这样validate返回的Promise会在回调执行时，把available的值作为验证结果传递出去。

内容的提问来源于stack exchange，提问作者Rıza Sabuncu