আনার ভূমিকা()

fetch() API উইন্ডো অবজেক্টে অবতরণ করছে এবং XHR প্রতিস্থাপন করতে চাইছে

Matt Gaunt

এত লম্বা XMLHttpRequest

fetch() আপনাকে XMLHttpRequest (XHR) এর মতো নেটওয়ার্ক অনুরোধ করতে দেয়। প্রধান পার্থক্য হল যে ফেচ API প্রতিশ্রুতি ব্যবহার করে, যা একটি সহজ এবং ক্লিনার API সক্ষম করে, কলব্যাক হেল এড়িয়ে যায় এবং XMLHttpRequest-এর জটিল API মনে রাখতে হয়।

ব্রাউজার সমর্থন

• 42
• 14
• 39
• 10.1

উৎস

Fetch API Chrome 40 থেকে সার্ভিস ওয়ার্কার গ্লোবাল স্কোপে পাওয়া যাচ্ছে, কিন্তু এটি Chrome 42-এ উইন্ডো স্কোপে সক্ষম হবে। এছাড়াও GitHub-এর দ্বারা একটি বরং আনা পলিফিল রয়েছে যা আপনি আজ ব্যবহার করতে পারেন।

আপনি যদি আগে কখনো প্রতিশ্রুতি ব্যবহার না করে থাকেন, তাহলে JavaScript প্রতিশ্রুতির ভূমিকা দেখুন।

মৌলিক আনয়ন অনুরোধ

চলুন শুরু করা যাক একটি XMLHttpRequest এর সাথে বাস্তবায়িত একটি সাধারণ উদাহরণ এবং তারপর fetch এর সাথে তুলনা করে। আমরা শুধু একটি URL অনুরোধ করতে চাই, একটি প্রতিক্রিয়া পেতে এবং JSON হিসাবে এটিকে পার্স করতে চাই৷

XMLHttp অনুরোধ

একটি XMLHttpRequest জন্য সফলতা এবং ত্রুটির কেসগুলি পরিচালনা করার জন্য দুটি শ্রোতাকে সেট করতে হবে এবং open() এবং send() করার জন্য একটি কল করতে হবে। MDN ডক্স থেকে উদাহরণ ।

function reqListener() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function reqError(err) {
    console.log('Fetch Error :-S', err);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

আনুন

আমাদের আনার অনুরোধটি এইরকম দেখায়:

fetch('./api/some.json')
    .then(
    function(response) {
        if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
            response.status);
        return;
        }

        // Examine the text in the response
        response.json().then(function(data) {
        console.log(data);
        });
    }
    )
    .catch(function(err) {
    console.log('Fetch Error :-S', err);
    });

আমরা JSON হিসাবে প্রতিক্রিয়া পার্স করার আগে প্রতিক্রিয়া স্থিতি 200 কিনা তা পরীক্ষা করে শুরু করি।

একটি fetch() অনুরোধের প্রতিক্রিয়া হল একটি স্ট্রীম অবজেক্ট, যার মানে হল যে যখন আমরা json() পদ্ধতিতে কল করি, তখন একটি প্রতিশ্রুতি ফেরত দেওয়া হয় যেহেতু স্ট্রীমের রিডিং অ্যাসিঙ্ক্রোনাসভাবে ঘটবে।

প্রতিক্রিয়া মেটাডেটা

আগের উদাহরণে আমরা রেসপন্স অবজেক্টের স্ট্যাটাস দেখেছি এবং সেইসাথে JSON হিসেবে রেসপন্স পার্স করতে হয়। অন্যান্য মেটাডেটা যা আমরা অ্যাক্সেস করতে চাই, যেমন শিরোনাম, নীচে চিত্রিত করা হয়েছে।

fetch('users.json').then(function(response) {
    console.log(response.headers.get('Content-Type'));
    console.log(response.headers.get('Date'));

    console.log(response.status);
    console.log(response.statusText);
    console.log(response.type);
    console.log(response.url);
});

প্রতিক্রিয়া প্রকার

