javascript طريقة استخدام fetch و XMLHttpRequest

يمكنك تنفيذ أي Request بإستخدام XMLHttpRequest Object أو الدالة Fetch، لكن إليك الفروقات الرئيسية بينهم:


1- Fetch ترجع object من نوع Promise والذي يسهل تطبيق كود غير متزامن، أي تنفيذ كود فور إنتهاء الpromise.
XMLHttpRequest لا تستخدم الpromises

إليك المثال الآتي لإستخدام fetch:

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

حيث سيتم تنفيذ الجزء الخاص بـthen فور إنتهاء الـPromise.

2- بإستخدام دالة c يمكنك التعامل مع الerrors بإستخدام catch، عكس الـXMLHttpRequest التي يجب تهيئة حالات النجاح والفشل كلها.

مثال لإستخدام fetch:

fetch('https://jsonplaceholder.typicode.com/postses')
	.then(function (response) {
		return response.json();
	})
	.then(function (data) {
		console.log('success', data);
	})
	.catch(function (error) {
		console.log('error', error);
	});

مثال لإستخدام الـXMLHttpRequest

// Set up our HTTP request
var xhr = new XMLHttpRequest();

// Setup our listener to process compeleted requests
xhr.onreadystatechange = function () {

	// Only run if the request is complete
	if (xhr.readyState !== 4) return;

	// Process our return data
	if (xhr.status >= 200 && xhr.status < 300) {
		// What do when the request is successful
		console.log('success', JSON.parse(xhr.responseText));
	} else {
		// What to do when the request has failed
		console.log('error', xhr);
	}

};

// Create and send a GET request
// The first argument is the post type (GET, POST, PUT, DELETE, etc.)
// The second argument is the endpoint URL
xhr.open('GET', 'https://jsonplaceholder.typicode.com/postses');
xhr.send();

أما بالنسبة للعلامة {}$ فهي عبارة عن template literals أي أنه نموذج حرفي يمكنك من تنفيذ عمليات بين الcurly braces مثل إستدعاء دالة ما في داخل علامات التنصيص.

إليك مقارنة بين الطريقة التقليدية والطريقة الحديثة بإستخدام template literals :

الطريقة التقليدية:
 

let name = "abdulraheem";

console.log("my name is : "+name);

الطريقة الحديثة:

let name = "abdulraheem";

console.log(`my name is: ${name}`);

لاحظ أنه يجب إستخدام الرمز ` وليس "  في حالة التعامل مع الـtemplate literals.

وعليكم السلام ورحمة الله وبركاته
مرحباً حفصة

• بالنسبة لاستخدام fetch فهذه هي الطريقة 

  methods: {
    fetchWeather(e){
      if (e.key == "Enter") {
        fetch(`${this.url_base}weather?q=${this.query}&units=metric&APPID={this.api_key}`)
          .then(res => {
            return res.json();
          })
          .then(this.setResult)
      }
    },
    setResult(results){
      this.weather = results;
    }
  }

• أما فائدة ${}  فاسمها template string يتم استخدامها عند إستخدام متغير بداخل ال string