Love wordprees
Axios(فارسی/انگلیسی)
بنظرتون axios چیه؟
یه کتابخونه از جاوا اسکریپت به نام axios هست ک برای انجام درخواستهای HTTP استفاده میشه. این یعنی میتونیم با استفاده از Axios دادهها رو از یه سرور بگیریم یا به سرور بفرستیم. خیلی از برنامهنویسها از Axios استفاده میکنن چون هم سینتکس سادهای داره و هم قول دادهها رو مدیریت میکنه (پشتیبانی از Promise).
چرا از Axios استفاده کنیم؟
- سینتکس ساده و خوانا: کار کردن با Axios خیلی راحتتر از XMLHTTPRequest هست.
- پشتیبانی از Promise: میتونیم به راحتی با استفاده از then و catch درخواستهامون رو مدیریت کنیم.
- پشتیبانی از مرورگرهای مختلف: Axios در همه مرورگرهای مدرن و حتی قدیمیها خوب کار میکنه.
- قابلیت پیکربندی بالا: میتونید درخواستها رو به راحتی پیکربندی کنید.
- مدیریت خودکار JSON: به صورت پیشفرض، دادههایی که میفرسته و میگیره رو به فرمت JSON مدیریت میکنه.
نصب Axios
برای استفاده از Axios، اول باید نصبش کنیم. اگه از Node.js استفاده میکنید، میتونید با دستور زیر نصبش کنید:
npm install axios
یا اگه از Yarn استفاده میکنید:
yarn add axios
اگه توی مرورگر میخواید ازش استفاده کنید، میتونید از CDN استفاده کنید:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">
استفاده از 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?
- Simple and Readable Syntax: Working with Axios is much easier than using XMLHTTPRequest.
- Promise Support: You can easily handle your requests using
then
andcatch
. - Cross-Browser Support: Axios works well in all modern browsers and even in some older ones.
- Highly Configurable: You can easily configure your requests.
- 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="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">
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);
}
});
مطلبی دیگر از این انتشارات
نکات مهم Concurrency در Golang
مطلبی دیگر از این انتشارات
استعداد برنامه نویسی چیست؟
مطلبی دیگر از این انتشارات
بهترین روش ها برای نوشتن کد قابل تست در کاتلین