Web Fetch API

يسمح لنا ال "Fetch API" ب انشاء HTTP requests مباشرة مع الخادم دون الحاجة الي استخدام " XMLHttpRequest "

Sending a Request

تستطيع انشاء طلب الي خادم الويب HTTP request عن طريق استخدام الدالة ( )fetch

تأخذ هذه الدالة Parameter واحد وهو يحتوي علي عنوان URL للعنصر الذي تريد الحصول عليه من الخادم

HTML

let response = fetch(url);

HTML

fetch(url)
    .then(response => {
        /* handle the response */
    })
    .catch(error => {
        /* handle the error */
    });

إذا كانت محتويات الرد Response هي عبارة عن نص ، يمكنك استخدام دالة text ()

تقوم الدالة text () بأرجاع Promise يتناسب مع المحتويات الخاصة بالعنصر الذي تم الحصول عليه من الخادم

HTML

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));

المثال التالي يقوم بعرض المحتوي الموجود بداخل ملف

HTML

fetch(file)
.then(x => x.text())
.then(y => myDisplay(y));

هذا هو المثال السابق ولكن باستخدام ال async / await

HTML

async function getText(file) {
  let x = await fetch(file);
  let y = await x.text();
  myDisplay(y);
}