Sobes.tech
Հարցազրույցի օգնություն
Ռեսուրսներ
Հարցազրույցի պատրաստում
Ռեսուրսներ
Աշխատանքի որոնում
Ռեսուրսներ
Իրավական
Վերադարձ դեպի հարցեր
Junior

Ինչպե՞ս է տեղի ունենում front-end և back-end-ի փոխազդեցությունը։

sobes.tech AI

Պատասխան AI-ից

Կապը իրականացվում է HTTP(S) պրոտոկոլի միջոցով՝ օգտագործելով տարբեր մեթոդներ (GET, POST, PUT, DELETE և այլն): Frontend-ը ուղարկում է հարցումներ backend-ին տվյալներ ստանալու կամ ուղարկելու համար: Backend-ը մշակում է այդ հարցումները, անհրաժեշտության դեպքում շփվում է տվյալների բազայի հետ և ուղարկում պատասխան:

Հիմնական կապի եղանակները՝

  • REST API: Ամենատարածված մոտեցում: Backend-ը տրամադրում է վերջնակետերի (endpoints) հավաքածու, որոնց միջոցով frontend-ը կարող է կատարել գործողություններ: Տվյալները սովորաբար փոխանցվում են JSON ձևաչափով:

    // JSON պատասխան օրինակ backend-ից
{
  "users": [
    {
      "id": 1,
      "name": "Alex"
    },
    {
      "id": 2,
      "name": "Elena"
    }
  ]
}

  • GraphQL: Վերացական REST-ի: Frontend-ը հարցում է միայն անհրաժեշտ տվյալները՝ մեկ հարցումով: Սա թույլ է տալիս նվազեցնել հարցումների քանակը և փոխանցվող տվյալների ծավալը:

  • WebSockets: Позволяют установить двустороннее постоянное соединение между frontend и backend. Используется для приложений, требующих обмена данными в реальном времени (чаты, уведомления).

  • Server-Sent Events (SSE): Позволяют backend отправлять данные frontend'у в одностороннем порядке по HTTP-соединению. Используется для получения обновлений от сервера без постоянных запросов от клиента.

Տիպիկ սցենար՝

  1. Օգտագործողը կատարում է գործողություն frontend-ում (օրինակ՝ սեղմում է կոճակ):
  2. Frontend-ը ուղարկում է HTTP հարցում backend-ի համապատասխան վերջնակետին:
  3. Backend-ը ստանում է հարցումը, մշակում է այն (օրինակ՝ կատարում է տվյալների բազայից հարցում):
  4. Backend-ը ձևավորում է պատասխան (հաճախ JSON ձևաչափով) և ուղարկում է frontend-ին:
  5. Frontend-ը ստանում է պատասխան, մշակում տվյալները և թարմացնում է օգտագործողի ինտերֆեյսը:

JavaScript-ով frontend-ում AJAX հարցումի օրինակ՝

// Ուղարկում GET հարցում օգտվողների ցանկը ստանալու համար
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    // Ստացված տվյալների մշակումը
    console.log('Ստացված օգտվողներ:', data.users);
  })
  .catch(error => {
    // Գործընթացի սխալների մշակումը
    console.error('Սխալ օգտվողների ստացման ժամանակ:', error);
  });
ՆախորդՀաջորդը