فيما يلي أكثر الطرق شيوعًا لتقديم طلب HTTP في JavaScript

تحتوي JavaScript على وحدات وطرق رائعة لإجراء طلبات HTTP التي يمكن استخدامها لإرسال البيانات أو تلقيها من مورد من جانب الخادم. في هذه المقالة ، سنلقي نظرة على بعض الطرق الشائعة لتقديم طلبات HTTP في JavaScript.

اياكس

Ajax هي الطريقة التقليدية لتقديم طلب HTTP غير متزامن. يمكن إرسال البيانات باستخدام طريقة HTTP POST واستلامها باستخدام طريقة HTTP GET. دعونا نلقي نظرة ونقدم GETطلبًا. سأستخدم JSONPlaceholder ، واجهة برمجة تطبيقات REST مجانية على الإنترنت للمطورين الذين يعرضون بيانات عشوائية بتنسيق JSON.

لإجراء مكالمة HTTP في Ajax ، تحتاج إلى تهيئة XMLHttpRequest()طريقة جديدة ، وتحديد نقطة نهاية URL وطريقة HTTP (في هذه الحالة GET). أخيرًا ، نستخدم open()الطريقة لربط طريقة HTTP ونقطة نهاية عنوان URL معًا واستدعاء send()الطريقة لإيقاف الطلب.

نقوم بتسجيل استجابة HTTP لوحدة التحكم باستخدام XMLHTTPRequest.onreadystatechangeالخاصية التي تحتوي على معالج الحدث الذي سيتم استدعاؤه عند إطلاق readystatechangedالحدث.

const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }

إذا قمت بعرض وحدة التحكم في المستعرض الخاص بك ، فسوف تقوم بإرجاع مصفوفة من البيانات بتنسيق JSON. ولكن كيف نعرف أن الطلب قد تم؟ بمعنى آخر ، كيف يمكننا التعامل مع الردود مع Ajax؟

و onreadystatechangeالخاصية لديه طريقتين، readyStateو statusالتي تسمح لنا للتحقق من حالة الطلب لدينا.

إذا كانت readyStateتساوي 4 ، فهذا يعني أن الطلب قد تم. و readyStateالخاصية لديه 5 الردود. تعلم المزيد عن ذلك هنا.

بصرف النظر عن إجراء مكالمة Ajax مباشرةً باستخدام JavaScript ، هناك طرق أخرى أكثر فاعلية لإجراء استدعاء HTTP مثل $.Ajaxطريقة jQuery. سأناقش هؤلاء الآن.

طرق jQuery

يحتوي jQuery على العديد من الطرق للتعامل بسهولة مع طلبات HTTP. لاستخدام هذه الطرق ، ستحتاج إلى تضمين مكتبة jQuery في مشروعك.

$ .ajax

يعد jQuery Ajax أحد أبسط الطرق لإجراء مكالمة HTTP.

تأخذ طريقة $ .ajax العديد من المعاملات ، بعضها مطلوب والبعض الآخر اختياري. أنه يحتوي على خيارين رد successو errorللتعامل مع استجابة وردت.

$. طريقة get

يتم استخدام طريقة $ .get لتنفيذ طلبات GET. يتطلب الأمر معلمتين: نقطة النهاية ووظيفة رد الاتصال.

$ .post

و $.postالأسلوب هو طريقة أخرى لإضافة البيانات إلى الخادم. urlيتطلب الأمر ثلاث معاملات: the ، والبيانات التي تريد نشرها ، ووظيفة رد الاتصال.

$ .getJSON

على $.getJSONطريقة باسترداد فقط البيانات التي هي في شكل JSON. يتطلب الأمر معلمتين: الدالة urlو دالة رد الاتصال.

يحتوي jQuery على كل هذه الطرق لطلب البيانات أو نشرها على خادم بعيد. لكن يمكنك بالفعل وضع كل هذه الطرق في $.ajaxطريقة واحدة: الطريقة ، كما هو موضح في المثال أدناه:

جلب

