Руководство для начинающих по API с Vue.js
Axios - одна из самых популярных библиотек HTTP-запросов для Javascript, которая обычно используется для вызова API внутри приложений Vue.
В этой статье мы собираемся создать генератор цитат Канье Уэста, используя Axios в приложении Vue 3. Мы не только черпаем вдохновение у самого Е, но и узнаем, как подключить наши приложения Vue к API, и даже узнаем, как лучше организовать ваш проект Vue с помощью многократно используемых вызовов API. .
Давайте сразу перейдем к коду.
Настройка нашего первого базового HTTP-запроса
Первое, что нам нужно сделать, это установить Axios в наш проект в терминале.
npm install axiosЗатем мы можем войти внутрь компонента Vue и импортировать такие аксиомы.
<script>
import axios from 'axios'
export default {
setup () {
}
}
</script>Затем внутри нашего метода настройки запустим axios.get с URL-адресом Kanye REST API, чтобы получить случайную цитату. После этого мы можем использовать Promise.then, чтобы дождаться ответа на наш запрос.
<script>
import axios from 'axios'
export default {
setup () {
axios.get('https://api.kanye.rest/').then(response => {
// handle response
})
}
}
</script>Хорошо, теперь мы получаем ответ от нашего API, но давайте посмотрим, что это на самом деле. Для этого мы сохраним его как ссылку quote.
<script>
import axios from 'axios'
import { ref } from 'vue'
export default {
setup () {
axios.get('https://api.kanye.rest/').then(response => {
// handle response
quote.value = response
})
return {
quote
}
}
}
</script>Наконец, давайте напечатаем его в нашем шаблоне курсивом и заключим в кавычки. И, конечно же, нам нужна определенная ссылка на эту цитату.
<template>
<div>
<i>"{{ quote }}"</i>
<p>- Kanye West</p>
</div>
</template>Хорошо, давайте посмотрим, что у нас есть в нашем браузере.
Здесь мы можем увидеть нашу цитату, но там есть вся эта дополнительная информация, например код ответа на наш запрос.
Что касается нашего генератора цитат Канье, нас действительно интересует только это data.quote значение, поэтому, вернувшись в раздел сценария, давайте укажем, к какому свойству в response мы хотим получить доступ.
axios.get('https://api.kanye.rest/').then(response => {
// handle response
quote.value = response.data.quote
})Хорошо, если мы вернемся, мы увидим, что получаем только цитату. Потрясающие.
Использование Axios с async / await
Еще один способ использования Axios в нашем приложении Vue - это шаблон _12 _ / _ 13_.
Внутри настройки давайте начнем с комментирования нашего текущего кода GET и создания асинхронного метода с именем loadQuote. Внутри мы можем использовать тот же метод axios.get, но на этот раз мы хотим использовать async, чтобы дождаться его завершения, а затем сохранить этот результат внутри константы с именем response.
Затем еще раз установим значение quote.
const loadQuote = async () => {
const response = await KanyeAPI.getQuote()
quote.value = response.data.quote
}Вот и все. Если мы посмотрим на наше приложение, оно работает точно так же, но в нашем коде мы используем шаблон async / await.
Потрясающие.
Обработка ошибок в Axios
В шаблоне async-await мы можем добавить обработку ошибок, заключив наш вызов API в try и catch. Вот и все.
try {
const response = await KanyeAPI.getQuote()
quote.value = response.data.quote
} catch (err) {
console.log(err)
}Используя исходный синтаксис обещаний, мы можем добавить .catch после вызова нашего API, чтобы фиксировать любые ошибки, возникающие из нашего запроса.
axios.get('https://api.kanye.rest/')
.then(response => {
// handle response
quote.value = response.data.quote
}).catch(err => {
console.log(err)
})Отправка запроса POST
Теперь, когда мы знаем, как отправлять запросы GET с помощью Axios, давайте посмотрим на отправку запросов POST.
Для этого в этом руководстве мы будем использовать Мок-вызовы API JSONPlaceholder.
И если мы посмотрим на их документацию, они нам выдадут запрос /posts POST.
Хорошо, давайте сделаем кнопку, которая будет запускать наш вызов API. В нашем шаблоне создадим кнопку с надписью «Создать публикацию», и при ее нажатии вызывается метод с именем createPost.
<template>
<div>
<i>"{{ quote }}"</i>
<p>- Kanye West</p>
<p>
<button @click="createPost">Create Post</button>
</p>
</div>
</template>Хорошо - мы можем перейти к нашему сценарию, создать этот createPost метод и вернуть его из setup.
В этом методе, аналогичном нашему запросу GET, нам просто нужно сказать axios.post, передать наш URL-адрес, который является https://jsonplaceholder.typicode.com/posts, а затем мы можем просто скопировать и вставить данные заполнителя из их документации.
const createPost = () => {
axios.post('https://jsonplaceholder.typicode.com/posts', JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
})).then(response => {
console.log(response)
})
}Хорошо, давай попробуем.
Если мы нажмем нашу кнопку, мы увидим, что наша консоль регистрирует массу информации, говорящей нам, что наш почтовый запрос был успешным.
Потрясающие.
Совет от профессионала: напишите многоразовые вызовы API с помощью Axios
Один совет, который я использую в своих проектах, чтобы помочь организовать все мои вызовы API, - это создать папку src/services, которая будет содержать мои вызовы API.
У них будет 2 типа файлов:
API.js- файл, который создаст экземпляр Axios с определеннымbaseURL, который будет использоваться для всех маршрутов.{specific functionality}API.js- более специфические файлы, которые можно использовать для организации вызовов API в повторно используемые модули.
Это дает несколько преимуществ. Во-первых, создание одного API.js файла, который создает экземпляры axios, означает, что ваш базовый URL-адрес установлен в одном месте - это означает, что если вы хотите переключаться между серверами dev и prod, вам нужно только изменить свой код в этом файл.
Итак, давайте создадим наш services/API.js файл и установим для нашего Axios baseURL значение по умолчанию Kanye REST API, если мы не передадим другое значение.
import axios from 'axios'
export default(url='https://api.kanye.rest') => {
return axios.create({
baseURL: url,
})
}На этом все, теперь давайте создадим KanyeAPI.js файл и import API from './API'. Здесь мы хотим экспортировать разные вызовы API.
Вызов API() дает нам экземпляр Axios, который мы можем вызвать .get или .post! Итак, вот код, который получит нашу случайную цитату.
import API from './API'
export default {
getQuote() {
return API().get('/')
},
}Затем, внутри App.vue, давайте заставим наш компонент использовать этот новый файл с его многократно используемым вызовом API вместо того, чтобы создавать Axios самостоятельно.
const loadQuote = async () => {
try {
const response = await KanyeAPI.getQuote() // <--- THIS LINE
quote.value = response.data.quote
} catch (err) {
console.log(err)
}
}Вот и все! Если мы загружаем наше приложение, мы все равно загружаемся в кавычках.
Теперь давайте переместим наш createPost в отдельный метод многократного использования.
Вернемся к KanyeAPI.js, давайте добавим createPost к экспорту по умолчанию, и это будет принимать данные для почтового запроса в качестве аргумента, который мы можем передать нашему HTT {запросу.
Подобно нашему запросу GET, мы хотим вернуть наш API, чтобы получить экземпляр axios, но на этот раз нам нужно переопределить значение URL-адреса по умолчанию и передать URL-адрес JSONplaceholder. Затем мы можем вызвать Axios post, как мы привыкли.
export default {
getQuote() {
return API().get('/')
},
createPost(data) {
return API('https://jsonplaceholder.typicode.com/').post('/posts', data)
}
}Вот так просто.
Еще в App.vue мы можем вызвать наш новый метод публикации вот так.
const createPost = () => {
const response = await KanyeAPI.createPost(JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}))
console.log(response)
}Теперь, когда мы нажмем нашу кнопку, мы увидим, что наши выделенные файлы API работают, что дает нам код 201, означающий, что публикация прошла успешно.
Вот и все!
Самое замечательное в переносе вызовов API из этих компонентов Vue в их собственные файлы заключается в том, что теперь мы можем использовать эти вызовы API в любом месте нашего приложения. Это позволяет нам создавать более масштабируемый и многократно используемый код.
Надеюсь, это помогло и удачного кодирования!
Законченный код Vue и Axios
<template> <div> <i>"{{ quote }}"</i> <p>- Kanye West</p> <p> <button @click="createPost">Create Post</button> </p> </div> </template> <script> import axios from 'axios' import { ref } from 'vue' import KanyeAPI from './services/KanyeAPI' export default { setup () { const quote = ref('') const loadQuote = async () => { try { const response = await KanyeAPI.getQuote() quote.value = response.data.quote } catch (err) { console.log(err) } } loadQuote() // axios.get('https://api.kanye.rest/') // .then(response => { // // handle response // quote.value = response.data.quote // }).catch(err => { // console.log(err) // }) const createPost = () => { const response = await KanyeAPI.createPost(JSON.stringify({ title: 'foo', body: 'bar', userId: 1, })) console.log(response) // axios.post('https://jsonplaceholder.typicode.com/posts', JSON.stringify({ // title: 'foo', // body: 'bar', // userId: 1, // })).then(response => { // console.log(response) // }) } return { createPost, quote } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>import axios from 'axios' export default(url='https://api.kanye.rest') => { return axios.create({ baseURL: url, }) }import API from './API' export default { getQuote() { return API().get('/') }, createPost(data) { return API('https://jsonplaceholder.typicode.com/').post('/posts', data) } }
Больше контента на plainenglish.io