যখন আমরা একটি আনার অনুরোধ করি, তখন প্রতিক্রিয়াটি " basic ", " cors " বা " opaque " এর একটি response.type দেওয়া হবে৷ এই types নির্দেশ করে যে সংস্থানটি কোথা থেকে এসেছে এবং আপনি কীভাবে প্রতিক্রিয়া বস্তুর সাথে আচরণ করবেন তা জানাতে ব্যবহার করা যেতে পারে।

যখন একই উত্সের একটি সংস্থানের জন্য একটি অনুরোধ করা হয়, তখন প্রতিক্রিয়াটির একটি basic ধরন থাকবে এবং আপনি প্রতিক্রিয়া থেকে কী দেখতে পারেন তার উপর কোনও বিধিনিষেধ নেই৷

যদি অন্য উৎসের একটি রিসোর্সের জন্য অনুরোধ করা হয় যা CORs হেডারগুলি প্রদান করে, তাহলে ধরনটি হল cors । cors এবং basic প্রতিক্রিয়াগুলি প্রায় অভিন্ন ব্যতীত যে একটি cors প্রতিক্রিয়া শিরোনামগুলিকে সীমাবদ্ধ করে যা আপনি Cache-Control , Content-Language , Content-Type , Expires , Last-Modified , এবং Pragma দেখতে পারেন৷

একটি opaque প্রতিক্রিয়া হল একটি ভিন্ন উৎসের একটি রিসোর্সের জন্য করা অনুরোধের জন্য যা CORS হেডার ফেরত দেয় না। একটি অস্বচ্ছ প্রতিক্রিয়ার সাথে আমরা প্রত্যাবর্তিত ডেটা পড়তে বা অনুরোধের স্থিতি দেখতে সক্ষম হব না, অর্থাৎ অনুরোধটি সফল হয়েছে কিনা তা আমরা পরীক্ষা করতে পারব না।

আপনি একটি আনয়ন অনুরোধের জন্য একটি মোড সংজ্ঞায়িত করতে পারেন যেমন শুধুমাত্র কিছু অনুরোধের সমাধান হবে। আপনি যে মোডগুলি সেট করতে পারেন তা নিম্নরূপ:

• same-origin শুধুমাত্র একই উৎসের সম্পদের অনুরোধের জন্য সফল হয়, অন্য সব অনুরোধ প্রত্যাখ্যান করা হবে।
• cors একই-উৎস এবং অন্যান্য উত্সের সম্পদের জন্য অনুরোধের অনুমতি দেবে যা উপযুক্ত CORs শিরোনাম ফেরত দেয়।
• cors-with-forced-preflight প্রকৃত অনুরোধ করার আগে সর্বদা একটি preflight চেক করবে।
• no-cors উদ্দেশ্য এমন অন্য উৎসের কাছে অনুরোধ করা যাতে CORS শিরোনাম নেই এবং এর ফলে একটি opaque প্রতিক্রিয়া দেখা দেয়, কিন্তু যেমন বলা হয়েছে, এই মুহূর্তে উইন্ডো গ্লোবাল স্কোপে এটি সম্ভব নয়।

মোডটি সংজ্ঞায়িত করতে, একটি অপশন অবজেক্টকে fetch রিকোয়েস্টে দ্বিতীয় প্যারামিটার হিসেবে যোগ করুন এবং সেই অবজেক্টে মোডটি সংজ্ঞায়িত করুন:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
    .then(function(response) {
    return response.text();
    })
    .then(function(text) {
    console.log('Request successful', text);
    })
    .catch(function(error) {
    log('Request failed', error)
    });

চেইনিং প্রতিশ্রুতি

প্রতিশ্রুতির একটি মহান বৈশিষ্ট্য হল তাদের একত্রে বেঁধে রাখার ক্ষমতা। আনার জন্য, এটি আপনাকে আনার অনুরোধ জুড়ে যুক্তি শেয়ার করতে দেয়।

