ویرگول
ورودثبت نام
آرمین امیری نسب
آرمین امیری نسب
خواندن ۲ دقیقه·۲ سال پیش

آموزش کار با RandomUser API در جاوا اسکریپت

همیشه وقتی یک برنامه نویس برای اولین بار از API استفاده میکنه احساس قدرت میکنه ? شاید چون تونسته کار خفنی انجام بده ، ولی خب این کار خفن داره یه جای دیگه انجام میشه ولی خب مهم نیست در کل کار با API همیشه باحال بوده :)

RandomUser.Me
RandomUser.Me


تو این پست میخوام کار با RandomUser API رو آموزش بدم که یک یوزر تصادفی رو با عکس ، اسم ، ملیت ، ایمیل ، آدرس و ... برای ما ارسال میکنه و فقط میتونه برای تست کردن و یا اولین تجربه کار با API گزینه مناسبی باشه.


یک نمونه استفاده از این API در Jquery

$.ajax({ url: 'https://randomuser.me/api/', dataType: 'json', success: function(data) { console.log(data); } });


خب بریم با دستور fetch به API یک ریکوئست ارسال کنیم ، من در این درخواست با استفاده از async - await و بدون استفاده از Promise ها این ریکوئست رو هندل کردم ، ریکوئست ها به آدرس زیر ارسال میشن.

https://randomuser.me/api/
async function GenerateUser() { let user = await fetch('https://randomuser.me/api/'); } GenerateUser();

بعد از این که ریکوئست رو فرستادیم (در حال حاضر بدون در نظر گرفتن ارور هندلینگ) باید رسپانس رو به JSON تبدیل کنیم و اون رو برگردونیم:

async function GenerateUser() { let user = await fetch('https://randomuser.me/api/'); user = await user.json(); console.log(user); return user; } GenerateUser();

بعد از انجام این کار در کنسول ما یک آبجکت با دو پروپرتی لاگ گرفته میشه که یکیش اطلاعات کاربر رندوم ماست و اون یکی هم یکسری اطلاعات اضافی از سید ریکوئست ما و ورژن اونه که ما نیازی بهش نداریم:

{results: Array(1), info: {…}} info: {seed: '7ca5d6918b195343', results: 1, page: 1, version: '1.4'} results: [{…}] [[Prototype]]: Object

اطلاعاتی که ما نیاز داریم در پروپرتی results وجود داره که می تونیم بهش دسترسی داشته باشیم:

user.results[0]

حالا با استفاده از آبجکتی که داریم می تونیم شخصیت های فیک متفاوتی بسازیم ، یک چیزی رو هم بگم که کاربران ایرانی هم بین یوزر هایی که ایجاد میکنه و وجود داره !

{ 'gender': 'female', 'name': { 'title': 'Miss', 'first': 'Jennie', 'last': 'Nichols' }, 'location': { 'street': { 'number': 8929, 'name': 'Valwood Pkwy', }, 'city': 'Billings', 'state': 'Michigan', 'country': 'United States', 'postcode': '63104', 'coordinates': { 'latitude': '-69.8246', 'longitude': '134.8719' }, 'timezone': { 'offset': '+9:30', 'description': 'Adelaide, Darwin' } }, 'email': 'jennie.nichols@example.com', 'login': { 'uuid': '7a0eed16-9430-4d68-901f-c0d4c1c3bf00', 'username': 'yellowpeacock117', 'password': 'addison', 'salt': 'sld1yGtd', 'md5': 'ab54ac4c0be9480ae8fa5e9e2a5196a3', 'sha1': 'edcf2ce613cbdea349133c52dc2f3b83168dc51b', 'sha256': '48df5229235ada28389b91e60a935e4f9b73eb4bdb855ef9258a1751f10bdc5d' }, 'dob': { 'date': '1992-03-08T15:13:16.688Z', 'age': 30 }, 'registered': { 'date': '2007-07-09T05:51:59.390Z', 'age': 14 }, 'phone': '(272) 790-0888', 'cell': '(489) 330-2385', 'id': { 'name': 'SSN', 'value': '405-88-3636' }, 'picture': { 'large': 'https://randomuser.me/api/portraits/men/75.jpg', 'medium': 'https://randomuser.me/api/portraits/med/men/75.jpg', 'thumbnail': 'https://randomuser.me/api/portraits/thumb/men/75.jpg' }, 'nat': 'US' }


نمیدونم دقیقا ساخت یوزر رندوم و فیک چه کاربردی میتونه داشته باشه ولی برای تفریح هم که شده میشه ازش استفاده کرد ، یکی از نمونه هایی که با استفاده از این RandomUser API ایجاد کردم رو در این مخزن در فولدر جاوا اسکریپت با عنوان RandomUserAPI وجود داره رو به همراه سورس کد بررسی کنید :)

کد بزنید ، لذت ببرید ، زندگی کنید ❤

جاوا اسکریپتapiبرنامه نویسی
توسعه دهنده وب ، عاشق اوپن سورس ، گیک
شاید از این پست‌ها خوشتان بیاید