如何在 Vue 单页应用程序中构建 API 代码？

Question

我正在使用 Vue（和 Laravel for RESTful API）构建一个相当大的 SPA。我很难在网上找到有关此的资源 - 组织与服务器通信的代码的好做法是什么？目前我有src/api.js文件，它使用axios并定义了一些基本方法以及特定的 API 端点（被截断）：import axios from 'axios';axios.defaults.baseURL = process.env.API_URL;const get = async (url, params = {}) => (await axios.get(url, { params }));const post = async (url, data = {}) => (await axios.post(url, data));export const login = (data) => post('users/login', data);然后在我的组件中，我可以做...<script>import { login } from '@/api';...methods: {   login() {       login({username: this.username, password: this.password})           .then() // set state           .catch() // show errors   }}</script>这是一个好习惯吗？我要我的终点分成多个文件（例如auth，users，documents等）？这种事情有没有更好的设计，尤其是在涉及重复（例如错误处理、显示加载条等）时？谢谢！

Answer 1

如果您使用 Vue CLI，它将设置一个基本的项目结构。带有一个 HelloWorld 组件。您将希望将您的 vue 应用程序分解为组件。每个组件都应该有一个定义好的角色，理想情况下您可以进行单元测试。

例如，假设您想显示产品列表，那么您应该创建一个产品列表组件。

<Products :list="products" />

在你的应用程序中，你会做类似的事情

data() {

  return {

    prodcuts: []

  }

},

mounted() {

  axios.get('/api/products').then(res => {

    this.products = res.data

  })

}

每当您看到“是某物的块”时，就可以从中创建一个组件，创建 props 和方法，然后在挂载的钩子上使用 api 并填充组件。