سرور مجازی NVMe

ایجاد درخواست های HTTP ناهمزمان در جاوا اسکریپت با AxiosAxios یک کتابخانه جاوا اسکریپت مبتنی بر Promised است که برای ارسال درخواست های HTTP استفاده می شود. می توانید آن را به عنوان جایگزینی برای تابع ()fetch بومی جاوا اسکریپت در نظر بگیرید. ما در این آموزش از ویژگی هایی مانند Promises، async/wait و دیگر الگوهای طراحی جاوا اسکریپت مدرن استفاده خواهیم کرد. اگر می خواهید دریافت کنید …

JavaScript (JS)برنامه نویسی

توسط مهران در دی ۳۰, ۱۴۰۲

ایجاد درخواست های HTTP ناهمزمان در جاوا اسکریپت با AxiosAxios یک کتابخانه جاوا اسکریپت مبتنی بر Promised است که برای ارسال درخواست های HTTP استفاده می شود. می توانید آن را به عنوان جایگزینی برای تابع ()fetch بومی جاوا اسکریپت در نظر بگیرید. ما در این آموزش از ویژگی هایی مانند Promises، async/wait و دیگر الگوهای طراحی جاوا اسکریپت مدرن استفاده خواهیم کرد. اگر می خواهید دریافت کنید ...

سرفصلهای مطلب

زمان لازم برای مطالعه: 8 دقیقه

معرفی

Axios یک کتابخانه جاوا اسکریپت مبتنی بر Promised است که برای ارسال درخواست های HTTP استفاده می شود. می توانید آن را به عنوان جایگزینی برای جاوا اسکریپت در نظر بگیرید fetch() تابع.

ما از ویژگی هایی مانند Promises استفاده خواهیم کرد، async/awaitو دیگر الگوهای طراحی مدرن جاوا اسکریپت در این آموزش. اگر می‌خواهید سرعت خود را بالا ببرید یا حافظه خود را تازه کنید، قبل از ادامه، علاقه‌مندید این مقالات را بخوانید:

این مقاله از نماد پیکان معرفی شده در ES2015 برای تعریف توابع استفاده می کند. می توانید در مورد آن بیشتر بخوانید روی توابع پیکان در مقاله جاوا اسکریپت.
Axios یک کتابخانه مبتنی بر Promised است. اگر نیاز به کسب اطلاعات بیشتر در مورد Promises دارید، می توانید راهنمای Promises ما را در Node.js بخوانید.
برای بهبود تجربه خود با Promises، از Node.js استفاده خواهیم کرد async/await نحو. برای تسلط بر این ویژگی می توانید Node.js Async Await ما را در مقاله ES7 بخوانید!

در این آموزش می سازیم GET، POST، PUT، و DELETE درخواست به یک REST API با استفاده از Axios. بیایید کمی بیشتر در مورد این کتابخانه بیاموزیم.

Axios چیست؟

Axios یک کتابخانه سرویس گیرنده HTTP مبتنی بر Promise است. این بدان معناست که از Axios برای ارسال درخواست HTTP و رسیدگی به پاسخ‌های آن‌ها استفاده می‌شود، همه با استفاده از وعده‌های جاوا اسکریپت. Axios از Node.js و JavaScript در مرورگر پشتیبانی می کند.

Axios نیز رایگان و منبع باز است. می توانید از آن بازدید کنید مخزن GitHub برای دیدن کد و مستندات آن

این با محافظت از کاربران در برابر حملاتی مانند امنیت وب داخلی همراه است جعل درخواست بین سایتی (CSRF).

در نتیجه ویژگی‌ها و سهولت استفاده، به انتخاب محبوب توسعه‌دهندگان جاوا اسکریپت برای استفاده در هنگام برقراری تماس‌های HTTP تبدیل شده است. بیایید با راه اندازی Axios شروع کنیم.

راه اندازی Axios

بیایید ابتدا یک پوشه جدید ایجاد کنیم و NPM را با تنظیمات پیش فرض مقداردهی کنیم:

$ mkdir axios-tutorial
$ cd axios-tutorial
$ npm init -y

در مرحله بعد، می توانیم از NPM برای نصب کتابخانه استفاده کنیم:

$ npm i --save axios

توجه داشته باشید: اگر از TypeScript در پروژه خود استفاده می کنید (به عنوان مثال با یک برنامه Angular)، کتابخانه Axios همراه با تعاریف انواع آن ارائه می شود. برای نصب انواع نیازی نیست یک قدم اضافی بردارید!