fetchهي واجهة برمجة تطبيقات ويب قوية جديدة تتيح لك تقديم طلبات غير متزامنة. في الواقع ، fetchهي واحدة من أفضل الطرق المفضلة لدي لتقديم طلب HTTP. تقوم بإرجاع "الوعد" الذي يعد أحد الميزات الرائعة لـ ES6.إذا لم تكن معتادًا على ES6 ، فيمكنك القراءة عنه في هذه المقالة. تسمح لنا الوعود بمعالجة الطلب غير المتزامن بطريقة أكثر ذكاءً. دعونا نلقي نظرة على كيفية fetchالعمل تقنيًا.

و fetchيأخذ وظيفة واحدة المعلمة المطلوبة: من endpointURL. يحتوي أيضًا على معلمات اختيارية أخرى كما في المثال أدناه:

كما ترى ، fetchله مزايا عديدة لعمل طلبات HTTP. يمكنك معرفة المزيد عن ذلك هنا. بالإضافة إلى ذلك ، ضمن عملية الجلب ، توجد وحدات وإضافات أخرى تسمح لنا بإرسال واستقبال طلب من وإلى جانب الخادم ، مثل axios.

أكسيوس

Axios هي مكتبة مفتوحة المصدر لتقديم طلبات HTTP وتوفر العديد من الميزات الرائعة. دعونا نلقي نظرة على كيفية عملها.

الاستعمال:

أولاً ، ستحتاج إلى تضمين Axios. هناك طريقتان لتضمين Axios في مشروعك.

أولاً ، يمكنك استخدام npm:

npm install axios --save

ثم ستحتاج إلى استيراده

import axios from 'axios'

ثانيًا ، يمكنك تضمين المحاور باستخدام CDN.

تقديم طلب مع أكسيوس:

مع أكسيوس يمكنك استخدام GETو POSTاسترداد وآخر البيانات من الخادم.

احصل على:

axiosتأخذ معلمة واحدة مطلوبة ، ويمكن أن تأخذ معلمة اختيارية ثانية أيضًا. هذا يأخذ بعض البيانات كاستعلام بسيط.

بريد:

يُرجع Axios "الوعد". إذا كنت على دراية بالوعود ، فمن المحتمل أنك تعلم أن الوعد يمكن أن ينفذ طلبات متعددة. يمكنك فعل الشيء نفسه مع أكسيوس وتشغيل طلبات متعددة في نفس الوقت.

يدعم Axios العديد من الأساليب والخيارات الأخرى. يمكنك استكشافها هنا.

Angular HttpClient

Angular has its own HTTP module that works with Angular apps. It uses the RxJS library to handle asynchronous requests and provides many options to perform the HTTP requests.

Making a call to the server using the Angular HttpClient

To make a request using the Angular HttpClient, we have to run our code inside an Angular app. So I created one. If you’re not familiar with Angular, check out my article, learn how to create your first Angular app in 20 minutes.

The first thing we need to do is to import HttpClientModule in app.module.ts

Then, we have to create a service to handle the requests. You can easily generate a service using Angular CLI.

ng g service FetchdataService

Then, we need to import HttpClient in fetchdataService.ts service and inject it inside the constructor.

And in app.component.ts import fetchdataService

//import import { FetchdataService } from './fetchdata.service';

Finally, call the service and run it.

app.component.ts:

يمكنك التحقق من المثال التجريبي على Stackblitz.

تغليف

لقد غطينا للتو أكثر الطرق شيوعًا لإجراء طلب مكالمة HTTP في JavaScript.

شكرا لك على وقتك. إذا كنت ترغب في ذلك ، صفق حتى 50 ، وانقر فوق متابعة ، وتواصل معي على Twitter.

بالمناسبة ، لقد عملت مؤخرًا مع مجموعة قوية من مهندسي البرمجيات لأحد تطبيقات الهاتف المحمول الخاصة بي. كانت المنظمة رائعة ، وتم تسليم المنتج بسرعة كبيرة ، وأسرع بكثير من الشركات الأخرى والموظفين المستقلين الذين عملت معهم ، وأعتقد أنه يمكنني أن أوصي بهم بصدق لمشاريع أخرى هناك. أرسل لي بريدًا إلكترونيًا إذا كنت تريد الاتصال - [email protected] .