راهنمای کامل کار با Axios » خبر و ترفند روز

Axios یک گزینه بسیار مورد علاقه برای انجام درخواست های HTTP در جاوا اسکریپت است. با کمک این راهنمای جامع یاد بگیرید که چگونه آن را به طور موثر انجام دهید.

Axios یک کتابخانه جاوا اسکریپت است که یک API ساده برای ارسال درخواست های HTTP از کد جاوا اسکریپت سمت کلاینت یا کد Node.js سمت سرور ارائه می دهد. Axios بر روی Promise API جاوا اسکریپت ساخته شده است که باعث می شود کد ناهمزمان قابل نگهداری تر باشد.

شروع کار با Axios

می توانید از Axios در برنامه خود با استفاده از یک شبکه تحویل محتوا (CDN) یا نصب آن در پروژه خود استفاده کنید.

برای استفاده مستقیم از Axios در HTML، پیوند CDN زیر را کپی کنید و آن را در قسمت head فایل HTML خود قرار دهید:

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

با این رویکرد می توانید از Axios و روش های HTTP آن در بدنه اسکریپت های HTML خود استفاده کنید. Axios همچنین می تواند API های REST را در چارچوبی مانند React مصرف کند.

برای استفاده از Axios در پروژه Node.js، آن را با استفاده از مدیر بسته npm یا yarn در فهرست پروژه خود نصب کنید:

npm install axios # or yarn add axios

پس از نصب، می توانید از Axios در پروژه جاوا اسکریپت خود استفاده کنید:

const axios = require('axios');

در کنار این راهنما، شما با API رایگان JSONPlaceholder کار خواهید کرد. در حالی که این API دارای مجموعه ای از منابع است، شما فقط از /comments و /posts endpoints استفاده خواهید کرد. نقاط پایانی URL های خاصی هستند که برای بازیابی یا دستکاری داده ها می توان به آنها دسترسی داشت.

ایجاد درخواست GET با Axios

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

یکی از راه‌های ایجاد درخواست GET استفاده از متد axios() با یک شی است که متد درخواست را به عنوان get و آدرس اینترنتی ارسال درخواست را مشخص می‌کند.

مطلب مرتبط: نحوه استقرار یک برنامه React به صورت رایگان با صفحات GitHub

مثلا:

const axios = require("axios");

axios({
  method: "get",
  url: "https://jsonplaceholder.typicode.com/comments",
})
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });

این مثال با استفاده از مدل برنامه نویسی ناهمزمان با زنجیر کردن متدهای .then() و .catch، یک وعده ایجاد می کند. پروتز در صورت موفقیت آمیز بودن درخواست، پاسخ کنسول را ثبت می کند و در صورت عدم موفقیت درخواست، پیام خطا را ثبت می کند.

Axios همچنین راه ساده‌تری برای درخواست‌های GET ارائه می‌کند که نیاز به ارسال یک شی را با زنجیره‌کردن متد get() به نمونه axios از بین می‌برد.

مثلا:

axios
  .get("https://jsonplaceholder.typicode.com/comments")
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });

ایجاد درخواست های POST با Axios

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

قطعه کد زیر نمونه ای از نحوه استفاده از متد .post() Axios است:

axios
  .post("https://jsonplaceholder.typicode.com/comments", {
    name: "Jackson Smith",
    email: "jsmith@example.com",
    body: "This is a piece of art.",
  })
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });

کد یک درخواست POST به JSONPlaceholder API می کند تا یک نظر جدید ایجاد کند. متد axios.post داده ها را به نقطه پایانی /comments ارسال می کند.

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

ایجاد درخواست های PUT/PATCH با Axios

می توانید از درخواست PUT یا PATCH برای به روز رسانی یک منبع موجود در سرور استفاده کنید. در حالی که PUT جایگزین کل منبع می شود، PATCH فقط فیلدهای مشخص شده را به روز می کند.

برای ایجاد یک درخواست PUT یا PATCH با Axios، باید به ترتیب از متدهای .put() یا .patch() استفاده کنید.

مطلب مرتبط: چگونه با OpenCV تجربیات واقعیت افزوده همهجانبه ایجاد کنیم

در اینجا مثالی از نحوه استفاده از این روش ها برای به روز رسانی ویژگی ایمیل نظر با شناسه 100 آورده شده است:

const axios = require("axios");

