Vue-Select：如何将此 fetch() 代码转换为使用 axios？

Question

我正在尝试在我的应用程序中使用 vue-select 包。我有一些从文档中复制的代码，它工作正常。但是，为了可读性，我想将它转换为使用 axios 而不是 fetch()，这样我就可以使用自己的 axios 配置设置。

如何将以下代码转换为使用 axios 而不是 fetch？

    search: debounce((loading, search, vm) => {
      fetch(
        `https://api.github.com/search/repositories?q=${escape(search)}`
      ).then((res) => {
        res.json().then((json) => (vm.options = json.items))
        loading(false)
      })
    }, 350)

我尝试了以下代码，但出现错误：Uncaught (in promise) TypeError: res is not a function:

    search: debounce(async (loading, search, vm) => {
      await axios
        .get(`https://api.github.com/search/repositories?q=${escape(search)}`)
        .then((res) => {
          res((json) => (vm.options = json.items))
          loading(false)
        })
    }, 350)

Answer 1

当 res() 是对象时，您将其作为函数调用。您的意思可能是 res.json() 来自 fetch。这对于 axios 不是必需的，您可以 access the json 和 res.data.

此外，您正在混合使用 promise/async，这令人惊讶地不会引发错误（.then() 不应在等待后定义），但会使代码难以阅读。使用其中之一。

异步

{
    search: debounce(async (loading, search, vm) => {
        let res = await axios.get(`https://api.github.com/search/repositories?q=${escape(search)}`)
        const items = res.data
        vm.options = items
        loading(false)
    }, 350)
}

承诺

{ 
    search: debounce((loading, search, vm) => {
        axios
            .get(`https://api.github.com/search/repositories?q=${escape(search)}`)
            .then((res) => {
                const items = res.data
                vm.options = items
                loading(false)
            })
    }, 350)
}

IMO 我发现 fetch() 更容易阅读，而且它有原生支持。

Vue-Select：如何将此 fetch() 代码转换为使用 axios？

Vue-Select: How can I convert this fetch() code to use axios?

axios

vuejs2

vue-select