تعارف
ویب ایپلیکیشنز تیار کرتے وقت – ہم معمول کے مطابق سرور پر ہوسٹ کردہ وسائل تک رسائی حاصل کرتے ہیں۔ وسائل پر دیگر کارروائیوں کے لیے پوچھنا، بھیجنا یا انجام دینا HTTP درخواستوں کے ذریعے پورا کیا جاتا ہے۔ یہ درخواستیں کلائنٹ سے سرور پر میزبان کو بھیجی جاتی ہیں۔ HTTP کی درخواست کرتے وقت، کلائنٹ ملازمت کرتا ہے a یو آر ایل (یکساں وسائل لوکیٹر) اور ایک پے لوڈ جس میں سرور کے وسائل تک رسائی کے لیے ضروری معلومات شامل ہیں۔
پانچ عام HTTP درخواست کے طریقے ہیں۔ GET, PUT, POST, PATCH، اور DELETE. یہ طریقے ہمیں معیاری CRUD آپریشنز کرنے کی اجازت دیتے ہیں۔
اس آرٹیکل میں، ہم سیکھیں گے کہ Axios یا Fetch API کا استعمال کرتے ہوئے React میں GET HTTP درخواست کیسے کی جائے، اور ساتھ ہی کلاس اور فنکشنل دونوں اجزاء میں ایسا کیسے کیا جائے۔
GET درخواست کیا ہے؟
GET ایک HTTP درخواست کا طریقہ ہے جو سرورز سے وسائل حاصل کرنے کے لیے استعمال ہوتا ہے۔
Axios اور API بازیافت کریں۔ HTTP درخواستیں کرنے کے دو اہم طریقے ہیں۔
- Fetch API سرور یا API کے اختتامی نقطہ سے وسائل کی بازیافت کے لیے ایک بلٹ ان وعدے پر مبنی JavaScript ماڈیول ہے۔
- Axios ایک وعدے پر مبنی HTTP کلائنٹ لائبریری ہے جو REST اینڈ پوائنٹس پر غیر مطابقت پذیر HTTP درخواستیں بھیجنا آسان بناتی ہے۔ یہ ایک بیرونی لائبریری ہے جسے انسٹال کرنا ضروری ہے۔
اس آرٹیکل میں، ہم دیکھیں گے کہ Fetch API اور Axios طریقوں کا استعمال کرتے ہوئے React فنکشنل اجزاء میں GET درخواستوں کو کیسے انجام دیا جائے، اور پھر کلاس پر مبنی اجزاء میں ایسا کیسے کیا جائے۔
ری ایکٹ کے فنکشنل اجزاء میں GET HTTP درخواست کو کیسے انجام دیا جائے۔
ایک فنکشنل جز اس وقت بنتا ہے جب جاوا اسکرپٹ فنکشن (یا تو نارمل یا ES6) ایک React عنصر (JSX) لوٹاتا ہے۔ ہم فعال اجزاء کے ساتھ کام کرتے وقت React ہکس کا استعمال کرتے ہیں، جو کہ GET درخواستوں کو انجام دیتے وقت بہت اہم ہوتے ہیں۔
ہم استعمال کریں گے useState() اور useEffect() ہکس کیونکہ useEffect() ہک فوری طور پر رینڈر ہوتا ہے جب ایپ ماؤنٹ ہوتی ہے ہم ہمیشہ اس کے اندر GET درخواستیں انجام دیتے ہیں، اور ہم استعمال کرتے ہیں۔ useState() ہمارے ڈیٹا/جواب کو ذخیرہ کرنے کے لیے ہک۔
Fetch API کے ساتھ React کے فنکشنل اجزاء میں GET HTTP درخواست کو کیسے انجام دیا جائے۔
۔ fetch() طریقہ ایک لازمی دلیل کو قبول کرتا ہے - وسائل کا URL جسے ہم لانا چاہتے ہیں، اور ساتھ ہی ایک اختیاری دلیل جو درخواست کے طریقہ کار کی نشاندہی کرتی ہے۔ اس اختیاری دلیل کی ڈیفالٹ قدر ہے۔ GET، لہذا GET کی درخواست کرتے وقت اسے سیٹ کرنا ضروری نہیں ہے۔
پھر Fetch API لوٹاتا ہے۔ Promise، تو ہم استعمال کر سکتے ہیں then() اور catch() کامیابی یا ناکامی سے نمٹنے کے طریقے:
import { useState, useEffect } from 'react';
const App = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
return (
);
};
یہ ایک معیاری GET درخواست کی طرح دکھائی دیتی ہے۔ اب، ہم نے اب تک جو کچھ کیا ہے اس کو ختم کرتے ہیں تاکہ آپ کو اوپر والے کوڈ کی بہتر سمجھ حاصل ہو۔ سب سے پہلے، ہم نے تمام وسائل/پوسٹوں کو رکھنے کے لیے ایک ریاست بنائی جو ہم سے حاصل کریں گے۔ posts APIs:
const [posts, setPosts] = useState([]);
پھر ہم نے استعمال کیا۔ useEffect() ہک کریں اور اس میں ہماری GET درخواست لکھیں تاکہ ایپ کے ماؤنٹ ہونے کے فوراً بعد درخواست کو متحرک کیا جائے:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
اس کے بعد، ہم نے میں ایک بازیافت کی درخواست بنائی useEffect() یو آر ایل کو ہک اور پاس کیا جسے ہم سرور تک رسائی کے لیے استعمال کر سکتے ہیں۔ چونکہ یہ ایک وعدہ واپس کرتا ہے، ہم نے استعمال کیا۔ then() طریقہ چونکہ یہ طریقہ JSON کے بجائے جوابی آبجیکٹ واپس کرتا ہے، اس لیے ہم نے پہلے ڈیٹا کو JSON فارمیٹ میں تبدیل کیا:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
}, []);
اس کے بعد ہم پوسٹس/ڈیٹا حاصل کرنے کے لیے آگے بڑھے اور انہیں اس ریاست میں اسٹور کیا جو ہم نے پہلے بنائی تھی۔
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
}
}, []);
آخر میں ہم استعمال کرتے ہیں catch() غلطیوں کو سنبھالنے کا طریقہ:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
ہم نے پہلے ہی ایک GET درخواست کی ہے اور اپنا ڈیٹا اپنی بنائی ہوئی ریاست میں محفوظ کر لیا ہے۔ اب ہم اپنی React ایپلیکیشن میں ڈیٹا استعمال کر سکتے ہیں۔
Axios کے ساتھ ری ایکٹ کے فنکشنل اجزاء میں GET HTTP درخواست کو کیسے انجام دیا جائے۔
Fetch API کے علاوہ، ہم GET درخواستیں بھیجنے کے لیے Axios کا بھی استعمال کر سکتے ہیں۔ Axios ایک وعدے پر مبنی HTTP کلائنٹ لائبریری ہے جو REST اینڈ پوائنٹس پر غیر مطابقت پذیر HTTP درخواستیں بھیجنا آسان بناتی ہے۔
اگر ہم Axios استعمال کرنا چاہتے ہیں، جو کہ ایک بیرونی لائبریری ہے، تو ہمیں پہلے اسے اپنے پروجیکٹ کی ڈائرکٹری میں درج ذیل کمانڈ کو چلا کر اپنے پروجیکٹ میں انسٹال کرنا ہوگا۔
$ npm install axios
Axios کو کامیابی سے انسٹال کرنے کے بعد، ہم اپنی GET درخواست کو انجام دینے کے لیے آگے بڑھ سکتے ہیں:
import { useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts?_limit=10')
.then((response) => {
setPosts(response.data);
})
.catch((err) => {
console.log(err);
});
}, []);
return (
);
};
بہترین طرز عمل، صنعت کے لیے منظور شدہ معیارات، اور چیٹ شیٹ کے ساتھ Git سیکھنے کے لیے ہمارے ہینڈ آن، عملی گائیڈ کو دیکھیں۔ گوگلنگ گٹ کمانڈز کو روکیں اور اصل میں سیکھ یہ!
یہ Fetch API کے مقابلے میں بہت صاف نظر آتا ہے! مندرجہ بالا کوڈ پر ایک نظر ڈالتے ہوئے، ہم نے Axios کو درآمد کرکے شروع کیا کیونکہ یہ ایک بیرونی لائبریری تھی جسے ہم نے انسٹال کیا تھا:
import axios from 'axios';
اس کے بعد ہم نے GET درخواست کو اندر اندر انجام دیا۔ useEffect() ہک جیسا کہ ہم نے Fetch API کے لیے کیا تھا، لیکن اس بار نحو تھوڑا مختلف ہے:
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts?_limit=10')
.then((response) => {
setPosts(response.data);
})
.catch((err) => {
console.log(err);
});
}, []);
Fetch API طریقہ کے برعکس، طریقہ کا اعلان کرنے کے لیے کسی اختیارات کی ضرورت نہیں ہے۔ ہم صرف طریقہ کو مثال کے ساتھ منسلک کرتے ہیں اور اس سے استفسار کرتے ہیں، ڈیٹا کو تبدیل کرنے کی بھی ضرورت نہیں ہے کیونکہ یہ اسے JSON کے طور پر واپس کرتا ہے۔
ری ایکٹ کے کلاس اجزاء میں GET HTTP درخواست کو کیسے انجام دیا جائے۔
کلاس کا جزو ایک ES6 کلاس ہے جو JSX لوٹاتا ہے اور اسے استعمال کرنے کے لیے React ایکسٹینشنز کی ضرورت ہوتی ہے۔ ہکس کے تعارف سے پہلے، یہ سب سے زیادہ استعمال ہونے والا طریقہ تھا (یعنی پہلے کے ورژن 16.8) کیونکہ ریاست کو فعال اجزاء کے اندر استعمال نہیں کیا جا سکتا تھا۔
ہکس کی دستیابی کے باوجود، بہت سے لوگ کلاس کے اجزاء استعمال کرتے رہتے ہیں۔ آئیے دیکھتے ہیں کہ ہم کس طرح استعمال کر سکتے ہیں۔ constructor() طریقہ کار کی ریاستی جائیداد، اور ComponentDidMount() کلاس کے اجزاء کے ساتھ رد عمل میں GET HTTP درخواستوں کو انجام دینے کا لائف سائیکل طریقہ۔
Fetch API کے ساتھ React کے کلاس اجزاء میں GET HTTP درخواست کو کیسے انجام دیا جائے۔
یہ اس سے بہت ملتا جلتا ہے جس طرح ہم نے کارکردگی کا مظاہرہ کیا۔ GET فعال اجزاء میں درخواست. فرق صرف اتنا ہے کہ اب ہم ریاستی املاک کو استعمال کریں گے۔ constructor() بجائے طریقہ useState() کانٹا. اس کے علاوہ، ہم اپنے کو سنبھال لیں گے GET میں درخواست ComponentDidMount() زندگی کی بجائے useEffect() ہک، تاکہ ہماری ایپ کے ماؤنٹ ہونے کے بعد اس درخواست کو متحرک کیا جائے:
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => this.setState({ posts: data }))
.catch((error) => console.log(error));
}
render() {
const { posts } = this.state;
return (
);
}
}
مندرجہ بالا کوڈ میں، ہم نے اپنے سرور/API سے حاصل کردہ وسائل/ڈیٹا کو ذخیرہ کرنے کے لیے کسی آبجیکٹ کی حالت کو شروع کرنے کے لیے کنسٹرکٹر طریقہ استعمال کیا:
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
اس کے بعد ہم نے اپنی GET درخواست کو میں انجام دیا۔ componentDidMount() لائف سائیکل کا طریقہ تاکہ ایپ کے ماؤنٹ ہونے کے بعد یہ متحرک ہوجائے:
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => this.setState({ posts: data }))
.catch((error) => console.log(error));
}
state ایک ایسی چیز ہے جس میں بہت سی ریاستیں ہیں، ہم اسے حاصل کرنے کے لیے سب سے پہلے اسے تباہ کرتے ہیں۔ posts ریاست، جسے بعد میں استعمال کیا جا سکتا ہے:
render() {
const { posts } = this.state;
return (
);
}
Axios کے ساتھ React کے کلاس اجزاء میں GET HTTP درخواست کو کیسے انجام دیا جائے۔
جیسا کہ ہم نے فعال اجزاء کے ساتھ دیکھا، ہم بھیج سکتے ہیں۔ GET Axios کے ساتھ درخواستیں جو باقی رہ گیا ہے اس پر عمل درآمد کرنا ہے۔ GET کے اندر درخواست ComponentDidMount() لائف سائیکل اور Axios درآمد کرنا:
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
componentDidMount() {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
this.setState({ posts: response.data });
})
.catch((error) => {
console.log(error);
});
}
render() {
const { posts } = this.state;
return (
);
}
}
نتیجہ
ہم نے سیکھا کہ GET HTTP درخواستوں کو فنکشنل اور کلاس دونوں اجزاء کے ساتھ انجام دینے کا طریقہ دو سب سے زیادہ استعمال شدہ طریقوں - Fetch API اور Axios کا استعمال کرتے ہوئے، اس مضمون میں۔
ایک مخصوص طریقہ استعمال کرنا مکمل طور پر آپ پر منحصر ہے۔
