javascript - Axios 中的回调函数返回错误(使用 Vue，没有 jQuery)

Question

我将 Axios 与 Vue Javascript 框架结合使用来循环遍历数组。我正在尝试将数组中的每个元素设置为该元素的 API 调用结果。我的函数没有按顺序运行，所以我尝试使用回调函数，但它返回错误。

我已经查看了其他答案(这就是我尝试使用回调函数的原因)，但我仍然无法让我的代码正常工作。

我有一个 CodePen 可以显示我的问题:

https://codepen.io/thwaawaa/pen/VoEbqR

CodePen 控制台给我这个错误:

[object Error] {
  column: 19,
  line: 34,
  sourceURL: “some long link”
}

Answer 1

这是一个没有错误的工作叉:Codepen

您遇到的问题是 then 回调中的 this.word 未定义，因为您没有绑定(bind) vue this inside ...您还使用 2 个 then 处理了响应，所以第一个正在处理响应，但它没有向第二个返回任何内容，这就是为什么response 是 undefined 要解决此问题，只需使用一个 then 或从一个返回值并将其链接到另一个 then 在它之后....我会建议删除第一个在你的 axi 方法上，并在另一个 then 上添加它里面的代码也就像我们说的你必须绑定(bind)then 你可以通过替换 :

then(function(response){
  var r = response.data[0].phonetic;
  this.word[x] = r;
})

用这个:

then((response) => {
  var r = response.data[0].phonetic;
  this.word[x] = r;
})

箭头函数将隐式绑定(bind) this 因此您的函数现在知道 this 的含义并且它不会触发 catch