Question

在Vue组件中：

import { someRequestMethod } from '@/api/requ'

...

methods: {
    testMethod() {
        someRequestMethod(someRequestData).then(function() {
            this.outMethod_01()
        }).then(function() {
            this.outMethod_02()
        })
    }

    outMethod_01() {
        console.log('I am an outer method 01.');
    }

    outMethod_02() {
        console.log('I am an outer method 02.');
    }
}

当我致电testMethod并回复Promise时。那么如果成功，我想致电outMethod_01，如果遇到错误，请致电outMethod_02。但出现错误outMethod_01 is undefined和outMethod_02 is undefined。

那么如何在Promise中调用外部方法？

Answer 1

您应该使用箭头函数语法(params) => {...code}而不是function(params) {...code}。箭头函数this从作用域继承。在常规函数中，this是函数本身（它具有自己的作用域）。

您可以在此处了解更多信息：https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

如果您不能使用ES6语法，则可以执行以下操作：

methods: {
    testMethod() {
        var self = this;
        someRequestMethod(someRequestData).then(function() {
            self.outMethod_01()
        }).then(function() {
            self.outMethod_02()
        })
    }

    outMethod_01() {
        console.log('I am an outer method 01.');
    }

    outMethod_02() {
        console.log('I am an outer method 02.');
    }
}

Answer 2

您可以使用bind()而不是将调用包装在匿名函数中，而不用一箭打中两只鸟：

  someRequestMethod(someRequestData)
    .then(this.outMethod_01.bind(this))
    .then(this.outMethod_02.bind(this))

Answer 3

testMethod() {
    someRequestMethod(someRequestData).then(() => {
        this.outMethod_01()
    }).then(function() {
        this.outMethod_02()
    })
}

这有效。

如何在Promise in Vue组件中调用方法

3 个答案: