بسته NPM Axios: راهنمای مبتدیان برای نصب و ایجاد درخواست های HTTP – انجمن DEV

Summarize this content to 400 words in Persian Lang

مقدمه

هنگام ساخت برنامه های کاربردی وب مدرن، ایجاد درخواست های HTTP یک کار اصلی برای واکشی یا ارسال داده ها به سرور است. در حالی که جاوا اسکریپت فراهم می کند fetch API به عنوان یک راه بومی برای رسیدگی به این درخواست ها، بسیاری از توسعه دهندگان ترجیح می دهند از آن استفاده کنند بسته npm Axios، یک کتابخانه غنی از ویژگی ها و بصری. Axios با ارائه یک سرویس گیرنده HTTP مبتنی بر وعده که هم در مرورگرها و هم در محیط های Node.js یکپارچه کار می کند، این فرآیند را ساده می کند. پشتیبانی آن برای async/await خواندن و نگهداری کد را آسان‌تر می‌کند، مخصوصاً هنگام رسیدگی به درخواست‌های متعدد.

این وبلاگ به شما در شروع کار کمک می کند Axios بسته npm، نحوه نصب آن و استفاده از آن برای عملیات اصلی HTTP مانند GET، POST، و PUT. ما همچنین به ویژگی‌های آن و اینکه چرا این یک انتخاب برای توسعه‌دهندگان نسبت به جایگزین‌هایی مانند بومی است، خواهیم پرداخت. fetch API.

Axios چیست؟

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

ویژگی های Axios

مبتنی بر قول: یکپارچه با وعده ها و پشتیبانی کار می کند async/await نحو برای کد ناهمزمان پاک‌تر.

تبدیل خودکار JSON: Axios به طور خودکار پاسخ های JSON را به اشیاء جاوا اسکریپت تبدیل می کند و مرحله اضافی تجزیه داده ها را به صورت دستی ذخیره می کند.

رهگیرهای درخواست و پاسخ: این به توسعه دهندگان اجازه می دهد تا درخواست ها یا پاسخ ها را قبل از رسیدگی به آنها در سطح جهانی تغییر دهند.

تنظیمات پیش فرض: می‌توانید نمونه‌های Axios را با پیکربندی‌های از پیش تعریف‌شده مانند URLهای پایه یا هدر ایجاد کنید و کدهای تکراری را کاهش دهید.

رسیدگی به خطا: مدیریت خطای قوی با پیام های خطای دقیق را ارائه می دهد و اشکال زدایی را آسان تر می کند.

چرا Axios Over Fetch را انتخاب کنید؟

در حالی که fetch API به صورت بومی در جاوا اسکریپت موجود است، Axios چندین مزیت را ارائه می دهد که آن را به یک انتخاب ترجیحی تبدیل می کند:

کنترل خودکار JSON: با fetch، توسعه دهندگان باید به صورت دستی پاسخ را با استفاده از تجزیه و تحلیل کنند response.json(). Axios این کار را به صورت خودکار انجام می دهد.

// Using fetch
fetch(url)
.then(res => res.json())
.then(data => console.log(data));

// Using Axios
axios.get(url)
.then(response => console.log(response.data));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

درخواست رهگیرها: Axios به توسعه دهندگان این امکان را می دهد تا هدرها را تغییر دهند یا توکن های احراز هویت را از طریق رهگیرها مدیریت کنند، که به طور بومی توسط پشتیبانی نمی شود. fetch.

رسیدگی به خطا: در حالی که Axios یک شی خطای دقیق تری ارائه می دهد fetch کدهای پاسخ HTTP مانند 404 یا 500 را به عنوان درخواست های موفق در نظر می گیرد مگر اینکه صریحاً بررسی شود.

پشتیبانی از مرورگرهای قدیمی: Axios شامل پشتیبانی داخلی برای مرورگرهای قدیمی است، برخلاف fetch، که ممکن است نیاز به پلی پر داشته باشد.

این ویژگی ها در کنار سهولت استفاده از آن باعث می شود Axios npm ابزاری قابل اعتماد و مناسب برای توسعه‌دهندگان برای رسیدگی به درخواست‌های HTTP.

اگر به مقایسه عمیق تر علاقه دارید، ما وبلاگ دیگری داریم که عمیق تر به تفاوت های ظریف می پردازد. Axios در مقابل واکشی، بحث در مورد زمان انتخاب یکی از دیگری. اینجا را بررسی کنید: Axios در مقابل Fetch: کدام یک را باید برای پروژه خود انتخاب کنید؟

