Использование HTTP-клиента Axios для работы с API

Axios — это популярный HTTP-клиент, который используется для отправки асинхронных HTTP-запросов на сервер. Он поддерживает Promise API, предоставляет возможность отмены запросов и защиту от CSRF. В этой статье мы рассмотрим, как интегрировать Axios с Vue.js 3 и работать с API.

Установка и настройка Axios

Для начала установите Axios, выполнив следующую команду:

npm install axios

Импортируйте Axios в файл main.js вашего проекта и сделайте его доступным глобально через свойство app.config.globalProperties:

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.mount('#app');

Отправка GET-запроса с Axios

Чтобы отправить GET-запрос с помощью Axios, используйте метод get(). Создайте компонент Users.vue и получите список пользователей из удаленного API:

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    };
  },
  async mounted() {
    const response = await this.$axios.get('https://jsonplaceholder.typicode.com/users');
    this.users = response.data;
  },
};
</script>

Отправка POST-запроса с Axios

Для отправки POST-запроса используйте метод post(). Создайте форму для создания нового пользователя и отправьте данные на сервер:

<template>
  <div>
    <h1>Create User</h1>
    <form @submit.prevent="createUser">
      <input v-model="name" type="text" placeholder="Name" />
      <input v-model="email" type="email" placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
    };
  },
  methods: {
    async createUser() {
      const userData = {
        name: this.name,
        email: this.email,
      };

      const response = await this.$axios.post('https://jsonplaceholder.typicode.com/users', userData);
      console.log(response.data);
    },
  },
};
</script>

Обработка ошибок и интерсепторы

Axios позволяет обрабатывать ошибки, используя блок try-catch. Также вы можете использовать интерсепторы для перехвата и обработки запросов или ответов глобально:

// main.js
app.config.globalProperties.$axios = axios;
axios.interceptors.request.use(
  (config) => {
    // Добавьте общие заголовки
    // или настройки для всех запросов
    config.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
    return config;
},
  (error) => {
    // Обработка ошибок запроса
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  (response) => {
    // Обработка успешных ответов
    return response;
  },
  (error) => {
    // Обработка ошибок ответа
    if (error.response.status === 401) {
  console.log('Ошибка аутентификации');
  }
    return Promise.reject(error);
  }
);

## Использование Axios с Composables

Вместо использования глобального объекта Axios внутри компонентов, вы можете создать composable функцию для обработки API-запросов:

// useApi.js
import { ref } from 'vue';
import axios from 'axios';

export default function useApi(url, method, data = null) {
  const response = ref(null);
  const error = ref(null);
  const isLoading = ref(false);

  const fetchData = async () => {
    isLoading.value = true;
    try {
      const result = await axios({ url, method, data });
      response.value = result.data;
    } catch (err) {
      error.value = err;
    } finally {
      isLoading.value = false;
    }
  };

  return { response, error, isLoading, fetchData };
}

Теперь вы можете использовать эту функцию в своих компонентах:

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import useApi from '@/composables/useApi';

export default {
  setup() {
    const { response, error, isLoading, fetchData } = useApi('https://jsonplaceholder.typicode.com/users', 'get');
    fetchData();

    return {
      users: response,
      error,
      isLoading,
    };
  },
};
</script>

Теперь у вас есть основное представление об использовании Axios для работы с API в Vue.js 3. Вы можете легко интегрировать Axios в свой проект и обрабатывать HTTP-запросы с минимальным усилием.

Добавить комментарий

Back to top button