Nuxt.js - API 调用的最佳场所

Question

我是 Vue.js Nuxt 和所有前端内容的新手。

我有一个关于 API 调用的问题。我不确定什么是正确的方法，这里的最佳实践。

我有一家店。在那个商店中，我有调用我的 API 并设置状态的操作，例如。

async fetchArticle({ state, commit }, uuid) {
    const response = await this.$axios.get(`articles/${uuid}/`)
    commit('SET_ARTICLE', response.data)
},

这很好，它适用于一个组件。

但是如果我只想获取文章而不改变状态怎么办。

为了 DRY，我想到的第一件事是创建获取数据并在需要的地方使用的服务层。

这是正确的方法吗？在哪里可以找到一些可以从中汲取灵感的真实示例？

Answer 1

使用存储库模式来抽象您的 API 绝对是一个好主意！无论您使用@nuxtjs/axios模块还是@nuxt/http模块，您都可以将任一实例传递给您的存储库类/函数。下面是抽象的“repository.js”文件的真实示例。

export default $axios => resource => ({
  index() {
    return $axios.$get(`/${resource}`)
  },

  create(payload) {
    return $axios.$post(`/${resource}`, payload)
  },

  show(id) {
    return $axios.$get(`/${resource}/${id}`)
  },


  update(payload, id) {
    return $axios.$put(`/${resource}/${id}`, payload)
  },

  delete(id) {
    return $axios.$delete(`/${resource}/${id}`)
  }

})

然后，您可以创建一个插件来为您的端点初始化所有不同类型的存储库：

import createRepository from '~/path/to/repository.js'

export default (ctx, inject) => {
  const repositoryWithAxios = createRepository(ctx.$axios)

  const repositories = {
    posts: repositoryWithAxios('posts'),
    users: repositoryWithAxios('users')
    //...
  }

  inject('repositories', repositories)
}

进一步阅读：在 Nuxt.js 中组织和解耦 API 调用

Answer 2

我将为我的投资组合提供一个服务层实现示例，以创建仪表板，其中显示有关我的 github 和 stackoverflow 配置文件的一些静态信息，为此，我在services项目根目录中创建了一个名为的文件夹：

pages
services
  |_AxiosConfig.js
  |_GitHubService.js
  |_StackoverflowService.js
   ...

在AxiosConfig.js我放置的文件中，我创建了一个 axios 实例及其配置：

pages
services
  |_AxiosConfig.js
  |_GitHubService.js
  |_StackoverflowService.js
   ...

然后在我的文件中导入了我用来满足我的请求的GitHubService.jsaxios 实例 ：clientAPI

import axios from 'axios';

const clientAPI = url =>
  axios.create({
    baseURL: url,
    withCredentials: false,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
   
  });

export default clientAPI;

然后在我的页面中我使用asyncData钩子来获取我的数据：

import clientAPI from './AxiosConfig';

const baseURL = 'https://api.github.com';
export default {
  getUser(name) {
    return clientAPI(baseURL).get('/users/' + name);
  },
  getRepos(name){
    return clientAPI(baseURL).get('/users/' + name+'/repos');

  },
  getEvents(name,page){

    return clientAPI(baseURL).get('/users/' + name+'/events?per_page=100&page='+page);

  },
  getLastYearCommits(name,repo){

    return clientAPI(baseURL).get('/repos/' + name+'/'+repo+'/stats/commit_activity');

  }

};