Javascript 访问VUE JS'；来自Axios的数据

我有一个Vue JS（Vuetify）应用程序，它发出一个ajax请求，我想用响应填充div的内容，但是我在访问实例的数据时遇到困难。我看到的所有示例都使用this来指向数据对象，但是当我这样做时，我得到了这个错误

无法设置未定义或空引用的属性“message”

该应用程序非常简单：

main.js：

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'


Vue.use(Vuetify)

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue

export default {
  data () {
    return {
    ....
    message: '',
    order: {},
    ...
  },
  methods: {
    send: function() {
      axios.post(this.api+"orders",this.order).then(function(response) {
        this.message = "Your payment was successful";
        ...
      }
   }
 }

此.order可以通过Axios的post方法访问，但处理返回承诺的匿名函数在访问此.message时似乎有问题，这与我看到的示例相反

---

我在这里做的有什么不同吗？

你的问题是这条线

axios.post(this.api+"orders",this.order).then(function(respo‌​nse) {

示例可能使用您所说的

this

，但是，通过使用第二级嵌套函数表达式，您访问的动态

this

与您想象的不同

基本上，

send

是Vue对象的方法，但由于

此

在

函数

表达式中没有词汇范围，仅在

=>

函数中，因此在传递给

Promise.prototype.的回调中，您有错误的
此
引用

以下是分项数字：

methods: {
  send: function() {
    // here: `this` technically refers to the `methods` object
    // but Vue lifts it to the entire view object at runtime
    axios.post(this.api + "orders", this.order)
      .then(function(response) {
        // here: `this` refers to the whatever object `the function is called on
        // if it is called as a method or bound explicitly using Function.prototype.bind
        // the Promise instance will not call it on anything
        // nor bind it to anything so `this` will be undefined
        // since you are in a module and modules are implicitly strict mode code.
        this.message = "Your payment was successful";
      });
    }
 }

试试这个

export default {
  data() {
    return {
    message: "",
    order: {},
  },
  methods: {
    send: function() {
      // here: `this` technically refers to the `methods` object
      // but Vue lifts it to the entire view object at runtime
      axios.post(this.api + "orders", this.order).then(response => {
        // here: this refers to the same object as it does in `send` because
        // `=>` functions capture their outer `this` reference statically.
        this.message = "Your payment was successful";
      });
    }
  }
}

或者更好

export default {
  data() {
    return {
    message: "",
    order: {},
  },
  methods: {
    async send() {
      const response = await axios.post(`${this.api}orders`, this.order);
      this.message = "Your payment was successful";
    }
  }
}

请注意，在第二个示例中，使用了JavaScript最近标准化的
async/await
功能，我们已经完全抽象出回调的需要，因此这一点变得毫无意义

我在这里建议它，不是因为它与您的问题有关，而是因为如果您有承诺驱动的代码，那么它应该是首选的编写方法，而这是基于您对其他语言特性的使用。它在使用承诺时会导致代码更清晰

然而，这个答案的关键点是
这个
参考的范围。
我可以为您的问题想出这些解决方案

1） 您可以创建对该
的引用并使用它

send: function() {
  let self = this
  axios.post(this.api + "orders", this.order).then(function(response) {
    self.message = "Your payment was successful"
  }
}

2） 一个
箭头函数
将使您能够使用指向Vue实例的
此

send: function() {
  axios.post(this.api + "orders", this.order).then(response => {
    this.message = "Your payment was successful"
  }
}

3） 使用
bind
将对象分配给
此
，该对象将是您案例中的当前Vue实例

send: function() {
  axios.post(this.api + "orders", this.order).then(function(response) {
    this.message = "Your payment was successful"
  }.bind(this))
}

您的问题是这一行
axios.post（this.api+“orders”，this.order）。然后（函数（响应）{
。示例可能会使用此函数，但通过使用第二个嵌套的
函数
表达式，您访问的动态函数与您认为的不同。将
=>
函数传递给
。然后
。基本上，
。send
是vue对象的方法，但由于
此
在
function
表达式，仅在
=>
函数内部，您的回调中的
引用错误。感谢的可能重复，这有助于Edaluan Haddad如何错误处理asynch Wait verion？
async
/
Wait
允许您在异步代码中使用标准控制结构您可以使用
尝试{wait f（）}catch（e）{}
来处理错误。谢谢，问题解决了，建议使用此答案，因为它很容易理解follow@DarkteK很酷，不过我建议在这种情况下使用箭头功能。答案太棒了。2021年仍然可以挽救生命