Vue组件中如何在Promise回调内调用外部方法？

这个问题我之前也踩过坑！核心原因是普通function()回调里的this指向不对——它并没有指向你的Vue组件实例，自然找不到outMethod_01和outMethod_02这些组件方法。另外还要提一句，你原来的代码逻辑有个小问题：第二个.then()是第一个请求成功后的后续回调，不是用来处理失败的，失败场景应该用.catch()来捕获。

下面给你几种靠谱的解决方案：

方法1：使用箭头函数（最简洁推荐） #

箭头函数不会创建自己的this，它会直接继承外层作用域的this（也就是你的Vue组件实例），直接用就行：

testMethod() {
  someRequestMethod(someRequestData)
    .then(() => {
      // 这里的this就是组件实例
      this.outMethod_01()
    })
    .catch(() => {
      // 失败时调用outMethod_02
      this.outMethod_02()
    })
}

方法2：提前保存this到变量 #

在回调函数外面把组件的this存起来，比如用that或者vm，回调里用这个变量调用方法：

testMethod() {
  const that = this; // 保存组件实例的this
  someRequestMethod(someRequestData)
    .then(function() {
      that.outMethod_01()
    })
    .catch(function() {
      that.outMethod_02()
    })
}

方法3：用bind()绑定this #

给每个回调函数手动绑定组件的this，确保回调里的this指向正确：

testMethod() {
  someRequestMethod(someRequestData)
    .then(function() {
      this.outMethod_01()
    }.bind(this)) // 绑定组件的this
    .catch(function() {
      this.outMethod_02()
    }.bind(this))
}

最后再补个小提醒：如果你的业务逻辑是「请求成功调用A方法，失败调用B方法」，一定要用.catch()处理失败场景，而不是第二个.then()——第二个.then()是用来处理第一个.then()成功后的后续操作，不是错误处理哦。

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