如何在 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() {&nbsp; return {&nbsp; &nbsp; prodcuts: []&nbsp; }},mounted() {&nbsp; axios.get('/api/products').then(res => {&nbsp; &nbsp; this.products = res.data&nbsp; })}每当您看到“是某物的块”时，就可以从中创建一个组件，创建 props 和方法，然后在挂载的钩子上使用 api 并填充组件。