Какими способами можно взаимодействовать с backend (axios, fetch и т.д.)?

// Базовый GET запрос
fetch('/api/users')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(users => {
    console.log(users);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// POST запрос с настройками
fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token
  },
  body: JSON.stringify({
    name: 'John',
    email: 'john@example.com'
  })
})
.then(response => response.json())
.then(data => console.log(data));

// Установка: npm install axios
import axios from 'axios';

// Базовые запросы
axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// POST запрос
axios.post('/api/users', {
  name: 'John',
  email: 'john@example.com'
}, {
  headers: {
    'Authorization': 'Bearer ' + token
  }
});

// Создание экземпляра с настройками
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users');
xhr.responseType = 'json';

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.error('Error:', xhr.statusText);
  }
};

xhr.onerror = function() {
  console.error('Request failed');
};

xhr.send();

const socket = new WebSocket('ws://api.example.com/ws');

socket.onopen = function(event) {
  console.log('WebSocket connection established');
  socket.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
};

socket.onmessage = function(event) {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
};

socket.onclose = function(event) {
  console.log('WebSocket connection closed');
};

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
});

// Запрос
client.query({
  query: gql`
    query GetUsers {
      users {
        id
        name
        email
      }
    }
  `
}).then(result => console.log(result.data));

import { useQuery } from 'react-query';
import { request } from 'graphql-request';

const API_URL = 'https://api.example.com/graphql';

function UsersList() {
  const { data, isLoading, error } = useQuery('users', () =>
    request(API_URL, `
      query {
        users {
          id
          name
        }
      }
    `)
  );

  if (isLoading) return <div>Loading...</div>;
  return <div>{/* render users */}</div>;
}

// Firebase SDK
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

const querySnapshot = await getDocs(collection(db, "users"));

// Stripe SDK
import { loadStripe } from '@stripe/stripe-js';

const stripe = await loadStripe('pk_test_...');
const { error } = await stripe.redirectToCheckout({ /* options */ });

class ApiClient {
  constructor(baseURL) {
    this.baseURL = baseURL;
  }

  async request(endpoint, options = {}) {
    const url = `${this.baseURL}${endpoint}`;
    const config = {
      headers: {
        'Content-Type': 'application/json',
        ...options.headers,
      },
      ...options,
    };

    if (config.body) {
      config.body = JSON.stringify(config.body);
    }

    const response = await fetch(url, config);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    return response.json();
  }

  get(endpoint) {
    return this.request(endpoint);
  }

  post(endpoint, body) {
    return this.request(endpoint, { method: 'POST', body });
  }
}

// Использование
const api = new ApiClient('https://api.example.com');
const users = await api.get('/users');