Fetch API — ժամանակակից Promise-հիմնված մեթոդ HTTP request-ների համար

Fetch API ներկայացված է որպես ժամանակակից փոխարինում XMLHttpRequest-ին՝ նախատեսված ցանցային հարցումների ավելի պարզ, հարմար և ճկուն իրականացման համար։ Այն բազային Promise-հիմնված API է, որը թույլ է տալիս գրել ավելի կարճ, ընթեռնելի և մաքուր asyncronous JavaScript կոդ՝ օգտագործելով async/await սինթաքսը։

Մանրամասներ Fetch API-ի մասին.

• Ավտոմատ վերադարձնում է Promise, որը լուծվում է, երբ ստացվում է Response օբյեկտ
• Response օբյեկտն ապահովում է բազմաթիվ մեթոդներ՝ տվյալները վերլուծելու համար (json(), text(), blob(), arrayBuffer() և այլն)
• Աջակցում է լայն սպեկտր HTTP մեթոդների, հեդերների, բոդիների, և CORS քաղաքականությունների կարգավորմանը
• Լիովին աջակցում է async/await սինթաքսին, ինչը հեշտացնում է կոդի հոսքի կառավարումը

Դիտարկենք պարզ օրինակ՝ GET հարցում կատարելու և JSON պատասխան ստանալու համար՝

     fetch("https://jsonplaceholder.typicode.com/posts/1") 
            .then(response => {
                if (!response.ok) {
                    throw new Error("Network response was not ok " + response.statusText); 
                }
                
                return response.json(); 
            })
            .then(data => { console.log("Response data:", data); })
            .catch(error => { console.error("Fetch error:", error); });

Կամ async/await սինթաքսով՝

     async function fetchPost() {
            try {
                const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
                if (!response.ok) { throw new Error("Network response was not ok " + response.status); }
                const data = await response.json(); console.log("Response data:", data); 
            } catch (error) {
                console.error("Fetch error:", error); 
            } 
        }
        fetchPost();

Fetch API-ի առավելություններն են՝

• Կոդի կրճատված և պարզ տեսք՝ Promise-ների և async/await-ի շնորհիվ
• Լավ ինտեգրում է ժամանակակից JavaScript գործիքների և async ֆունկցիաների հետ
• Հեշտ է զարգացնել և պահպանել մեծ ծրագրերում
• Լայն աջակցություն է ստանում ժամանակակից բրաուզերներում

Սահմանափակումներ և ուշադրության առարկաներ՝

• Fetch չի ապահովում ավտոմատ request timeout, ինչը պետք է կառավարել ձեռքով
• Չի ապահովում մի քանի հարմարավետ իրադարձություններ, ինչպիսիք են XHR-ի progress event-ները
• CORS քաղաքականությունները պետք է ճիշտ կարգավորվեն սերվերային կողմից, հակառակ դեպքում հնարավոր են բլոկավորում

Ընդհանուր առմամբ՝ Fetch API-ն առաջարկում է հարմար, ժամանակակից և «մաքուր» եղանակ HTTP հարցումներ իրականացնելու համար՝ դարձնելով JavaScript ցանցային կոդը ավելի ընթեռնելի և կայուն։

Հաջորդում կանդրադառնանք համեմատական վերլուծությանը՝ XMLHttpRequest-ի և Fetch API-ի միջև՝ հասկանալու առավելություններն ու թերությունները և երբ ո՞ր մեթոդն է նախընտրելի օգտագործել։