Vue 2中如何调用Promise中的方法？如何等待AJAX响应后处理数据？

其实在Vue 2里使用Promise和普通JavaScript环境下的逻辑是一致的，核心是利用Promise的.then()/.catch()链式调用，或者结合async/await语法来处理异步操作。这里给你几个常见的场景示例：

• 在组件生命周期钩子中使用：比如在created钩子中发起异步请求，获取数据后更新组件状态

  export default {
    data() {
      return {
        dataList: []
      }
    },
    created() {
      // 假设fetchData是返回Promise的异步方法
      this.fetchData()
        .then(res => {
          this.dataList = res.data
        })
        .catch(err => {
          console.error('请求失败:', err)
        })
    },
    methods: {
      fetchData() {
        // 这里可以是axios、fetch或者自己封装的AJAX方法，返回Promise
        return axios.get('/api/data')
      }
    }
  }
  

• 使用async/await简化代码：如果你的方法是async函数，可以用await来等待Promise完成，代码会更易读

  export default {
    // ...
    async created() {
      try {
        const res = await this.fetchData()
        this.dataList = res.data
      } catch (err) {
        console.error('请求失败:', err)
      }
    },
    // ...
  }
  

• 在自定义方法中调用Promise：比如用户触发某个按钮点击事件时执行异步操作

  export default {
    // ...
    methods: {
      async handleButtonClick() {
        try {
          await this.saveData()
          alert('保存成功！')
        } catch (err) {
          alert('保存失败：' + err.message)
        }
      },
      saveData() {
        return axios.post('/api/save', { name: this.name })
      }
    }
  }
  

你当前的代码有个核心问题：this.getAllCities()是AJAX异步请求，但你在Promise构造函数里同步执行了过滤逻辑——这时候AJAX还没返回数据，this.cities大概率还是初始值（比如空数组），过滤自然不会得到正确结果。

要解决这个问题，你需要把异步请求的等待逻辑融入Promise中，确保过滤操作在AJAX响应返回后再执行。下面分两种情况给你修正方案：

情况1：如果getAllCities()本身返回Promise（比如用axios/fetch封装的请求） #

直接在Promise中等待请求完成，拿到数据后再过滤，最后resolve：

var cityPromise = new Promise(async (resolve, reject) => {
  try {
    // 等待AJAX请求完成，获取最新的城市数据
    await this.getAllCities();
    // 现在this.cities已经是请求返回的最新数据，执行过滤
    this.cities = this.cities.filter(data => data.country_id === this.filCountry);
    resolve(this.cities); // 可以把过滤后的结果传给resolve，方便后续使用
  } catch (err) {
    // 请求失败时reject错误信息
    reject(err);
  }
});

// 之后可以这样使用这个Promise
cityPromise
  .then(filteredCities => {
    console.log('过滤后的城市:', filteredCities);
    // 这里可以做后续操作，比如更新组件状态
  })
  .catch(err => {
    console.error('获取城市数据失败:', err);
  });

情况2：如果getAllCities()是基于回调的传统AJAX（比如jQuery的$.ajax） #

需要把过滤逻辑放在请求的成功回调里，再调用resolve：

var cityPromise = new Promise((resolve, reject) => {
  this.getAllCities({
    success: (data) => {
      // 这里拿到请求返回的原始数据，先过滤
      const filteredCities = data.filter(item => item.country_id === this.filCountry);
      this.cities = filteredCities;
      resolve(filteredCities);
    },
    error: (err) => {
      reject(err);
    }
  });
});

关键提醒 #

• 确保this的指向正确：如果在Promise回调里this不是Vue实例，可以提前用const vm = this保存，或者使用箭头函数（箭头函数会继承外部的this）。
• 尽量避免在Promise构造函数里直接修改Vue实例的状态（比如this.cities），可以把过滤后的结果通过resolve传递出去，在.then()里再更新状态，这样逻辑更清晰。

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