При работе с API в веб-разработке крайне важно иметь четкую и организованную структуру кода. Изолирование функции выборки API — эффективный способ добиться этого. В этой статье мы рассмотрим различные методы изоляции выборки API в вашем коде, предоставив вам примеры кода и лучшие практики.

Метод 1: использование обещаний и Async/Await

async function fetchAPI(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('API fetch error:', error);
    throw error;
  }
}
// Usage
fetchAPI('https://api.example.com/data')
  .then((data) => {
    // Handle the fetched data
  })
  .catch((error) => {
    // Handle the error
  });

Метод 2: создание пользовательской оболочки извлечения

async function customFetch(url, options) {
  try {
    const response = await fetch(url, options);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('API fetch error:', error);
    throw error;
  }
}
// Usage
const options = {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    // Additional headers if needed
  },
};
customFetch('https://api.example.com/data', options)
  .then((data) => {
    // Handle the fetched data
  })
  .catch((error) => {
    // Handle the error
  });

Метод 3: использование библиотеки Axios

import axios from 'axios';
async function fetchAPI(url) {
  try {
    const response = await axios.get(url);
    const data = response.data;
    return data;
  } catch (error) {
    console.error('API fetch error:', error);
    throw error;
  }
}
// Usage
fetchAPI('https://api.example.com/data')
  .then((data) => {
    // Handle the fetched data
  })
  .catch((error) => {
    // Handle the error
  });

Метод 4. Использование перехватчиков выборки (с Axios)

import axios from 'axios';
// Create an Axios instance with interceptors
const apiClient = axios.create();
// Request interceptor
apiClient.interceptors.request.use(
  (config) => {
    // Modify request config if needed (e.g., add headers)
    return config;
  },
  (error) => {
    console.error('API request error:', error);
    return Promise.reject(error);
  }
);
// Response interceptor
apiClient.interceptors.response.use(
  (response) => {
    // Modify response data if needed
    return response;
  },
  (error) => {
    console.error('API response error:', error);
    return Promise.reject(error);
  }
);
// Usage
apiClient.get('https://api.example.com/data')
  .then((response) => {
    const data = response.data;
    // Handle the fetched data
  })
  .catch((error) => {
    // Handle the error
  });

Изолирование выборки API в вашем коде повышает удобство обслуживания, читаемость и возможность повторного использования. Используя такие методы, как Promises и Async/Await, создавая собственные оболочки выборки, используя такие библиотеки, как Axios, или используя перехватчики выборки, вы можете создать чистую и модульную структуру кода, которая улучшает рабочий процесс разработки. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и воспользуйтесь преимуществами хорошо изолированной функции извлечения данных через API.