Question

我使用axios发布到API，并使用响应中的数据我想发出另一个API请求，但我遇到的问题是axios is not defined。

我的Vue登录组件内的调用如下：

this.axios({
  method: 'post',
  url: '/my_api/test',
  data: "testdata=test123",
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

.then(function (response) {
  this.axios({
    method: 'get',
    url: '/my_api/test2',
    data: "testdata2=" + response.data.id
  })
})

正如我之前提到的，我的控制台中的错误如下：TypeError: Cannot read property 'axios' of undefined。

我曾尝试在没有this.的情况下编写第二个请求，但我遇到了同样的问题。我哪里错了？

Answer 1

你必须在这里使用arrow function。

常规函数有自己的this值。

this.axios({
  method: 'post',
  url: '/my_api/test',
  data: "testdata=test123",
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

.then(response => {
  this.axios({
    method: 'get',
    url: '/my_api/test2',
    data: "testdata2=" + response.data.id
  })
})

或者，如果您更喜欢老式的方式，可以保存this对某个变量的引用，以便在回调中访问它：

const self = this

this.axios({
  method: 'post',
  url: '/my_api/test',
  data: "testdata=test123",
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

.then(function (response) {
  self.axios({
    method: 'get',
    url: '/my_api/test2',
    data: "testdata2=" + response.data.id
  })
})

新的axios请求作出回应

1 个答案: