O

Axios: HTTP so'rovlarini yuborish va boshqarish

Oyatillo Toshtemirov2024-12-25

Axios - bu zamonaviy veb-ishlab chiqishda keng qo'llaniladigan HTTP kutubxona. Axiosni ishlatish juda oson. U Promise asosida ishlaydi va brauzerda ham, Node.js muhitida ham ishlaydi.

Axiosning asosiy afzalliklari:

1. Avtomatik JSON transformatsiya: Axios JSON formatidagi ma'lumotlarni avtomatik ravishda qayta ishlaydi. 2. Xavfsizlik: Axios XSRF hujumlaridan himoya qiladi. 3. So'rov va javoblarni boshqarish: Axiosda so'rovlar va javoblarni oson qayta ishlash mumkin. 4. Xatolarni boshqarish: Axiosda xatolarni oson boshqarish mumkin. 5. Interceptorlar: So'rovlar va javoblarni yuborish yoki qabul qilishdan oldin ularni o'zgartirish imkoniyati. 6. Parallel so'rovlar: Bir nechta so'rovlarni parallel ravishda yuborish imkoniyati.

Axiosni ishlatish misollari:

1. Asosiy GET so'rovi:

import axios from 'axios';

axios.get('https://api.example.com/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Xato yuz berdi:', error);
  });

2. POST so'rovi:

axios.post('https://api.example.com/users', {
  firstName: 'Oyatillo',
  lastName: 'Toshtemirov'
  email: 'oyatillotoshtemirov@gmail.com'
  })
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Xato yuz berdi:', error);
});

3. Async/Await bilan ishlatish:

async function getUser() {
  try {
    const response = await axios.get('https://api.example.com/user/12345');
    console.log(response.data);
  } catch (error) {
    console.error('Xato yuz berdi:', error);
  }
}

4. So'rov parametrlarini qo'shish:

axios.get('https://api.example.com/users', {
  params: {
    ID: 12345
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Xato yuz berdi:', error);
});

5. Interceptorlardan foydalanish:

// So'rov interceptori
axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
  return config;
}, error => {
  return Promise.reject(error);
});

// Javob interceptori
axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 403||error.response.status === 401) {
    // Token eskirgan, foydalanuvchini login sahifasiga yonaltirish 
  }
  return Promise.reject(error);
});

6. Parallel so'rovlar:

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

Axiosni ishlatish juda oddiy va samarali. U HTTP so'rovlarini yuborish va qabul qilishni osonlashtiradi, shuningdek, ko'plab qo'shimcha imkoniyatlar taqdim etadi. Axiosdan foydalanib, siz o'z dasturingizda API bilan ishlashni yanada samarali va xavfsiz qila olasiz.