আপনি যদি একটি JSON API এর সাথে কাজ করেন তবে আপনাকে প্রতিটি প্রতিক্রিয়ার জন্য স্থিতি পরীক্ষা করতে হবে এবং JSON পার্স করতে হবে। আপনি স্ট্যাটাস সংজ্ঞায়িত করে আপনার কোডকে সহজ করতে পারেন এবং JSON আলাদা ফাংশনে পার্সিং করে যা প্রতিশ্রুতি দেয়, আপনাকে শুধুমাত্র চূড়ান্ত ডেটা এবং ত্রুটির কেস পরিচালনার বিষয়ে চিন্তা থেকে মুক্ত করে।

function status(response) {
    if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
    } else {
    return Promise.reject(new Error(response.statusText))
    }
}

function json(response) {
    return response.json()
}

fetch('users.json')
    .then(status)
    .then(json)
    .then(function(data) {
    console.log('Request succeeded with JSON response', data);
    }).catch(function(error) {
    console.log('Request failed', error);
    });

আমরা status ফাংশনটি সংজ্ঞায়িত করি যা response.status চেক করে এবং Promise.resolve() বা Promise.reject() এর ফলাফল প্রদান করে, যা একটি সমাধান করা বা প্রত্যাখ্যান করা প্রতিশ্রুতি প্রদান করে। এটি আমাদের fetch() চেইনে বলা প্রথম পদ্ধতি, যদি এটি সমাধান হয়, তাহলে আমরা আমাদের json() পদ্ধতিকে কল করি যা আবার response.json() কল থেকে একটি প্রতিশ্রুতি প্রদান করে। এর পরে আমাদের পার্স করা JSON এর একটি অবজেক্ট আছে। পার্সিং ব্যর্থ হলে প্রতিশ্রুতি প্রত্যাখ্যান করা হয় এবং ক্যাচ স্টেটমেন্ট কার্যকর করা হয়।

এর সাথে দুর্দান্ত জিনিসটি হল যে আপনি আপনার সমস্ত আনার অনুরোধ জুড়ে যুক্তি ভাগ করতে পারেন, কোডটি বজায় রাখা, পড়া এবং পরীক্ষা করা সহজ করে তোলে।

পোস্ট অনুরোধ

ওয়েব অ্যাপ্লিকেশানগুলির জন্য একটি POST পদ্ধতি সহ একটি API কল করতে এবং অনুরোধের মূল অংশে কিছু পরামিতি সরবরাহ করতে চাওয়া অস্বাভাবিক নয়৷

এটি করার জন্য আমরা fetch() বিকল্পগুলিতে method এবং body প্যারামিটার সেট করতে পারি।

fetch(url, {
    method: 'post',
    headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
    })
    .then(json)
    .then(function (data) {
    console.log('Request succeeded with JSON response', data);
    })
    .catch(function (error) {
    console.log('Request failed', error);
    });

একটি আনার অনুরোধ সহ শংসাপত্র পাঠানো হচ্ছে৷

আপনি যদি কুকিজের মতো শংসাপত্র সহ একটি আনার অনুরোধ করতে চান, তাহলে আপনাকে অনুরোধের credentials "include" করতে সেট করতে হবে।

fetch(url, {
    credentials: 'include'
})

FAQ

আমি কিভাবে একটি fetch() অনুরোধ বাতিল করব?

এই মুহুর্তে একটি আনা বাতিল করার কোন উপায় নেই, তবে এটি GitHub এ আলোচনা করা হচ্ছে। এই লিঙ্কের জন্য H/T @jaffathecake .

একটি পলিফিল আছে?

আনার জন্য গিটহাবের একটি পলিফিল রয়েছে । এটি নির্দেশ করার জন্য H/T @Nexii .

কেন "নো-কর্স" পরিষেবা কর্মীদের মধ্যে সমর্থিত কিন্তু উইন্ডো নয়?

এটি একটি নিরাপত্তা উদ্বেগের কারণে হয়েছে, আপনি এখানে আরও জানতে পারেন।