نحوه نصب Axios npm

شروع با Axios npm سریع و آسان است. در زیر دستورالعمل های گام به گام نصب و گنجاندن Axios در پروژه شما آورده شده است.

مرحله 1: نصب Axios

برای استفاده از Axios ابتدا باید آن را در پروژه خود نصب کنید. شما می توانید این کار را با استفاده از هر دو انجام دهید npm یا yarn.

استفاده از npm (Node Package Manager):
ترمینال خود را در پوشه پروژه باز کنید و دستور زیر را اجرا کنید:

npm install axios

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده از نخ:
اگر از Yarn به عنوان مدیر بسته خود استفاده می کنید، اجرا کنید:

yarn add axios

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این Axios را به عنوان یک وابستگی به شما اضافه می کند package.json فایل

مرحله 2: گنجاندن Axios در پروژه شما

پس از نصب Axios، باید آن را به فایل JavaScript یا TypeScript خود وارد کنید.

استفاده از CommonJS Syntax:
اگر در یک محیط CommonJS (مثلا Node.js) کار می کنید، می توانید Axios را با استفاده از require:

const axios = require(‘axios’);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده از نحو ES6:
برای ماژول‌های ES6 یا چارچوب‌های مدرن جاوا اسکریپت مانند React، Axios را به صورت زیر وارد کنید:

import axios from ‘axios’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هر دو روش بسته به تنظیمات پروژه و محیط جاوا اسکریپت شما کار خواهند کرد.

تایید نصب

در اینجا یک قطعه کد ساده برای تأیید اینکه Axios به درستی نصب و وارد شده است آورده شده است:

import axios from ‘axios’;

