از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
ایجاد درخواست HTTP در Node.js با node-fetchA برنامه وب اغلب برای دریافت منابع مختلف نیاز به ارتباط با سرورهای وب دارد. ممکن است لازم باشد دادهها را از یک وب سرور خارجی یا API واکشی یا به آن پست کنید. با استفاده از جاوا اسکریپت سمت کلاینت، می توان با استفاده از fetch API و تابع window.fetch() به این امر دست یافت. در NodeJS چندین …
سرفصلهای مطلب
معرفی
یک برنامه وب اغلب برای دریافت منابع مختلف نیاز به ارتباط با سرورهای وب دارد. ممکن است لازم باشد دادهها را از یک وب سرور یا API خارجی دریافت کنید یا دادهها را به آن پست کنید.
با استفاده از جاوا اسکریپت سمت کلاینت، این امر می تواند با استفاده از fetch API و the window.fetch()
تابع. در NodeJS، چندین بسته/کتابخانه می توانند به یک نتیجه دست یابند. یکی از آنها است node-fetch
بسته بندی
node-fetch
یک ماژول سبک وزن است که ما را قادر می سازد از آن استفاده کنیم fetch()
عملکرد در NodeJS، با عملکرد بسیار مشابه window.fetch()
در جاوا اسکریپت بومی، اما با a چند تفاوت.
شروع با node-رفتن و آوردن
برای استفاده node-fetch
در پروژه شما، cd
وارد فهرست پروژه خود شده و اجرا کنید:
$ npm install node-fetch
از نسخه 3.0، node-fetch
یک ماژول فقط ESM است – شما نمی توانید import آن را با require()
. اگر خودتان از ESM استفاده نمی کنید، توصیه می شود بمانید روی نسخه 2.0 به جای آخرین نسخه که در این صورت می توانید از استاندارد استفاده کنید require()
نحو.
برای استفاده از ماژول در کد (برای نسخه های قبل از نسخه 3.0)، از:
const fetch = require('node-fetch');
اگر از ESM استفاده می کنید، این کار را خواهید کرد import ماژول به روشی متفاوت:
import fetch from 'node-fetch';
توجه داشته باشید: API بین node-fetch
3.0 و 2.0 یکسان است، فقط import متفاوت است.
برای نصب یک نسخه خاص از ماژول، می توانید استفاده کنید npm
:
$ npm install (email protected)
همانطور که قبلا ذکر شد، fetch()
عملکرد در node-fetch
ماژول بسیار شبیه به بومی رفتار می کند window.fetch()
تابع. امضای آن این است:
fetch(url(, options));
این url
پارامتر به سادگی URL مستقیم به منبعی است که می خواهیم واکشی کنیم. باید یک URL مطلق باشد وگرنه تابع خطا خواهد کرد. اختیاری options
پارامتر زمانی استفاده می شود که می خواهیم استفاده کنیم fetch()
برای هر چیزی غیر از یک چیز ساده GET
درخواست کنید، اما بعداً در مورد آن عمیق تر صحبت خواهیم کرد.
تابع a را برمی گرداند Response
شی که حاوی توابع مفید و اطلاعات مربوط به پاسخ HTTP است، مانند:
text()
– بدنه پاسخ را به صورت رشته ای برمی گرداندjson()
– بدنه پاسخ را در یک شی JSON تجزیه می کند و اگر بدنه قابل تجزیه نباشد خطا می دهدstatus
وstatusText
– حاوی اطلاعاتی در مورد کد وضعیت HTTP باشدok
– برابر استtrue
اگرstatus
یک کد وضعیت 2xx است (یک درخواست موفق)headers
– یک شی حاوی سرصفحه های پاسخ، یک هدر خاص را می توان با استفاده ازget()
تابع.
ارسال درخواست های GET با استفاده از node-رفتن و آوردن
دو مورد رایج برای واکشی داده ها از یک وب سرور وجود دارد. ممکن است بخواهید متنی را از وب سرور، یک وب کامل، بازیابی کنید page، یا داده های استفاده از REST API. این node-fetch
بسته به شما این امکان را می دهد که همه اینها را انجام دهید.
یک دایرکتوری برای پروژه خود ایجاد کنید، cd
وارد دایرکتوری شوید و یک پروژه Node را با تنظیمات پیش فرض مقداردهی کنید:
$ npm init -y
این یک ایجاد خواهد کرد package.json
فایل در دایرکتوری بعد، نصب کنید node-fetch
همانطور که در بالا نشان داده شده است و یک عدد اضافه کنید index.js
فایل.
واکشی متن یا صفحات وب
بیایید یک ساده بسازیم GET
درخواست به خانه Google page:
fetch('https://google.com')
.then(res => res.text())
.then(text => console.log(text));
در کد بالا، ما در حال بارگذاری هستیم node-fetch
ماژول و سپس واکشی خانه Google page. تنها پارامتری که به آن اضافه کرده ایم fetch()
تابع URL سروری است که ما در حال درخواست HTTP برای آن هستیم. زیرا node-fetch
مبتنی بر وعده است، ما در حال زنجیر کردن چند نفر هستیم .then()
توابع برای کمک به مدیریت پاسخ و داده های درخواست ما.
در این خط، منتظر دریافت پاسخ از وب سرور گوگل و تبدیل آن به فرمت متنی هستیم:
.then(res => res.text());
در اینجا ما منتظر نتیجه تبدیل قبلی و چاپ آن به console:
.then(text => console.log(text));
اگر کد بالا را از قسمت اجرا کنیم console:
$ node index.js
ما کل نشانه گذاری HTML خانه Google را دریافت می کنیم page وارد شده به console:
<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="en-RS">
<head>
<meta charset="UTF-8">
<meta content="origin" name="referrer">
<!-- Rest of the page -->
واکشی دادههای JSON از REST API
یکی دیگر از موارد استفاده رایج برای node-fetch
ماژول در حال دریافت داده با استفاده از REST API است.
ما داده های جعلی کاربر را از آن بازیابی خواهیم کرد JSONPlaceholder REST API. مانند قبل، fetch()
تابع URL سرور را می گیرد و منتظر پاسخ است.
بیایید ببینیم که چگونه کار می کند:
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(json => {
console.log("First user in the array:");
console.log(json(0));
console.log("Name of the first user in the array:");
console.log(json(0).name);
})
بدنه پاسخ HTTP حاوی داده هایی با فرمت JSON است، یعنی آرایه ای حاوی اطلاعات کاربران. با در نظر گرفتن این موضوع، ما از .json()
تابع، و این به ما اجازه داد تا به راحتی به عناصر و فیلدهای آنها دسترسی داشته باشیم.
اجرای این برنامه به ما می دهد:
First element in the array:
{
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: '(email protected)',
address: {
street: 'Kulas Light',
suite: 'Apt. 556',
city: 'Gwenborough',
zipcode: '92998-3874',
geo: { lat: '-37.3159', lng: '81.1496' }
},
phone: '1-770-736-8031 x56442',
website: 'hildegard.org',
company: {
name: 'Romaguera-Crona',
catchPhrase: 'Multi-layered client-server neural-net',
bs: 'harness real-time e-markets'
}
}
Name of the first person in the array:
Leanne Graham
ما همچنین میتوانستیم کل JSON بازگشتی را چاپ کنیم res.json()
.
ارسال درخواست های POST با استفاده از node-رفتن و آوردن
ما همچنین می توانیم استفاده کنیم fetch()
عملکرد پست کردن داده ها به جای بازیابی آنها. همانطور که قبلا ذکر کردیم، fetch()
تابع اجازه می دهد تا یک پارامتر اضافی برای ایجاد اضافه شود POST
درخواست به یک وب سرور بدون این پارامتر اختیاری، درخواست ما a است GET
درخواست، به طور پیش فرض
گزینه های ممکن زیادی وجود دارد که می توانیم با استفاده از این پارامتر تنظیم کنیم، اما تنها گزینه هایی که در این مقاله استفاده خواهیم کرد، هستند method
، body
و headers
.
این فیلدها معانی مستقیم دارند: method
نوع درخواست HTTP را تنظیم می کند که از آن استفاده می کنیم (POST
در مورد ما)، body
حاوی بدنه/داده های درخواست ما و headers
شامل تمام هدرهای لازم است که در مورد ما فقط هدر است Content-Type
بنابراین هنگام تجزیه درخواست ما هیچ سردرگمی وجود ندارد.
برای لیست کامل گزینه ها، می توانید از مستندات.
ما با افزودن یک مورد جدید به نشان خواهیم داد که چگونه این کار می کند کارهای JSONPlaceholder. بیایید یک مورد جدید به آن لیست برای کاربری که id
برابر است 123
. ابتدا باید a ایجاد کنیم todo
شی، و بعداً هنگام اضافه کردن آن به JSON، آن را به JSON تبدیل کنید body
رشته:
let todo = {
userId: 123,
title: "loren impsum doloris",
completed: false
};
fetch('https://jsonplaceholder.typicode.com/todos', {
method: 'POST',
body: JSON.stringify(todo),
headers: { 'Content-Type': 'application/json' }
}).then(res => res.json())
.then(json => console.log(json));
این process بسیار شبیه به ساختن الف است GET
درخواست. ما تماس گرفتیم fetch()
تابع، با URL مناسب و با استفاده از پارامتر اختیاری گزینه های لازم را تنظیم می کنیم fetch()
تابع. ما با استفاده از JSON.stringify()
برای تبدیل شی ما به رشته ای با فرمت JSON قبل از ارسال آن به وب سرور. سپس، مانند بازیابی داده ها – ما منتظر پاسخ بودیم، آن را به JSON تبدیل کردیم و آن را در console.
اجرای کد خروجی را به ما می دهد:
{
userId: 123,
title: 'loren impsum doloris',
completed: false,
id: 201
}
رسیدگی به استثناها و خطاها
درخواستهای ما گاهی اوقات ممکن است به دلایل مختلف با شکست مواجه شوند – یک خطا در آن رخ میدهد fetch()
عملکرد، مشکلات اینترنت، خطاهای سرور داخلی و موارد دیگر. ما به راهی برای مدیریت این موقعیت ها نیاز داریم، یا حداقل بتوانیم ببینیم که آنها رخ داده اند.
ما می توانیم استثناهای زمان اجرا را با اضافه کردن مدیریت کنیم catch()
در انتهای زنجیره وعده بیایید یک ساده اضافه کنیم catch()
تابع برنامه ما در بالا:
let todo = {
userId: 123,
title: "loren impsum doloris",
completed: false
}
fetch('https://jsonplaceholder.typicode.com/todos', {
method: 'POST',
body: JSON.stringify(todo),
headers: { 'Content-Type': 'application/json' }
}).then(res => res.json())
.then(json => console.log(json))
.catch(err => console.log(err));
در حالت ایده آل، شما نباید به سادگی از کنار و print خطاها، اما در عوض سیستمی برای رسیدگی به آنها وجود دارد.
باید در نظر داشته باشیم که اگر پاسخ ما دارای کد وضعیت 3xx/4xx/5xx باشد، درخواست یا ناموفق بوده یا باید مراحل دیگری توسط مشتری انجام شود.
یعنی، کدهای وضعیت HTTP 3xx نشان میدهد که باید مراحل اضافی توسط مشتری انجام شود، کدهای 4xx نشاندهنده درخواست نامعتبر و کدهای 5xx نشاندهنده خطاهای سرور هستند. همه این کدهای وضعیت به ما می گویند که درخواست ما از نظر عملی موفقیت آمیز نبوده است.
catch()
هیچ یک از این موارد را ثبت نخواهد کرد زیرا ارتباط با سرور به خوبی انجام شد، یعنی ما درخواست دادیم و با موفقیت پاسخ گرفتیم. این بدان معناست که ما باید اقدامات بیشتری را انجام دهیم تا مطمئن شویم زمانی که ارتباط مشتری-سرور موفقیت آمیز بود، اما هیچ یک از کدهای وضعیت HTTP موفق (2xx) را دریافت نکردیم، پوشش می دهیم.
یک راه متداول برای اطمینان از اینکه درخواست های ناموفق خطا می دهند، ایجاد تابعی است که وضعیت HTTP پاسخ را از سرور بررسی می کند. در آن تابع، اگر کد وضعیت نشان دهنده موفقیت نباشد، می توانیم خطا و catch()
آن را خواهد گرفت.
می توانیم از موارد ذکر شده قبلی استفاده کنیم ok
زمینه ی Response
اشیاء، که برابر است true
اگر کد وضعیت 2xx باشد.
بیایید ببینیم این چگونه کار می کند:
function checkResponseStatus(res) {
if(res.ok){
return res
} else {
throw new Error(`The HTTP status of the reponse: ${res.status} (${res.statusText})`);
}
}
fetch('https://jsonplaceholder.typicode.com/MissingResource')
.then(checkResponseStatus);
.then(res => res.json());
.then(json => console.log(json));
.catch(err => console.log(err));
ما از تابع در ابتدای زنجیره وعده (قبل از تجزیه بدنه پاسخ) استفاده کردیم تا ببینیم آیا با مشکلی مواجه شده ایم یا خیر. همچنین می توانید به جای آن یک خطای سفارشی پرتاب کنید.
باز هم، شما باید یک استراتژی برای رسیدگی به خطاهایی مانند این داشته باشید به جای اینکه فقط روی آن چاپ کنید console.
اگر همه چیز طبق انتظار پیش رفت و کد وضعیت نشان دهنده موفقیت بود، برنامه مانند قبل پیش می رود.
نتیجه
ایجاد درخواست به سرورهای وب یک کار رایج توسعه وب است و در این مقاله دیدیم که چگونه می توانیم آن را به طور موثر با استفاده از آن انجام دهیم. node-fetch
– کتابخانه ای که مرورگر بومی API را با NodeJS سازگار می کند.
علاوه بر آن، ما همچنین نگاهی به روش رسیدگی به خطاهایی که ممکن است با درخواستهای HTTP رخ دهد، انداختهایم.
(برچسبها برای ترجمه)# http
منتشر شده در 1403-01-19 17:59:06