在运行NUXT.js和Axios时如何避免代码重复? [英] How to avoid code duplication when running NUXT.js and Axios?

问题描述

如果类似的代码(如示例中)在不同的组件中重复，但是我在函数参数中传递的名称稍有不同

If similar code (as in the example) is duplicated in different components but with slight differences in the name of what I pass in the function parameters

可以使用哪些选项将代码分别放置到某个地方，然后使用自定义参数将其引入到我的组件中? (分别针对每个组件)

What are the options to take the code somewhere separately and then introduce that into my components with custom parameters? (individually for each component)

我应该通过插件执行此操作吗? 如果是这样，那我该如何在组件上实现各个必要的参数，以及如何仅在这些组件上连接插件，而在其他任何地方都没有?

Should I do this through a plugin? If so, then how can I implement the individually necessary parameters on the components + how to connect the plugin only on these components and nowhere else?

推荐答案

对于axios调用，您可以创建一个函数或类，然后每次将其导入

For axios calls, you can create a function or class and import it every time

类似于services/axios

import axios from 'axios';


const axiosInstance = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL,
    headers: {
        'Access-Control-Allow-Origin': '*',
        accept: 'Accept: application/json',
    },
});

export default axiosInstance;

然后在utils/requests

import axiosInstance from '@/services/axios';

const apiRequest = async (axiosConfig) => {
  try {
      const response = await axiosInstance(axiosConfig);
      return {
        success: true,
        data: response.data.data || response.data;
      }
  } catch (error) {
      if (error.response) {
       error = error.response
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
       error = error.request
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
       error = error.message
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
      return {
        success: false,
        error
      }
  }
};

export const getRequest = async (url) =>
    await apiRequest({
        method: 'GET',
        url,
    });

export const postRequest = async(url, requestBody) =>
    await apiRequest({
        method: 'POST',
        url,
        data: requestBody
    });

然后在组件中导入getRequest和postRequest方法

You then import the getRequest and postRequest methods in the components

import { getRequest, postRequest } from '@/utils/requests';

 
const response = await postRequest('/url', requestBody);
 
if (response.success) {
   // do stuff on success
 } else {
  // error message
 }

这篇关于在运行NUXT.js和Axios时如何避免代码重复?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！