vue запросы по get и post с http клиентом axios.
  • 1557

Как с vue отправлять и получать данные с сервера с http клиентом axios.

Автор: admin | 11 мая (Сб.) 2019г. в 16ч.20м.

Для того, чтобы рассмотреть как обмениваться данными с сервером из кода vue js, буду использовать http клиент axios, который популярен в мире javascript. Лучше всего рассмотреть как это делается на практическом примере. В качестве примера создам компонент vue для вывода рандомных ссылок на статьи сайта. Данный список есть на многих сайтах и блогах. Как правило, он размещается под статьей или ближе к подвалу страницы. Выглядит он примерно так (исключительно для примера сделал скриншот из одного с популярных форумов по сео):
vue список материалов
Итак, приступим. Подключим axios и создадим базовый каркас компонента для вывода ссылок на материалы.
Как скачать и подключить axios можно посмотреть на гитхабе создателя https://github.com/axios/axios .

В примере используется node и webpack, а также single file component с расширением файла .vue .Но это не так важно для темы статьи. с тем же успехом можно подключить vue и axios через в html как обычно подключаются скрипты.
Будем считать, что axios и vue уже скачаны и лежат в нужной папке проекта или в папке node модулей. Создаем компонент и его базовый функционал.
Разметка html:
<div id="list-wrap"></div>​
Создадим экзенпляр класса vue, в который в качестве компонента передадим ArticleLists (который затем создадим) и его же используем в качестве шаблона.
import Vue from 'vue'
import ArticleLists from './articleLists'

new Vue({
  el: '#list-wrap',
  components: { ArticleLists },
  template: '<article-lists/>',
  )​

Создадим файл ArticleLists.vue и напишем структуру компонента.

<template>
<ul class="article-lists">
   <li v-for="(article, index) in allArticles">
      <a :href="article.link">{{article.title}}</a>
   </li>
</ul>
</template>

<script>
import axios from 'axios'

export default {
    data () {
        return {
            allArticles: [],
            countArticles: 5,
            error: ''
        }
    }

    mounted: function() {
        axios
                .get("http://my-site.com/rand-articles/count/" + this.countArticles)
                .then(response => {
                    this.allArticles = response.data;
                })
                .catch(function(e){
                    this.error = e;
                });
    },

}
</script>

В коде, в момент когда компонент монтируется сразу же происходит запрос к серверу, откуда возвращаются данные с массивом объектов, содержащих title статьи и ссылку. Далее, если ошибок нет и данные вернулись, то заполняем наши переменные в data. Шаблон принимает эти данные и ссылки с тайтлами выводятся в цикле.

Если нужно отправить данные на сервер, то используем  axios post. Например, добавим возможность поставить лайк для статьи, чтобы при нажатии на иконку "палец вверх" цифра в счетчике лайков увеличивалась на 1. 

<template>
<ul class="article-lists">
   <li v-for="(article, index) in allArticles">
      <a :href="article.link">{{article.title}}</a>

      //Добавили поддержку лайков для каждой ссылки на материал.
      <span class="like" v-on:click="setLike(article.id)">Лайк</span>
      <span class="likeCount">{{article.likesCount}}</span>
   </li>
</ul>
</template>

<script>
import axios from 'axios'

export default {
    data () {
        return {
            allArticles: [],
            countArticles: 5,// сколько материалов запрашивать на сервере
            error: ''
        }
    },

    methods: {
        
        async setLike: function (id) {
            try {
                let data  = await axios.post( "http://my-site.com/set-like", {article-id: id});
                
                this.allArticles = this.allArticles.map((art)=> {
                    if(art.id == id)
                         art.likesCount += 1;//или от сервера data.likesCount

                    return art;
                });
                
                if(data.status == 'success'){
                    
                } else {
                    throw new Error(data.status);
                }

            } catch(e) {
                this.error = e;
            }
        },


        async loadArticlesPreviewLinks(){
             axios
                .get("http://my-site.com/rand-articles/count/" + this.countArticles)
                .then(response => {
                    this.allArticles = response.data;
                })
                .catch(function(e){
                    this.error = e;
                });
        }

    },

    mounted: function() {
        this.loadArticlesPreviewLinks(); //загружаем все ссылки из сервера
    },

}
</script>

Здесь я добавил в разметку вывод кнопки "лайк" возле каждого заголовка статьи. При клике на span с классом like вызывается асинхронно метод для отправки на сервер по post данных с id статьи, для которой нужно увеличить число лайков на еденицу. Далее, если на сервере все прошло успешно, то перебираем массив имеющихся ссылок и добавляем единицу к счетчику лайков у нужной статьи.

Конечно, на стороне сервера все данные должны отдаваться в формате json, но суть работы я думаю ясна. Если будут вопросы, с удовольствием отвечу в комментариях.

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

Если Вам был полезен материал на моем сайте, поддержите пожалуйста мой проект, чтобы о нем узнали другие люди - кликните plizz :) на иконку в соц. сети, чтобы поделиться материалом с другими.