axios.get(‘https://jsonplaceholder.typicode.com/posts’)
.then(response => {
console.log(‘Axios is working:’, response.data);
})
.catch(error => {
console.error(‘Error using Axios:’, error);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این کد را در پروژه خود اجرا کنید، و اگر مشاهده کردید که داده های واکشی شده در کنسول خود وارد شده است، با موفقیت نصب و گنجانده شده است. Axios npm در پروژه شما

4. درک روش های HTTP با Axios

Axios مدیریت روش های HTTP را مانند GET، POST، PUT، و DELETE ساده با نحو بصری آن. بیایید هر یک از این روش ها را به طور مفصل بررسی کنیم، با مثال هایی که نحوه استفاده از آنها را نشان می دهد.

4.1. دریافت درخواست

الف GET درخواست برای بازیابی داده ها از یک سرور استفاده می شود. این یکی از رایج‌ترین روش‌های HTTP است که معمولاً برای واکشی فهرست‌ها، نمایه‌های کاربر یا هر داده فقط خواندنی استفاده می‌شود.

مثال کد:

axios.get(‘https://jsonplaceholder.typicode.com/users’)
.then(response => console.log(response.data))
.catch(error => console.error(error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

axios.get(url) a را می فرستد GET درخواست به URL ارائه شده
این response.data حاوی داده های واکشی از سرور است.
این .catch() بلوک هرگونه خطا، مانند مشکلات شبکه یا نقاط پایانی نامعتبر را کنترل می کند.

خروجی نمونه:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4.2. درخواست ارسال

الف POST درخواست برای ارسال داده ها به سرور، معمولاً برای ایجاد رکوردهای جدید مانند ثبت نام کاربر یا پست های وبلاگ استفاده می شود.

مثال کد:

axios.post(‘https://jsonplaceholder.typicode.com/posts’, {
title: ‘New Post’,
body: ‘This is a new post.’,
userId: 1
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

axios.post(url, data) a می فرستد POST درخواست به سرور با داده های مشخص شده در آرگومان دوم.
در این مثال، درخواست یک پست جدید با a ارسال می کند title، body، و userId.
پاسخ سرور شامل منبع جدید ایجاد شده است.

خروجی نمونه:

{
“id”: 101,
“title”: “New Post”,
“body”: “This is a new post.”,
“userId”: 1
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4.3. درخواست PUT

الف PUT درخواست برای به روز رسانی یک منبع موجود استفاده می شود. معمولاً کل منبع را با داده های به روز شده جایگزین می کند.

مثال کد:

axios.put(‘https://jsonplaceholder.typicode.com/posts/1’, {
id: 1,
title: ‘Updated Post’,
body: ‘This post has been updated.’,
userId: 1
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

axios.put(url, data) a می فرستد PUT درخواست به روز رسانی منبع در URL داده شده.
آرگومان دوم حاوی داده های به روز شده است که در این مورد به روز رسانی می شود title و body از پست با id: 1.
سرور با منبع به روز شده پاسخ می دهد.

خروجی نمونه:

{
“id”: 1,
“title”: “Updated Post”,
“body”: “This post has been updated.”,
“userId”: 1
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4.4. درخواست حذف

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

مثال کد:

axios.delete(‘https://jsonplaceholder.typicode.com/posts/1’)
.then(response => console.log(‘Deleted:’, response.data))
.catch(error => console.error(error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

axios.delete(url) a می فرستد DELETE درخواست به سرور
سرور منبع مشخص شده توسط URL را حذف می کند (/posts/1 در این مورد) و ممکن است یک پاسخ تأیید را برگرداند.

خروجی نمونه:

{}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پاسخ خالی نشان می دهد که حذف با موفقیت انجام شده است.

با استفاده از این روش‌های HTTP، Axios برای همه عملیات‌های CRUD (ایجاد، خواندن، به‌روزرسانی، حذف) روشی واضح و مختصر برای تعامل با APIها ارائه می‌کند. ساختار مبتنی بر وعده و مدیریت خطای قوی آن را به ابزاری قدرتمند برای هر پروژه تبدیل کرده است. بیایید اکنون برخی از ویژگی های پیشرفته Axios را بررسی کنیم!

ویژگی های پیشرفته Axios

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

پیکربندی هدرها

Axios به شما اجازه می دهد تا سرصفحه های درخواست را سفارشی کنید، که به ویژه برای ارسال نشانه های احراز هویت یا تنظیم انواع محتوا مفید است.
مثالی از تنظیم هدر برای درخواست API:

axios.get(‘https://api.example.com/data’, {
headers: {
Authorization: ‘Bearer your-auth-token’,
‘Content-Type’: ‘application/json’
}
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

راه اندازی نمونه های Axios

اگر با یک API کار می‌کنید که به پیکربندی‌های تکراری نیاز دارد، می‌توانید یک نمونه Axios با تنظیمات از پیش تعریف‌شده مانند URLهای پایه و هدرهای پیش‌فرض ایجاد کنید.
نمونه ای از ایجاد یک نمونه Axios:

const apiClient = axios.create({
baseURL: ‘https://api.example.com’,
headers: {
‘Content-Type’: ‘application/json’,
Authorization: ‘Bearer your-auth-token’
}
});

// Using the instance for a GET request
apiClient.get(‘/endpoint’)
.then(response => console.log(response.data))
.catch(error => console.error(error));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده از رهگیرها

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

axios.interceptors.request.use(
config => {
console.log(‘Request sent:’, config);
// Add custom logic, like appending an auth token
config.headers.Authorization = ‘Bearer your-auth-token’;
return config;
},
error => {
return Promise.reject(error);
}
);

// Example of a response interceptor
axios.interceptors.response.use(
response => {
console.log(‘Response received:’, response);
return response;
},
error => {
console.error(‘Error occurred:’, error);
return Promise.reject(error);
}
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

عیب یابی مسائل رایج

مانند هر ابزار دیگری، استفاده از Axios ممکن است با چالش هایی همراه باشد. در اینجا برخی از مشکلات رایجی که توسعه دهندگان با آن مواجه هستند و نحوه حل آنها آورده شده است:

مسائل CORS

مشکل: خطاهای اشتراک‌گذاری منابع متقاطع (CORS) زمانی رخ می‌دهند که سرور API درخواست‌های دامنه شما را مجاز نمی‌کند.

راه حل:

با فعال کردن هدرهای مناسب، مطمئن شوید که سرور از CORS پشتیبانی می کند Access-Control-Allow-Origin.
از یک پروکسی یا افزونه مرورگر در طول توسعه برای دور زدن خطا استفاده کنید.

درخواست مهلت زمانی

مشکل: پاسخ سرور API بیش از حد طول می کشد و باعث وقفه می شود.

راه حل: یک مهلت زمانی را در پیکربندی درخواست Axios خود تنظیم کنید:

axios.get(‘https://api.example.com/data’, { timeout: 5000 }) // 5 seconds
.then(response => console.log(response.data))
.catch(error => {
if (error.code === ‘ECONNABORTED’) {
console.error(‘Request timed out’);
} else {
console.error(‘Error:’, error);
}
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خطاهای شبکه

مشکل: مسائلی مانند ENOTFOUND یا ERR_NETWORK به دلیل مشکلات اتصال رخ می دهد.

راه حل: اتصال شبکه و URL API خود را بررسی کنید. منطق تلاش مجدد را برای خطاهای گذرا اضافه کنید:

async function fetchDataWithRetry(url, retries = 3) {
for (let i = 0; i < retries; i++) {
try {
const response = await axios.get(url);
return response.data;
} catch (error) {
if (i === retries – 1) throw error;
}
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خطاهای اشکال زدایی

مشکل: خطاهای Axios ممکن است همیشه قابل توضیح نباشند.

راه حل: برای جزئیات، شی خطا را بررسی کنید:

axios.get(‘https://api.example.com/data’)
.catch(error => {
console.error(‘Error message:’, error.message);
console.error(‘Error config:’, error.config);
console.error(‘Error response:’, error.response);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

رد وعده بدون کنترل

مشکل: فراموش کردن رسیدگی کردن .catch() می تواند منجر به اخطارهای عدم رسیدگی به وعده شود.

راه حل: همیشه الف را شامل شود .catch() مسدود کردن یا استفاده کنید try/catch با async/await برای مدیریت خطاها

با پرداختن به این مسائل رایج، می توانید از تجربه روان تری در حین کار با آن اطمینان حاصل کنید Axios npm در پروژه های شما

نتیجه گیری

در این راهنما، ما اصول استفاده را بررسی کرده ایم Axios npm برای ایجاد درخواست های HTTP در جاوا اسکریپت. از نصب Axios تا ایجاد اولین خود GET، POST،PUT و DELETE مشاهده کرده اید که چگونه با ساختار مبتنی بر وعده، تجزیه خودکار JSON و ویژگی های مدیریت خطای قوی، فرآیند را ساده می کند. ما همچنین قابلیت‌های پیشرفته‌ای مانند پیکربندی هدرها، ایجاد نمونه‌های Axios قابل استفاده مجدد و استفاده از رهگیرها برای اصلاح درخواست/پاسخ را لمس کردیم.

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

   // Using fetch
   fetch(url)
     .then(res => res.json())
     .then(data => console.log(data));

   // Using Axios
   axios.get(url)
     .then(response => console.log(response.data));

   npm install axios

   yarn add axios

   const axios = require('axios');

   import axios from 'axios';

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Axios is working:', response.data);
  })
  .catch(error => {
    console.error('Error using Axios:', error);
  });

axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

[
  { "id": 1, "name": "Leanne Graham", "email": "leanne@example.com" },
  { "id": 2, "name": "Ervin Howell", "email": "ervin@example.com" }
]

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'New Post',
  body: 'This is a new post.',
  userId: 1
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

{
  "id": 101,
  "title": "New Post",
  "body": "This is a new post.",
  "userId": 1
}

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
  id: 1,
  title: 'Updated Post',
  body: 'This post has been updated.',
  userId: 1
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

{
  "id": 1,
  "title": "Updated Post",
  "body": "This post has been updated.",
  "userId": 1
}

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => console.log('Deleted:', response.data))
  .catch(error => console.error(error));

{}

  axios.get('https://api.example.com/data', {
    headers: {
      Authorization: 'Bearer your-auth-token',
      'Content-Type': 'application/json'
    }
  })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

  const apiClient = axios.create({
    baseURL: 'https://api.example.com',
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Bearer your-auth-token'
    }
  });

  // Using the instance for a GET request
  apiClient.get('/endpoint')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

  axios.interceptors.request.use(
    config => {
      console.log('Request sent:', config);
      // Add custom logic, like appending an auth token
      config.headers.Authorization = 'Bearer your-auth-token';
      return config;
    },
    error => {
      return Promise.reject(error);
    }
  );

  // Example of a response interceptor
  axios.interceptors.response.use(
    response => {
      console.log('Response received:', response);
      return response;
    },
    error => {
      console.error('Error occurred:', error);
      return Promise.reject(error);
    }
  );

  axios.get('https://api.example.com/data', { timeout: 5000 }) // 5 seconds
    .then(response => console.log(response.data))
    .catch(error => {
      if (error.code === 'ECONNABORTED') {
        console.error('Request timed out');
      } else {
        console.error('Error:', error);
      }
    });

  async function fetchDataWithRetry(url, retries = 3) {
    for (let i = 0; i < retries; i++) {
      try {
        const response = await axios.get(url);
        return response.data;
      } catch (error) {
        if (i === retries - 1) throw error;
      }
    }
  }

  axios.get('https://api.example.com/data')
    .catch(error => {
      console.error('Error message:', error.message);
      console.error('Error config:', error.config);
      console.error('Error response:', error.response);
    });