Как настроить потребление REST API Vue.js с помощью Axios
Введение
В Vue 2.0 разработчики решили, что наличие встроенного клиентского модуля HTTP было довольно избыточным и могло бы лучше обслуживаться сторонними библиотеками. Наиболее часто рекомендуемой альтернативой является Axios.
Axios — это клиентская библиотека HTTP. Он использует promises по умолчанию и работает как на клиенте, так и на сервере, что делает его подходящим для получения данных во время рендеринга на стороне сервера. Поскольку он использует promises, вы можете комбинировать его с async/await, чтобы получить лаконичный и простой в использовании API.
В этой статье вы изучите добавление Axios в проект Vue.js для задач, связанных с заполнением данных и отправкой данных. Вы также узнаете о создании повторно используемого базового экземпляра.
Предпосылки
Чтобы следовать этой статье, вам понадобятся:
- Node.js установлен локально, что можно сделать, следуя инструкциям по установке Node.js и созданию локальной среды разработки.
Установка и импорт axios
Для начала необходимо установить Axios.
Вы можете установить Axios с помощью npm:
- npm install axios --save
Или с пряжей:
- 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: []
}
},
// Fetches posts when the component is created.
created() {
axios.get(`http://jsonplaceholder.typicode.com/posts`)
.then(response => {
// JSON responses are automatically parsed.
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: []
}
},
// Fetches posts when the component is created.
async created() {
try {
const response = await axios.get(`http://jsonplaceholder.typicode.com/posts`)
this.posts = response.data
} catch (e) {
this.errors.push(e)
}
}
}
</script>
Этот код извлекает сообщения из JSONPlaceholder и заполняет неупорядоченный список сообщениями. Любые обнаруженные ошибки будут отображаться в отдельном неупорядоченном списке.
Далее мы будем использовать axios.post() для выполнения запроса 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: {
// Pushes posts to the server when called.
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: {
// Pushes posts to the server when called.
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-адрес и конфигурацию для всех вызовов экземпляра. Это удобно, если все ваши вызовы относятся к определенному серверу или вам необходимо совместно использовать заголовки, такие как заголовок Authorization:
import axios from 'axios';
export const HTTP = axios.create({
baseURL: `http://jsonplaceholder.typicode.com/`,
headers: {
Authorization: 'Bearer {token}'
}
})
Теперь вы можете использовать HTTP в своем компоненте:
<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. Он извлекает сообщения и отлавливает любые ошибки.
Заключение
В этой статье вы познакомились с использованием Axios для заполнения и отправки данных. А также как создать многоразовый базовый экземпляр. Это лишь малая часть того, что может сделать Axios.
Посетите репозиторий GitHub для получения дополнительной информации и документации по Axios.
Если вы хотите узнать больше о Vue.js, посетите нашу тематическую страницу Vue.js, где вы найдете упражнения и проекты по программированию.