Question

虽然这通常很糟糕，但您可以直接在组件中使用Axios从方法，生命周期挂钩或任何时候获取数据。

我想知道为什么？我经常使用生命周期钩子来获取数据（特别是来自created()）。我们应该在哪里写请求电话？

Answer 1

直接在组件中编写API方法会增加代码行并使其难以阅读。据我所知，author建议将API方法分为Service。

我们假设您需要获取top posts并对数据进行操作。如果你在组件中执行它不可重复使用，则必须在要使用它的其他组件中复制它。

export default {
  data: () => ({
    top: [],
    errors: []
  }),

  // Fetches posts when the component is created.
  created() {
    axios.get(`http://jsonplaceholder.typicode.com/posts/top`)
    .then(response => {
      // flattening the response
      this.top = response.data.map(item => {
         title: item.title,
         timestamp: item.timestamp,
         author: item.author
      })
    })
    .catch(e => {
      this.errors.push(e)
    })

  }
}

因此，当您需要在另一个组件中获取top post时，您必须复制代码。

现在让我们将API methods放入Service。

api.js file

const fetchTopPosts = function() {
  return axios.get(`http://jsonplaceholder.typicode.com/posts/top`)
        .then(response => {
          // flattening the response
          this.top = response.data.map(item => {
             title: item.title,
             timestamp: item.timestamp,
             author: item.author
          })
        }) // you can also make a chain.
}

export default {
   fetchTopPosts: fetchTopPosts
}

因此，您可以在所需的任何组件中使用上述API methods。

之后：

import API from 'path_to_api.js_file'
export default {
      data: () => ({
        top: [],
        errors: []
      }),

      // Fetches posts when the component is created.
      created() {
         API.fetchTopPosts().then(top => {
            this.top = top
         })
         .catch(e => {
          this.errors.push(e)
         })

      }
    }

Answer 2

适用于小型应用程序或小部件，但在真正的SPA中，最好将API抽象到自己的模块中，如果使用vuex，则使用操作来调用该api模块。

您的组件不应该关注和其数据的来源。该组件负责UI，而不是AJAX。

import api from './api.js'

created() {
  api.getUsers().then( users => {
    this.users = users
  })
}

// vs.

created() {
  axios.get('/users').then({ data }=> {
    this.users = data
  })
}

在上面的示例中，您的“无axios”代码实际上并不短得多，但想象一下您可能会远离组件的内容：

处理HTTP错误，例如重试
从服务器预格式化数据，使其适合您的组件
标头配置（内容类型，访问令牌......）
为POST进行创建FormData，例如图像文件

列表可以变长。所有这些都不属于组件，因为它与视图无关。视图只需要生成的数据或错误消息。

这也意味着您可以独立测试组件和api。

为什么在组件中使用Axios或HTTP调用被认为是不好的做法？

2 个答案: