函数在 Vue.js 中返回 undefined答案

【问题标题】：Function returns undefined in Vue.js函数在 Vue.js 中返回 undefined
【发布时间】：2018-06-06 16:59:25
【问题描述】：

我正在尝试从 mounted() 中的 methods 调用一个函数，但它返回未定义。如果我制作一个 console.log 它会显示结果。我做错了什么？

 methods: {
    bsBooks: () => {
      axios
        .get(
          "https://api.nytimes.com/svc/books/v3/lists/best-sellers/history.json?api-key=mykey_is_here"
        )
        .then(res => {
          return res.data.results
        });
    }
  },
mounted() {
  console.log(bsBooks())
}

【问题讨论】：

你怎么知道它返回未定义？您不保存返回值。在 then 块内插入 console.log 以查看 res.data.results 是什么。你可能不了解 Promise 与同步函数。
axios 需要一个 url 来获取数据：alligator.io/vuejs/rest-api-axios
我在控制台日志中尝试了该函数以查看返回值。我在 axios 中使用了一个 URL。
axios get 必须有一个 url：axios.get(http://jsonplaceholder.typicode.com/posts)
How do I return the response from an asynchronous call?的可能重复

标签： vue.js axios

【解决方案1】：

我找到了一个解决方案，也许它不是最好的，但我们可以在 promise 中返回数据，类似于

methods: {
    bsBooks: () => {
      return axios
        .get(
          "https://api.nytimes.com/svc/books/v3/lists/best-sellers/history.json?api-key=my_api_key"
        )
        .then(response => response.data.results)
    }
  },
  mounted() {
    this.bsBooks().then(value => console.log(value))
  }

【讨论】：

是的，axios 返回一个promise，所以你可以链接然后传递函数来执行。

【解决方案2】：

bsBooks() 未定义，所以使用this.bsBooks()，还将结果存储到名为books 的data 并使用它：

<template>
    <ul>
        <li v-for="book in books">{{ book }}</li>
    </ul>
</template>

data(){
    return {
        books: []
    }
}, 
methods: {
    bsBooks: () => {
        axios
            .get(
                "..."
            )
            .then(res => {
                return this.books = res.data.results
            });
    }
},
mounted() {
    this.bsBooks();
}

【讨论】：

不，它不起作用 :) 我尝试过类似的方法。我可以直接在挂载中使用 axios 函数，但我还有一个函数可以检查一些信息，我认为将这些操作划分为函数是一种更好的做法。