از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
ارسال درخواست های PUT HTTP با AxiosAxios یک کتابخانه جاوا اسکریپت برای ایجاد درخواست های HTTP، چه در مرورگر یا Node.js است. برخلاف کتابخانه محبوب Requests، Axios به طور بومی مبتنی بر وعده است، و آن را برای برنامه‌های مدرن با بهره‌گیری از ویژگی‌های جدیدتر جاوا اسکریپت، مانند Promises و syntax async/wait، مناسب‌تر می‌کند. اگر در زمینه وب باتجربه هستید …
سرفصلهای مطلب
معرفی
Axios یک کتابخانه جاوا اسکریپت برای درخواست HTTP، چه در مرورگر یا Node.js است.
برخلاف کتابخانه محبوب Requests، Axios به طور بومی مبتنی بر وعده است، و آن را برای برنامه‌های مدرن با بهره‌گیری از ویژگی‌های جدیدتر جاوا اسکریپت، مانند Promises و syntax async/wait، مناسب‌تر می‌کند.
اگر در توسعه وب باتجربه هستید و فقط می خواهید پاسخی در مورد روش ارسال درخواست PUT با Axios پیدا کنید – خلاصه داستان این است:
const axios = require('axios');
// Wrapper, specific put() function
const res = await axios.put('/api/article/123', {
title: 'Making PUT Requests with Axios',
status: 'published'
});
// General HTTP function
const res = await axios({
method: 'put',
url: '/api/article/123',
data: {
title: 'Making PUT Requests with Axios',
status: 'published'
}
});
با این حال، اگر تازه کار با Axios را آغاز کرده اید یا می خواهید بیشتر در مورد آن بدانید چگونه این کار می کند – بخوانید روی!
درخواست ها و افعال HTTP
وب مدرن ساخته شده است روی پروتکل HTTP و الف درخواست-پاسخ چرخه زندگی، جایی که a مشتری درخواست یک منبع و الف سرور با آن پاسخ می دهد.
پروتکل HTTP تعدادی روش را با اهداف متفاوت تعریف می کند GET، POST، DELETEو غیره که به مشتری اجازه می دهد تا قصد خود را “بیان” کند. یکی از متداول‌ترین روش‌های HTTP، روش است PUT روشی که بیشتر برای ارسال داده ها به سرور استفاده می شود، چه برای ایجاد یک منبع جدید و چه برای وصله یا ویرایش داده ها روی یک منبع موجود
به عنوان مثال، یک سرویس REST API برای یک وبلاگ ممکن است مسیری داشته باشد که به شما امکان انجام آن را می دهد CRUD (ایجاد، خواندن، به‌روزرسانی، حذف) عملیات روی را article منبع با استفاده از مسیر /api/article/(id).
ارسال الف GET درخواست به این مسیر ممکن است مقاله مشخص شده توسط id. ارسال الف PUT درخواست به این مسیر مقاله ویژگی های مشخص شده را ویرایش می کند. این ویژگی‌ها را می‌توان در بدنه درخواست که به‌طور پیش‌فرض با فرمت JSON سریال‌سازی می‌شود، مشخص کرد.
اگر می‌خواهید درباره ایجاد REST API با Node.js اطلاعات بیشتری کسب کنید – راهنمای ما برای ساختن API REST با Node و Express را بخوانید!
ارسال درخواست PUT با Axios
بیایید ببینیم چگونه می توانیم از کتابخانه Axios برای ارسال درخواست HTTP PUT از برنامه جاوا اسکریپت خود استفاده کنیم.
ابتدا می توانید نصب کنید axios استفاده کردن yarn یا npm:
$ npm install axios --save
$ yarn add axios
همچنین از طریق تعدادی CDN، مانند برنامه‌های frontend، در دسترس است jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
پس از نصب کتابخانه، باید یک نمونه را نمونه برداری کنید:
const axios = require('axios');
ساده ترین راه برای ساخت PUT تماس به سادگی استفاده از put() عملکرد از axios نمونه، و عرضه کنید بدن از آن درخواست در قالب یک شی جاوا اسکریپت:
const res = await axios.put('/api/article/123', {
title: 'Making PUT Requests with Axios',
status: 'published'
});
تنها آرگومان‌هایی که در اینجا لازم است URL و داده‌هایی است که می‌خواهید ارسال کنید، که در مورد ما عنوانی است که می‌خواهیم منبع مقاله را ویرایش کنیم.
شی جاوا اسکریپتی که برای نگهداری آن ایجاد کرده ایم title و status به صورت سریال به JSON تبدیل می شود، به یک کنترل کننده درخواست ارسال می شود، که یک عمل را انجام می دهد و نتیجه را برمی گرداند. را body از درخواستی که ما ارسال می کنیم است JSON سریالی که به راحتی قابل بازیابی است روی قسمت عقب
توجه داشته باشید: از آنجایی که JSON در حال ارسال است – که یک قالب بسیار جهانی است، اکثر فریم ورک ها مشکلی در خواندن داده‌های ارسال شده و جداسازی آن‌ها در هر نمایشی که بک‌اند استفاده می‌کند، بدون توجه به پشته فناوری، نخواهد داشت.
شی ای که توسط Axios برگردانده شد، res در این مورد، یک طرح استاندارد برای همه تماس ها دارد:
{
data: {},
status: 200,
statusText: 'OK',
headers: {},
config: {},
request: {}
}
جایی که:
data: داده هایی که توسط سرویسی که تماس گرفتید برگردانده می شود – معمولاً یک پاسخ JSON از یک REST API.status: وضعیت HTTP که توسط سرویس برگردانده می شود، نشان دهنده روش انجام عملیات – مانند 200 (خوب)، 301 (به طور دائم منتقل شد)، 404 پیدا نشد)، و غیره.statusText: متن وضعیت HTTP که کد وضعیت را در قالبی قابل خواندن برای انسان توصیف می کند – مانند “OK”، “Moved Permanently” یا “Not Found”.headers: یک شی حاوی تمام سرصفحه‌های بازگشت‌شده توسط سرویس، مانند «Cache-Control».config: شیء پیکربندی ارائه شده به تماس (اختیاری).request: شی درخواست برای این فراخوانی که aClientRequestدر Node.js یاXMLHttpRequestدر مرورگر
راه دیگر برای ایجاد درخواست PUT با Axios یک روش عمومی تر است که در آن متد HTTP را در آرگومان ها مشخص می کنید.
این کار با استفاده از axios() روش پیش فرض و شی پیکربندی:
const res = await axios({
method: 'put',
url: '/api/article/123',
data: {
title: 'Making PUT Requests with Axios',
status: 'published'
}
});
نتیجه این تماس دقیقاً مشابه است axios.put() تماس از قبل – تنها تفاوت این است که axios.put() روش یک روش راحت است که روش کلی را پیچیده می کند و آن را با روش آغشته می کند method: 'put' رشته.
axios() در مقابل قرار دادن()
پس چرا از یک روش بر دیگری استفاده می کنید؟ که ممکن است بستگی داشته باشد روی چند عامل، مانند خوانایی یا زمینه ای که در آن روش استفاده می شود، اما همچنین تا حد زیادی – ترجیح شخصی شما.
هر چه عمومی تر باشد axios() فراخوانی انعطاف‌پذیرتر است، زیرا همه گزینه‌ها/پیکربندی‌ها در یک شی مشخص شده‌اند، و افزودن پیکربندی‌های بیشتر، مانند سرصفحه‌ها یا تغییر افعال متد را آسان‌تر می‌کند.
از آنجا که put() روش فقط پیچیده می شود axios()، عملکرد اساسی اساساً یکسان است.
رسیدگی به خطاها
توجه داشته باشید: هنگام ارسال درخواست – ممکن است همیشه نتیجه مورد انتظار را دریافت نکنید.
به طور کلی – شما می خواهید تلاش کردن ارسال درخواست، و گرفتن استثناها اگر در آن به وجود می آیند process، که روند تماس را کمی تغییر می دهد:
try {
const { data } = await axios({
method: 'put',
url: '/api/article/123',
data: {
title: 'Making PUT Requests with Axios',
status: 'published'
}
});
console.log(data);
} catch (err) {
if (err.response.status === 404) {
console.log('Resource could not be found!');
} else {
console.log(err.message);
}
}
تفاوت اصلی در اینجا مدیریت خطا است که از آن استفاده می کند response به جای اینکه علت را تعیین کند، به خطا اعتراض کنید data شی از خود تماس برگردانده شد.
به طور معمول، رسیدگی به خطا قوی‌تر از بررسی اینکه آیا وضعیت یک عدد صحیح است – با این حال، به این ترتیب می‌توانید جریان منطق مبتنی بر آن را تغییر دهید. روی چگونه درخواست رسیدگی شد (یا نشد).
نتیجه
در این مقاله به معرفی کوتاهی از کتابخانه Axios و روش HTTP PUT پرداختیم.
ما همچنین چند نمونه از روش استفاده از Axios برای برقراری تماس‌های PUT و همچنین روش فراخوانی تنظیمات دیگر و روش رسیدگی به خطاهای ساده را نشان دادیم.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-14 20:01:08
