همه چیز درباره اکسیوس…🥳

ek3nk4r 2024-11-23

0 10 خواندن این مطلب 5 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

Summarize this content to 400 words in Persian Lang

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

رهگیرهای HTTP:

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

شروع کار با Axios

برای نصب Axios در پروژه خود، می توانید از npm (Node Package Manager) یا Yarn (یک مدیر بسته توسعه یافته توسط Facebook) استفاده کنید. هم npm و هم Yarn به شما امکان مدیریت و نصب بسته های جاوا اسکریپت از جمله Axios را می دهند. در اینجا نحوه نصب Axios با استفاده از npm یا Yarn آورده شده است:

Axios Request Interceptor:

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

import axios from ‘axios’;

/* The code `axios.interceptors.request.use((config) => { … })` is creating an interceptor for Axios
requests. */
axios.interceptors.request.use((config) => {
// Log to print that request is intiated..
console.log(‘Request was sent’);

// Data that can be keep track of which are sent in request
console.log(`[${config.method}] ${config.url}`);
console.log(`Headers :`);
console.log(config.headers);
console.log(`Params : `);
console.log(config.params);
console.log(`Data : `);
console.log(config.data);

return config;
});

const fetchQuotes = async () => {
try {
const res = await axios.get(`https://type.fit/api/quotes`);
} catch (error) {
console.log(error);
}
};

تنظیم هدر درخواست:

می‌توانیم از رهگیرهای درخواست برای تنظیم هدرهای HTTP پیش‌فرض که می‌خواهیم در هر درخواست ارسال کنیم، استفاده کنیم.

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

رهگیر پاسخ:

به طور مشابه، ما همچنین می توانیم یک رهگیر پاسخ با Axios راه اندازی کنیم که هر زمان که پاسخ API را دریافت کنیم اجرا می شود.

راه اندازی یک رهگیر پاسخ با Axios به شما این امکان را می دهد که پاسخ ها را قبل از اینکه توسط متدهای then() یا catch() مدیریت شوند، رهگیری کنید. این ویژگی برای رسیدگی به خطاها، اصلاح داده‌های پاسخ، یا انجام هر عملیات دیگری که نیاز دارید مفید است. در اینجا نحوه تنظیم یک رهگیر پاسخ با Axios آمده است:

// Axios response interceptor setup
axios.interceptors.response.use(
(response) => {
// Handle successful responses
console.log(‘Response received:’, response.data);
return response;
},
(error) => {
// Handle response errors
console.error(‘Error encountered:’, error);
return Promise.reject(error);
}
);

// Make a sample GET request
axios.get(‘https://jsonplaceholder.typicode.com/posts/1’)
.then((response) => {
console.log(‘Response data:’, response.data);
})
.catch((error) => {
console.error(‘Error fetching data:’, error);
});

همچنین، لطفاً راهنمایی های خود را در نظرات به اشتراک بگذارید. 🧐

👇 می توانید از طریق 👇 پیدا کنید و با من ارتباط برقرار کنید
فیس بوک
لینکدین
توییتر
Github
کد نویسی مبارک و به کاوش ادامه دهید!

Axios

رهگیرهای HTTP:

شروع کار با Axios

Axios Request Interceptor:

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

import axios from 'axios';

/* The code `axios.interceptors.request.use((config) => { ... })` is creating an interceptor for Axios
requests. */
axios.interceptors.request.use((config) => {
  // Log to print that request is intiated..
  console.log('Request was sent');

  // Data that can be keep track of which are sent in request
  console.log(`[${config.method}] ${config.url}`);
  console.log(`Headers :`);
  console.log(config.headers);
  console.log(`Params : `);
  console.log(config.params);
  console.log(`Data : `);
  console.log(config.data);

  return config;
});

const fetchQuotes = async () => {
  try {
    const res = await axios.get(`https://type.fit/api/quotes`);
  } catch (error) {
    console.log(error);
  }
};

تنظیم هدر درخواست:

رهگیر پاسخ:

// Axios response interceptor setup
axios.interceptors.response.use(
  (response) => {
    // Handle successful responses
    console.log('Response received:', response.data);
    return response;
  },
  (error) => {
    // Handle response errors
    console.error('Error encountered:', error);
    return Promise.reject(error);
  }
);

// Make a sample GET request
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => {
    console.log('Response data:', response.data);
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
  });

همچنین، لطفاً راهنمایی های خود را در نظرات به اشتراک بگذارید. 🧐