بنظرتون axios چیه؟

یه کتابخونه از جاوا اسکریپت به نام axios هست ک برای انجام درخواستهای HTTP استفاده میشه. این یعنی میتونیم با استفاده از Axios دادهها رو از یه سرور بگیریم یا به سرور بفرستیم. خیلی از برنامهنویسها از Axios استفاده میکنن چون هم سینتکس سادهای داره و هم قول دادهها رو مدیریت میکنه (پشتیبانی از Promise).

چرا از Axios استفاده کنیم؟

1. سینتکس ساده و خوانا: کار کردن با Axios خیلی راحتتر از XMLHTTPRequest هست.
2. پشتیبانی از Promise: میتونیم به راحتی با استفاده از then و catch درخواستهامون رو مدیریت کنیم.
3. پشتیبانی از مرورگرهای مختلف: Axios در همه مرورگرهای مدرن و حتی قدیمیها خوب کار میکنه.
4. قابلیت پیکربندی بالا: میتونید درخواستها رو به راحتی پیکربندی کنید.
5. مدیریت خودکار JSON: به صورت پیشفرض، دادههایی که میفرسته و میگیره رو به فرمت JSON مدیریت میکنه.

نصب Axios

برای استفاده از Axios، اول باید نصبش کنیم. اگه از Node.js استفاده میکنید، میتونید با دستور زیر نصبش کنید:

npm install axios

یا اگه از Yarn استفاده میکنید:

yarn add axios

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

<script src=&quothttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot>

استفاده از Axios

حالا که Axios رو نصب کردیم، بیایید یه مثال ساده بزنیم. فرض کنید میخواید یه درخواست GET بفرستید و دادههای یه API رو بگیرید.

درخواست GET

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data); // دادههایی که از سرور برگشت داده شدن
  })
  .catch(error => {
    console.error('Error fetching data:', error); // مدیریت خطا
  });

درخواست POST

حالا فرض کنید میخواید یه داده جدید به سرور بفرستید. برای این کار از درخواست POST استفاده میکنیم:

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data); // دادههایی که از سرور برگشت داده شدن
  })
  .catch(error => {
    console.error('Error posting data:', error); // مدیریت خطا
  });

تنظیمات و پیکربندی

میتونید درخواستهای خودتون رو به راحتی پیکربندی کنید. مثلا اگه نیاز به اضافه کردن هدرها دارید:

axios.get('https://jsonplaceholder.typicode.com/posts', {
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN_HERE'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error fetching data:', error);
});

استفاده از Async/Await

اگه میخواید از async/await استفاده کنید، کدتون خیلی خواناتر میشه:

async function fetchData() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

مدیریت خطاها

یکی از ویژگیهای خوب Axios اینه که میتونید خطاها رو به راحتی مدیریت کنید:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // خطاهایی که سرور برمیگردونه
      console.error('Error response:', error.response.data);
    } else if (error.request) {
      // خطاهایی که در ارسال درخواست اتفاق میافته
      console.error('Error request:', error.request);
    } else {
      // سایر خطاها
      console.error('Error message:', error.message);
    }
  });

Introduction to Axios

What is Axios?

Axios is a JavaScript library used to make HTTP requests. This means we can use Axios to fetch data from a server or send data to a server. Many developers use Axios because it has a simple syntax and supports promises for handling asynchronous operations.

Why use Axios?

1. Simple and Readable Syntax: Working with Axios is much easier than using XMLHTTPRequest.
2. Promise Support: You can easily handle your requests using then and catch.
3. Cross-Browser Support: Axios works well in all modern browsers and even in some older ones.
4. Highly Configurable: You can easily configure your requests.
5. Automatic JSON Handling: By default, it handles JSON data, both for sending and receiving.

Installing Axios

To use Axios, you first need to install it. If you are using Node.js, you can install it using the following command:

npm install axios

Or if you are using Yarn:

yarn add axios

If you want to use it in the browser, you can include it via CDN:

<script src=&quothttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot>

Using Axios

Now that we have Axios installed, let's look at a simple example. Suppose you want to send a GET request to fetch data from an API.

GET Request

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data); // Data returned from the server
  })
  .catch(error => {
    console.error('Error fetching data:', error); // Error handling
  });

POST Request

Now suppose you want to send new data to the server. For this, we use a POST request:

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data); // Data returned from the server
  })
  .catch(error => {
    console.error('Error posting data:', error); // Error handling
  });

Configuration

You can easily configure your requests. For example, if you need to add headers:

axios.get('https://jsonplaceholder.typicode.com/posts', {
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN_HERE'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error fetching data:', error);
});

Using Async/Await

If you want to use async/await, your code becomes much cleaner:

async function fetchData() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

Error Handling

One of the great features of Axios is that you can easily handle errors:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // Errors returned from the server
      console.error('Error response:', error.response.data);
    } else if (error.request) {
      // Errors that occur during the request
      console.error('Error request:', error.request);
    } else {
      // Other errors
      console.error('Error message:', error.message);
    }
  });