جلب/XMLHttpRequest في TypeScript

تشرح هذه المقالة جلب/XMLHttpRequest في TypeScript۔

يمكنك التعرف على كيفية استخدام Fetch API و XMLHttpRequest، بالإضافة إلى الاختلافات بينهما.۔

YouTube Video

جلب/XMLHttpRequest في TypeScript

في TypeScript، يتم عادةً تنفيذ طلبات HTTP باستخدام اثنين من واجهات برمجة التطبيقات: Fetch API و XMLHttpRequest۔ باستخدام TypeScript، يمكنك تقديم فحص الأنواع للطلبات والاستجابات عند إجراء الاتصال غير المتزامن مع هذه الواجهات البرمجية، مما يتيح لك كتابة كود أكثر أمانًا۔ فيما يلي، سنوضح كيفية استخدام كل منهما۔

Fetch API

Fetch API هي واجهة برمجة تطبيقات تعتمد على الوعد وتُستخدم لإجراء الاتصالات غير المتزامنة (طلبات HTTP) ببساطة۔ في TypeScript، يمكنك إجراء الطلبات باستخدام طريقة fetch ومعالجة الاستجابات بطريقة آمنة للأنواع۔

الاستخدام الأساسي

فيما يلي مثال أساسي باستخدام طلب GET۔

 1const url = 'https://jsonplaceholder.typicode.com/posts';
 2
 3fetch(url)
 4    .then(response => {
 5        if (!response.ok) {
 6        throw new Error('Network response was not ok');
 7        }
 8        return response.json();  // Parse the response as JSON
 9    })
10    .then(data => {
11        console.log(data);
12    })
13    .catch(error => {
14        console.error('Fetch error:', error);
15    });

• يرسل هذا الكود طلب GET إلى عنوان URL المحدد، ويحلل الاستجابة المستلمة كـ JSON، ويعرضها في وحدة التحكم.۔

التعامل الآمن مع البيانات في TypeScript

نظرًا لأن الاستجابة من طريقة fetch تكون غير واضحة النوع، يمكنك الاستفادة من فحص الأنواع في TypeScript عن طريق تحديد نوع الاستجابة صراحةً۔

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9const url = 'https://jsonplaceholder.typicode.com/posts';
10
11fetch(url)
12    .then(response => response.json())
13    .then((data: Post[]) => {
14        data.forEach(post => {
15            console.log(`Title: ${post.title}`);
16        });
17    })
18    .catch(error => {
19        console.error('Error fetching data:', error);
20    });

• يطبق هذا الكود نوع Post على البيانات المسترجعة باستخدام fetch، ويعالج الاستجابة بطريقة آمنة من حيث النوع، ويعرض عنوان كل منشور في وحدة التحكم.۔

مثال على طلب POST

عند إرسال البيانات إلى الخادم، استخدم طريقة POST۔ لإرسال JSON في جسم الطلب، حدد headers و body۔

 1const postData = {
 2    title: 'foo',
 3    body: 'bar',
 4    userId: 1
 5};
 6
 7fetch('https://jsonplaceholder.typicode.com/posts', {
 8        method: 'POST',
 9        headers: {
10            'Content-Type': 'application/json'
11        },
12        body: JSON.stringify(postData)
13    })
14    .then(response => response.json())
15    .then(data => {
16        console.log('Created post:', data);
17    })
18    .catch(error => {
19        console.error('Error posting data:', error);
20    });

• يرسل هذا الكود البيانات بصيغة JSON إلى الخادم باستخدام طلب POST، ويتلقى الاستجابة كـ JSON، ويعرضها في وحدة التحكم.۔

Fetch باستخدام الوظائف غير المتزامنة (async/await)

باستخدام async/await في TypeScript، يمكنك كتابة معالجة غير متزامنة بشكل أبسط۔

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9async function fetchPosts() {
10    try {
11        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
12        if (!response.ok) {
13            throw new Error('Network response was not ok');
14        }
15        const data: Post[] = await response.json();
16        console.log(data);
17    } catch (error) {
18        console.error('Fetch error:', error);
19    }
20}
21
22fetchPosts();

• يجلب هذا الكود بيانات المنشورات بشكل غير متزامن باستخدام بنية async/await، ويعالج الاستجابة كنوع Post[]، ويعرضها في وحدة التحكم.۔

XMLHttpRequest

XMLHttpRequest هي واجهة برمجة تطبيقات أقدم وأكثر تعقيدًا بعض الشيء مقارنة بـ Fetch API، ولكن يمكن استخدامها عندما يكون التوافق مع المتصفح أو التحكم المتقدم أكثر أهمية۔

الاستخدام الأساسي لـ XMLHttpRequest

فيما يلي مثال باستخدام طلب GET۔

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onreadystatechange = function () {
 5    if (xhr.readyState === 4 && xhr.status === 200) {
 6        const data = JSON.parse(xhr.responseText);
 7        console.log(data);
 8    }
 9};
10
11xhr.send();

• يرسل هذا الكود طلب GET إلى عنوان URL المحدد باستخدام XMLHttpRequest، ويحلل الاستجابة كـ JSON، ويعرضها في وحدة التحكم.۔

مثال على طلب POST

عند إرسال البيانات إلى الخادم، حدد POST في طريقة open وأرسل البيانات باستخدام send۔

 1const xhr = new XMLHttpRequest();
 2xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
 3xhr.setRequestHeader('Content-Type', 'application/json');
 4
 5const postData = JSON.stringify({
 6    title: 'foo',
 7    body: 'bar',
 8    userId: 1
 9});
10
11xhr.onreadystatechange = function () {
12    if (xhr.readyState === 4 && xhr.status === 201) {
13        console.log('Created post:', xhr.responseText);
14    }
15};
16
17xhr.send(postData);

• يرسل هذا الكود البيانات بصيغة JSON إلى الخادم باستخدام طلب POST عبر XMLHttpRequest، ويعرض الاستجابة التي تحتوي على البيانات التي تم إنشاؤها في وحدة التحكم.۔

معالجة الأخطاء باستخدام XMLHttpRequest

يمكنك معالجة أخطاء الطلب باستخدام حدث onerror۔

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onerror = function () {
 5    console.error('Request failed');
 6};
 7
 8xhr.onload = function () {
 9    if (xhr.status === 200) {
10        console.log('Response:', xhr.responseText);
11    } else {
12        console.error('Error:', xhr.status);
13    }
14};
15
16xhr.send();

• ينفذ هذا الكود طلب GET باستخدام XMLHttpRequest، ويتعامل مع أخطاء الطلب باستخدام onerror، ويقوم بتسجيل الاستجابة بشكل مناسب في حالتي النجاح والفشل.۔

مقارنة بين Fetch API و XMLHttpRequest

الملخص

في TypeScript، يمكنك كتابة طلبات غير متزامنة بشكل مختصر وآمن نوعيًا باستخدام Fetch API.۔ من ناحية أخرى، XMLHttpRequest هو واجهة برمجة تطبيقات قديمة ولكن لا يزال من الممكن استخدامها في بعض الحالات.۔ بشكل عام، يُوصى باستخدام Fetch API البسيط والحديث، ولكن إذا كانت هناك حاجة لتوافق المتصفحات أو تتبع التقدم، يمكن أيضًا التفكير في استخدام XMLHttpRequest.۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video