Доступ к REST API с помощью Axios

Development, Java | Amber | Комментировать запись

Разработчики Vue 2.0 решили, что наличие встроенного клиентского модуля HTTP является избыточным и это лучше обслуживать сторонними библиотеками. Чаще всего для этого рекомендуется использовать Axios.

Axios – это клиентская библиотека HTTP. По умолчанию она использует промисы и работает как на клиенте, так и на сервере, что делает ее подходящим вариантом для выборки данных во время рендеринга на стороне сервера. А поскольку Axios использует промисы, ее можно комбинировать с async/await, чтобы получить краткий и простой в использовании API.

В этом руководстве вы научитесь добавлять Axios в проект Vue.js для обработки задач, связанных с заполнением и отправкой данных. Вы также узнаете о создании многоразового базового экземпляра.

Требования

Чтобы выполнить этот мануал, вам понадобится локальная установка Node.js. Инструкции по установке зависят от дистрибутива, выберите свой и приступайте к настройке среды: Mac OS, Ubuntu, CentOS, Debian.

Установка и импорт axios

Для начала мы установим библиотеку axios.

Это можно сделать с помощью npm:

npm install axios --save

Или с помощью Yarn:

yarn add axios

Чтобы добавить Axios в свой проект Vue.js, нужно импортировать его:

import axios from 'axios';

Итак, библиотека доступна в нашем проекте. Затем мы воспользуемся методом axios.get(), чтобы сделать GET-запрос.

Добавление данных с помощью GET-запроса

Вы можете использовать библиотеку Axios непосредственно в своих компонентах для извлечения данных из метода или хука жизненного цикла:

<template>
  <div>
    <ul v-if="posts && posts.length">
      <li v-for="post of posts">
        <p><strong>{{post.title}}</strong></p>
        <p>{{post.body}}</p>
      </li>
    </ul>

    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      errors: []
    }
  },

  // Извлекает сообщения при создании компонента.
  created() {
    axios.get(`http://jsonplaceholder.typicode.com/posts`)
    .then(response => {
      // Ответы JSON обрабатываются автоматически.
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Версия этого кода с async/await будет выглядеть так:

<!-- ... template code ... -->

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      errors: []
    }
  },

  // Извлекает сообщения при создании компонента.
  async created() {
    try {
      const response = await axios.get(`http://jsonplaceholder.typicode.com/posts`)
      this.posts = response.data
    } catch (e) {
      this.errors.push(e)
    }
  }
}
</script>

Этот код извлекает “posts” из JSONPlaceholder и заполняет неупорядоченный список извлеченными данными. Любые обнаруженные ошибки будут отображаться в отдельном неупорядоченном списке.

А теперь давайте посмотрим, как выполнить запроса POST с помощью axios.post().

Отправка данных с помощью POST-запроса

Вы можете использовать Axios для отправки запросов POST, PUT, PATCH и DELETE.

Примечание: Запросы не нужно отправлять при каждом событии ввода. Рассмотрите возможность использования дросселирования или противодействия.

<template>
  <div>
    <input type="text" v-model="postBody" @change="postPost()" />
    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      postBody: '',
      errors: []
    }
  },

  methods: {
    // при вызове загружает заметки на сервер.
    postPost() {
      axios.post(`http://jsonplaceholder.typicode.com/posts`, {
        body: this.postBody
      })
      .then(response => {})
      .catch(e => {
        this.errors.push(e)
      })
    }
  }
}
</script>

Версия кода с async/await выглядит так:

<!-- ... template code ... -->

<script>
import axios from 'axios';

export default {
  data() {
    return {
      postBody: '',
      errors: []
    }
  },

  methods: {
    // при вызове загружает заметки на сервер.
    async postPost() {
      try {
        await axios.post(`http://jsonplaceholder.typicode.com/posts`, {
          body: this.postBody
        })
      } catch (e) {
        this.errors.push(e)
      }
    }
  }
}
</script>

Этот код создает поле ввода, которое будет отправлять данные в JSONPlaceholder. Любые обнаруженные ошибки собираются в отдельный неупорядоченный список.

Давайте теперь попробуем использовать axios.create() для создания базового экземпляра.

Создание базового экземпляра

Часто упускаемая из виду, но очень полезная возможность, которую предоставляет Axios, – это создание базового экземпляра, что позволяет вам использовать общий базовый URL-адрес и конфигурацию для всех вызовов данного экземпляра. Это полезно, если все ваши вызовы относятся к определенному серверу или вам нужно поделиться заголовками. Создайте файл http-common.js и поместите в него такие строки:

import axios from 'axios';

export const HTTP = axios.create({
  baseURL: `http://jsonplaceholder.typicode.com/`,
  headers: {
    Authorization: 'Bearer {token}'
  }
})

Теперь вы можете использовать HTTP в своем компоненте ExampleComponentBase.vue:

<template>
  <div>
    <ul v-if="posts && posts.length">
      <li v-for="post of posts">
        <p><strong>{{post.title}}</strong></p>
        <p>{{post.body}}</p>
      </li>
    </ul>

    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import { HTTP } from './http-common';

export default {
  data() {
    return {
      posts: [],
      errors: []
    }
  },

  created() {
    HTTP.get(`posts`)
    .then(response => {
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Этот код использует конфигурацию, установленную в http-common.js, и подключается к JSONPlaceholder с заголовком Authorization. Он извлекает posts и улавливает любые ошибки.

Заключение

В этой статье вы научились использовать Axios для внесения и передачи данных. Также вы знаете, как как создать многоразовый базовый экземпляр. Это лишь малая часть того, что может сделать Axios. За дополнительной информацией по Axios можно обратиться к репозиторию GitHub.