Как избежать дублирования кода при запуске NUXT. js и Ax ios? - PullRequest
Новая
       65

Как избежать дублирования кода при запуске NUXT. js и Ax ios?

3 голосов
/ 01 августа 2020

введите сюда описание изображения

Если аналогичный код (как в примере) дублируется в разных компонентах, но с небольшими отличиями в названии того, что я передаю в параметрах функции

Какие варианты использовать код где-то отдельно, а затем ввести его в мои компоненты с настраиваемыми параметрами? (индивидуально для каждого компонента)

Должен ли я делать это через плагин? Если да, то как мне реализовать индивидуально необходимые параметры на компонентах + как подключить плагин только на этих компонентах и ​​больше нигде?

Ответы [ 3 ]

2 голосов
/ 01 августа 2020

Для вызовов ax ios вы можете создать функцию или класс и импортировать их каждый раз

Что-то вроде 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 в компоненты

component. vue

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

 
const response = await postRequest('/url', requestBody);
 
if (response.success) {
   // do stuff on success
 } else {
  // error message
 }
2 голосов
/ 01 августа 2020

Мы можем сделать это с помощью миксинов. Создайте файл js внутри папки миксинов, поместите туда эту функцию и добавьте этот файл миксина в файлы vue, чтобы использовать эту функцию.

1 голос
/ 01 августа 2020

Я использовал nuxt / ax ios. js для моего приложения nuxt. Вы можете использовать его как плагин.

В папке плагинов создайте файл axios.js

import axios from 'axios'

export default axios.create({
   baseURL: process.env.baseURL,
})

ПРИМЕЧАНИЕ. Я сохраняю базовый URL-адрес сервера, который будет вызываться для API в переменные среды с использованием dotenv lib. Таким образом, базовый URL-адрес устанавливается для всех выполняемых вызовов.

Затем импортируйте его в nuxt.config.js файл: 

module.exports = {
....
{
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
  ...
  },
}

СОВЕТ: Если вам нужно сохранить значение в ax ios как «токен» или «повар ie» глобально. Затем вы можете использовать ax ios по умолчанию метод 

axios.defaults.headers.common = { Authorization: `bearer ${token}` };
...