axios
  .get("https://jsonplaceholder.typicode.com/comments/100")
  .then((res) => {
    console.log(res.data.email);
  })
  .catch((err) => {
    console.error(err);
  });

// Output:
// 'Leone_Fay@orrin.com'

axios
  .patch("https://jsonplaceholder.typicode.com/comments/100", {
    email: "donaymilin@ether.com",
  })
  .then((res) => {
    console.log(res.data.email);
  })
  .catch((err) => {
    console.error(err);
  });

// Output:
// 'donaymilin@ether.com',

این برنامه ابتدا یک درخواست GET به نقطه پایانی “https://jsonplaceholder.typicode.com/comments/100” می دهد. سپس ویژگی ایمیل نظر را با شناسه 100 در کنسول ثبت می کند. ما در حال انجام یک درخواست GET هستیم تا بتوانید ببینید پس از انجام درخواست PATCH چه چیزی تغییر کرده است.

درخواست دوم یک درخواست PATCH به همان نقطه پایانی است. این کد ایمیل نظر را به donaymilin@ether.com به روز می کند.

ایجاد درخواست های DELETE با Axios

می توانید از درخواست DELETE برای حذف یک منبع در سرور استفاده کنید.

مثال زیر را در مورد نحوه استفاده از متد .delete() برای حذف یک منبع از سرور در نظر بگیرید:

axios
  .delete("https://jsonplaceholder.typicode.com/comments/10")
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });
//Output:
// {}

با ثبت یک شی خالی در کنسول، کد بالا نشان می دهد که کامنت با شناسه 10 را حذف کرده است.

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

با استفاده از Axios می توانید داده ها را از چندین نقطه پایانی به طور همزمان واکشی کنید. برای این کار باید از متد .all() استفاده کنید. این روش آرایه ای از درخواست ها را به عنوان پارامتر خود می پذیرد و تنها زمانی حل می شود که همه پاسخ ها را دریافت کنید.

در مثال زیر، روش .all() داده ها را از دو نقطه پایانی به طور همزمان بازیابی می کند:

axios
  .all([
    axios.get("https://jsonplaceholder.typicode.com/comments?_limit=2"),
    axios.get("https://jsonplaceholder.typicode.com/posts?_limit=2"),
  ])
  .then(
    axios.spread((comments, posts) => {
      console.log(comments.data);
      console.log(posts.data);
    })
  )
  .catch((err) => console.error(err));

بلوک کد بالا درخواست ها را به طور همزمان ارسال می کند و سپس پاسخ ها را به متد .then() ارسال می کند. متد .spread() Axios پاسخ ها را جدا می کند و هر پاسخ را به متغیر خود اختصاص می دهد.

مطلب مرتبط: چگونه به یک توسعه دهنده مستقل تبدیل شویم: راهنمای نهایی

در نهایت، کنسول ویژگی داده‌های دو پاسخ را ثبت می‌کند: نظرات و پست‌ها.

رهگیری درخواست ها با Axios

گاهی اوقات، ممکن است لازم باشد درخواستی را قبل از اینکه به سرور برسد، رهگیری کنید. شما می توانید از متد interceptors.request.use() Axios برای رهگیری درخواست ها استفاده کنید.

در مثال زیر، متد برای هر درخواستی که انجام می شود، نوع درخواست را به کنسول ثبت می کند:

axios.interceptors.request.use(
  (config) => {
    console.log(`${config.method} request made`);
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

axios
  .get("https://jsonplaceholder.typicode.com/comments?_limit=2")
  .then((res) => console.log(res.data))
  .catch((err) => console.error(err));

این برنامه یک رهگیر Axios را با استفاده از روش axios.interceptors.request.use تعریف می کند. این روش اشیاء پیکربندی و خطا را به عنوان آرگومان می گیرد. شیء پیکربندی حاوی اطلاعاتی درباره درخواست، از جمله روش درخواست (config.method) و URL درخواست (config.url) است.

تابع interceptor شی پیکربندی را برمی‌گرداند و به درخواست اجازه می‌دهد به طور عادی ادامه یابد. اگر خطایی وجود داشته باشد، تابع شی Promise رد شده را برمی گرداند.

در نهایت، برنامه درخواست آزمایش رهگیر را می دهد. کنسول نوع درخواست انجام شده را ثبت می کند، در این مورد، یک درخواست GET.

چیزهای بیشتری برای Axios وجود دارد

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

Tags: اچ تی تی پی اس ای پی آی توسعه وب جاوا اسکریپت