اگر شما روی مرورگر، می توانید از CDN استفاده کنید import فیلمنامه نیز

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

این آموزش از Node.js با CommonJS برای بارگیری کتابخانه های ما استفاده می کند. CommonJS یک استاندارد برای بارگذاری ماژول ها است، به ویژه، آن را مشخص می کند require() کلمه کلیدی برای انجام این کار نمونه ها باید بدون توجه به پلتفرم بدون هیچ تغییری کار کنند.

اکنون که Axios را در محیط توسعه خود راه اندازی کرده ایم، بیایید مستقیماً به سمت درخواست های HTTP برویم.

نوشتن درخواست های ناهمزمان با Axios

در Node.js، فعالیت های ورودی و خروجی مانند درخواست های شبکه به صورت ناهمزمان انجام می شود. از آنجایی که Axios از Promises برای درخواست‌های شبکه استفاده می‌کند، هنگام استفاده از این کتابخانه، پاسخ به تماس گزینه‌ای نیست. ما با Axios با استفاده از Promises یا به تعامل داریم async/await کلمات کلیدی که یک نحو جایگزین برای استفاده از Promises هستند.

واردات Axios

اگر از CommonJS استفاده می کنید، دو روش در Node.js وجود دارد import کتابخانه.

تو می توانی import ماژول موجود در کد شما به این صورت است:

const axios = require('axios')

با این حال، بسیاری از ویرایشگرهای IDE و کد می توانند تکمیل خودکار بهتری را هنگام وارد کردن به این شکل ارائه دهند:

const axios = require('axios').default;

این هنگام استفاده از CommonJS به کار می کند import ماژول ها توصیه می کنیم از روش دوم به عنوان تکمیل خودکار استفاده کنید و دیدن اسناد کد در IDE شما می تواند توسعه را انجام دهد process آسان تر.

با وارد کردن کتابخانه، می‌توانیم درخواست‌های HTTP را شروع کنیم.

ارسال درخواست های GET

بیایید اولین درخواست خود را با Axios ارسال کنیم! یک خواهد بود GET درخواست، معمولا برای بازیابی داده ها استفاده می شود.

ما یک درخواست HTTP را به یک API خارجی که لیستی از پست های وبلاگ را برای ما ارسال می کند، ارسال می کنیم. پس از دریافت داده ها، ما محتویات آن را به سیستم وارد می کنیم console. اگر با خطایی مواجه شدیم، آن را نیز ثبت می کنیم.

بیایید ببینیم چگونه با استفاده از نحو پیش‌فرض Promise یکی بسازیم. در یک فایل جدید به نام getRequestPromise.js، کد زیر را اضافه کنید:

const axios = require('axios').default;

axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(resp => {
        console.log(resp.data);
    })
    .catch(err => {
        // Handle Error Here
        console.error(err);
    });

برای ساختن یک GET درخواست، URL منبع را به عنوان آرگومان در axios.get() روش.

اگر این کد را با node getRequestPromise.js، خروجی زیر را خواهید دید:

