XMLHttpRequest vs Fetch API — Համեմատական վերլուծություն

Երբ խոսում ենք JavaScript-ում HTTP հարցումներ կատարելու մասին, երկու հիմնական ներկառուցված տարբերակ ունենք՝ XMLHttpRequest (XHR) և Fetch API։ Չնայած երկուսն էլ ծառայում են նույն նպատակին՝ ցանցային տվյալներ ստանալ կամ ուղարկել, դրանց կիրառման ձևերն ու կարողությունները զգալիորեն տարբեր են։ Այս հոդվածում համեմատական վերլուծությամբ կտեսնենք դրանց տարբերությունները, առավելություններն ու թերությունները՝ պրոֆեսիոնալ տեսանկյունից։

---

1. Կոդի կառուցվածք և ընթեռնելիություն

      // XMLHttpRequest (XHR) 
     const xhr = new XMLHttpRequest(); xhr.open("GET", url); 
     xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText)); 
        } 
    };
    xhr.send();
    
    // Fetch API
    fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));

Կարծիք՝ Fetch API-ն ակնհայտորեն ունի ավելի պարզ, կարճ և ընթեռնելի կառուցվածք, հատկապես async/await-ի օգտագործման դեպքում։

---

2. Աջակցություն Promises և async/await

• XHR: Ոչ մի տեղում Promise-ներ չի օգտագործվում։ Պահանջվում է callback-ների հետ աշխատել։
• Fetch: Promise-հիմնված է, հեշտ ինտեգրվում է async/await-ի հետ։

Եզրակացություն: Fetch API-ն ավելին է համատեղելի ժամանակակից JavaScript հոսքերի հետ։

---

3. Առաջադեմ կառավարում

• XHR: Աջակցում է բարդ վերահսկում՝ ինչպես օրինակ՝ progress իրադարձություն, կարգավորված timeouts, abort() մեթոդ։
• Fetch: Բազային API-ում բացակայում է timeout և progress control (բայց AbortController հնարավոր է օգտագործել):

     // Fetch cancellation 
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);
    
    try {
        const response = await fetch(url, { signal: controller.signal });
    } catch (error) {
        if (error.name === "AbortError") {
            console.log("Request timed out");
        }
    }

Եզրակացություն: XHR-ն ապահովում է ավելի շատ control «out of the box»։ Fetch-ում պետք է ձեռքով ավելացնել։

---

4. Պատասխանի մշակումը

• XHR: Պատասխանը գալիս է որպես responseText (տեքստ) կամ responseXML։ JSON-ի պարագայում՝ պահանջվում է JSON.parse()։
• Fetch: Առաջարկում է մի շարք մեթոդներ՝ json(), text(), blob(), formData() և այլն՝ պարզ և հարմար:

Եզրակացություն: Fetch-ն ունի ավելի պարզ ու հարմար API՝ տվյալները վերլուծելու համար։

---

5. Աջակցություն և համատեղելիություն բրաուզերներում

• XHR: Աջակցվում է գրեթե բոլոր բրաուզերներում՝ ներառյալ հին IE տարբերակները։
• Fetch: Աջակցվում է ժամանակակից բրաուզերներում։ IE-ում՝ բացակայում է։

Եզրակացություն: Եթե թիրախավորում եք հին բրաուզերներ, ապա XHR-ը դեռ կարող է պահանջված լինել։

---

Եզրափակիչ վերլուծություն

Չափանիշ	XMLHttpRequest	Fetch API
Promise support	Ոչ	Այո
Կոդի պարզություն	Դժվար ընթեռնելի, callback-heavy	Պարզ և async-friendly
Timeout / Abort	Աջակցվում է	Պետք է օգտագործել AbortController
Progress event	Աջակցվում է	Չի աջակցվում
Support in old browsers	Լիարժեք	Մասնակի (ոչ IE)

Ընդհանուր եզրակացություն՝ ժամանակակից ծրագրերում, երբ աջակցությունը IE-ի համար պարտադիր չէ, Fetch API-ն հստակ հաղթող է։ Այն պարզ է, ընթեռնելի, ավելի մաքուր, և լիովին համատեղելի ժամանակակից async կոդերի հետ։ Մինչդեռ XMLHttpRequest-ը օգտակար է որոշ դեպքերում, երբ ձեզ անհրաժեշտ է ավելի մեծ վերահսկողություն կամ հին բրաուզերների աջակցություն։

---