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

Posted 2023-02-22

【中文标题】Nuxt.js - API 调用的最佳场所

【英文标题】：Nuxt.js - The best place for API calls

【发布时间】：2020-12-20 21:16:54

【问题描述】：

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

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

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

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

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

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

我首先想到的是 DRY，即创建用于获取数据并在需要的地方使用的服务层。

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

【参考方案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)

进一步阅读：Organize and decouple your API calls in Nuxt.js

【讨论】：

现在，如果我们在 nuxt.config.js 的插件数组中注册该存储库文件，那不是一个坏习惯吗？因为那样的话，它将被导入到每个 vue 组件中，但是，每个 repo 都应该在需要的地方导入。我正在考虑内存优化。

我在这里提出了与单独问题相同的问题***.com/questions/70185004/…

【参考方案2】：

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

pages
services
  |_AxiosConfig.js
  |_GitHubService.js
  |_***Service.js
   ...

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

import axios from 'axios';

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

export default clientAPI;

然后在我的 GitHubService.js 中，我导入了我习惯于请求的名为 clientAPI 的 axios 实例：

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');

  

;

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

import GitHubService from '../../services/GitHubService'

export default 
 ...
  async asyncData( error ) 
    try 
      const  data  = await GitHubService.getUser("boussadjra");
      const resRepos = await GitHubService.getRepos("boussadjra");
      return 
        user: data,
        repos: resRepos.data
      ;
     catch (e) 
      error(
        statusCode: 503,
        message: "We cannot find the user"
      );
    
  

【讨论】：

感谢您的重播。最后，我使用了类似的方法，但也利用了 nuxt 中插件的强大功能，动态注入了 $axios 实例。

【参考方案3】：

我想在我的 service/service.js 文件中使用 axios，所以我没有传递 axios，而是像这样直接访问它：

export default 
  async fetchArticle() 
    let response = await $nuxt.$axios.$get('/api-url')
    return response
  ,

【参考方案4】：

在 Nuxt 中，如果您只想获取数据而不将其保存在存储中，则可以使用 asyncData 函数，该函数异步加载数据（来自 API 调用等）并将其推送到组件的数据对象中渲染之前。