( { userId: 1,
    id: 1,
    title:
     'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
    body:
     'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum
 est autem sunt rem eveniet architecto' },
  { userId: 1,
    id: 2,
    title: 'qui est esse',
    body:
     'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro ve
l nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla' },
...

حالا بیایید ببینیم چگونه می توانیم همان کد را با استفاده از آن بازنویسی کنیم async/await کلید واژه ها. در یک فایل جدید getRequestAsyncAwait.js، کد زیر را اضافه کنید:

const axios = require('axios');

const sendGetRequest = async () => {
    try {
        const resp = await axios.get('https://jsonplaceholder.typicode.com/posts');
        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
};

sendGetRequest();

برای استفاده از async/await نحو، ما نیاز به بسته بندی کردن axios.get() فراخوانی تابع در یک async تابع. فراخوانی متد را با a محصور می کنیم try...catch بلاک کنید تا بتوانیم هر گونه خطای مشابه را ضبط کنیم catch() روشی که در نسخه Promise استفاده کردیم. متغیری که داده‌های HTTP را دریافت می‌کرد باید از آن استفاده می‌کرد await کلمه کلیدی برای اطمینان از دریافت داده های ناهمزمان قبل از ادامه. از اینجا روی بیرون، ما فقط از آن استفاده خواهیم کرد async/await نحو در مثال های ما

اجرای این کد انجام خواهد شد print همان خروجی به console به عنوان مثال اصلی Promise.

یک پاسخ Axios برای یک درخواست HTTP ( resp شی در مثال) حاوی اطلاعات زیر در مورد پاسخ HTTP خواهد بود:

data – بدنه پاسخ ارائه شده توسط سرور. اگر پاسخ سرور JSON باشد، Axios به طور خودکار داده ها را در یک شی جاوا اسکریپت تجزیه می کند.
status – کد وضعیت HTTP از پاسخ به عنوان مثال 200، 400، 404.
statusText – پیام وضعیت HTTP از پاسخ سرور به عنوان مثال OK، Bad Request، Not Found.
headers – هدرهای HTTP همراه با پاسخ.
config – پیکربندی که برای درخواست به API Axios ارائه شده است.
request – درخواست بومی که پاسخ را ایجاد کرد. در Node.js این یک خواهد بود ClientRequest هدف – شی. در مرورگر، این یک خواهد بود XMLHTTPRequest هدف – شی.

اکنون که روش ساختن یک را دیدیم GET درخواست با Axios، بیایید نگاهی به روش ساختن a POST درخواست.

ارسال درخواست های POST

ما فرستادیم POST درخواست ایجاد یک منبع جدید در REST API. در این صورت یک الف می سازیم POST درخواست از Axios برای ایجاد یک پست وبلاگ جدید برای یک کاربر.

یک فایل جدید به نام ایجاد کنید postRequest.js و کد زیر را وارد کنید:

const axios = require('axios').default;

const newPost = {
    userId: 1,
    title: 'A new post',
    body: 'This is the body of the new post'
};

const sendPostRequest = async () => {
    try {
        const resp = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
};

sendPostRequest();

برای ارسال یک POST با axios.post() ابتدا باید URL را تهیه کنید و سپس داده های درخواست را در آرگومان دوم ارائه دهید. در این مورد، ما داده ها را در قسمت ارسال می کنیم newPost متغیر، که به عنوان JSON به API ما ارسال می شود.

اجرای این با node postRequest.js نتیجه موفقیت آمیز زیر را ایجاد می کند:

{ userId: 1,
  title: 'A new post',
  body: 'This is the body of the new post',
  id: 101 }

بیا حرکت کنیم روی ببینیم چطور می توانیم ارسال کنیم PUT درخواست ها.

ارسال درخواست های PUT

PUT درخواست ها برای جایگزینی داده ها در نقطه پایانی استفاده می شوند. می توانید استفاده کنید axios.put() روش ارسال الف PUT درخواست به روشی مشابه روش ارسال ما POST درخواست ها.

برای دیدن آن در عمل، اجازه دهید a ایجاد کنیم PUT درخواستی که ویژگی های اولین پست وبلاگ را به روز می کند. یک فایل جدید به نام ایجاد کنید putRequest.js با کد زیر:

const axios = require('axios').default;

const updatedPost = {
    id: 1,
    userId: 1,
    title: 'A new title',
    body: 'Update this post'
};

const sendPutRequest = async () => {
    try {
        const resp = await axios.put('https://jsonplaceholder.typicode.com/posts/1', updatedPost);
        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
};

sendPutRequest();

مانند با POST، ما URL و داده هایی را که می خواهیم آپلود شوند ارائه می دهیم. اجرای این با node putRequest.js به ما می دهد:

{ id: 1, userId: 1, title: 'A new title', body: 'Update this post' }

اکنون که دو راه برای آپلود داده ها را پوشش داده ایم، بیایید ببینیم چگونه می توانیم داده ها را حذف کنیم.

ارسال درخواست های DELETE

می توانید یک HTTP ارسال کنید DELETE درخواست با استفاده از axios.delete() روش حذف داده ها از یک API RESTful.

بیایید یک پست وبلاگ را با ارسال یک حذف کنیم DELETE درخواست با Axios. در یک فایل جدید به نام deleteRequest.js، زیر را وارد کنید:

const axios = require('axios').default;

const sendDeleteRequest = async () => {
    try {
        const resp = await axios.delete('https://jsonplaceholder.typicode.com/posts/1')
        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
};

sendDeleteRequest();

این axios.delete() تابع فقط به URL منبعی که می خواهیم حذف کنیم نیاز دارد. اجرای این برنامه با node putRequest.js این را در terminal:

{}

این به این معنی است که هیچ داده ای برگردانده نشده است، که وقتی یک منبع حذف شود خوب است. با این حال، از آنجا که هیچ خطایی توسط Axios انجام نشد، ما تقریباً مطمئن هستیم که به درستی پردازش شده است.

بیایید نگاهی به یک راه جایگزین برای ارسال درخواست های Axios با استفاده از تنظیمات بیندازیم.

پیکربندی درخواست ها

به عنوان جایگزینی برای تعیین تابع برای ایجاد درخواست، می‌توانیم یک شی جاوا اسکریپت ارائه کنیم که روش ارسال درخواست Axios را پیکربندی می‌کند. مثلا اگه بخوام بفرستم PUT بدون استفاده درخواست کنید axios.put()، می توانیم Axios را به صورت زیر پیکربندی کنیم:

const axios = require('axios').default;

const sendRequest = async () => {
    try {
        const resp = await axios({
            method: 'PUT',
            url: 'https://jsonplaceholder.typicode.com/posts/1',
            data: {
                id: 1,
                userId: 1,
                title: 'A new title',
                body: 'Update this post'
            }
        });

        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
}

sendRequest();

در این مورد استفاده می کنیم axios به عنوان یک تابع به طور مستقیم. ما به آن یک تابع جاوا اسکریپت ارسال می کنیم که حاوی متد HTTP است که در آن استفاده می شود method، نقطه پایانی API در url و هر گونه داده در درخواست در data ویژگی.

نتیجه نهایی یکسان است، بنابراین اگر بیشتر برای شما جذابیت دارد، می توانید از این روش برای درخواست استفاده کنید.

حالا که یک دستگیره داریم روی با ارسال درخواست ها، بیایید آنها را با تنظیم هدرهای سفارشی تغییر دهیم.

هدرهای سفارشی را تنظیم کنید

برای API های خاص، درخواست خام باید داده های اضافی در هدرها داشته باشد تا پردازش شود. یک مثال متداول، تنظیم هدرهایی است که درخواست HTTP را تأیید می کنند.

اگر از JWT ها برای احراز هویت و مجوز استفاده می کردیم، باید آن را به درخواست های خود اضافه کنیم تا توسط سرور API رد نشود.

بیایید ببینیم چگونه می توانیم هدرهای سفارشی را به a اضافه کنیم axios.get() فراخوانی روش:

const axios = require('axios').default;

const sendGetRequest = async () => {
    try {
        const resp = await axios.get('https://jsonplaceholder.typicode.com/posts', {
            headers: {
                'authorization': 'Bearer YOUR_JWT_TOKEN_HERE'
            }
        });

        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
};

sendGetRequest();

همانطور که در این مثال کد مشاهده می کنید، می توانیم پیکربندی را با کد ارسال کنیم headers ویژگی برای تنظیم هدرهای سفارشی برای درخواست. این headers ویژگی یک شی جاوا اسکریپت با کلیدها و مقادیر رشته ای است.

می توانید این ویژگی را به سایر متدهای Axios مانند axios.post()، axios.put()، axios.delete(). این headers ملک باید وارد شود بعد از را data شی در axios.post() و axios.put().

در مرحله بعد، بیایید ببینیم چگونه می توانیم با استفاده از پیکربندی Axios API یک هدر سفارشی تنظیم کنیم:

const axios = require('axios').default;

axios({
    method: 'GET',
    url: 'https://jsonplaceholder.typicode.com/posts',
    headers: {
        'authorization': 'Bearer YOUR_JWT_TOKEN_HERE'
    }
}).then(resp => {
    console.log(resp.data);
}).catch(err => {
    // Handle Error Here
    console.error(err);
});

در این مورد، هدرها فقط ویژگی دیگری از شی جاوا اسکریپت هستند!

نتیجه

در این مقاله، روش ایجاد درخواست های HTTP ناهمزمان با Axios در Node.js و مرورگر جاوا اسکریپت را یاد گرفتید. شما با متدهای Axios درخواست دادید – axios.get()، axios.post()، axios.put() و axios.delete(). شما همچنین از Axios API برای ارسال درخواست های HTTP با پیکربندی یک شی جاوا اسکریپت با جزئیات درخواست استفاده کردید. در نهایت، هدرهای سفارشی را در درخواست های خود اضافه کردید.

امیدواریم اکنون درک خوبی از روش استفاده از Axios برای برنامه بعدی خود داشته باشید! چیز بعدی که قرار است بسازید چیست؟

کد منبع این مقاله موجود است روی GitHub.

(برچسب‌ها برای ترجمه)# http

منتشر شده در 1403-01-20 17:20:04

امتیاز شما به این مطلب