Оценок пока нет Отправка AJAX — запроса через Vue.js к удаленному серверу

AJAX — взаимодействие — это , пожалуй, первое, с чего нужно начинать, если мы хотим разработать клиент-серверное приложение по методологии REST.

Но, что, если вместо привычного нам jQuery мы хотим использовать Vue.js? Для этого есть несколько способов и один из них — это использование модуля axios.

Использование модуля axios

Данный модуль позволяет организовать связь между браузером, где расположено наше приложение с сервером, где установлен Node.js. Поэтому, установка данного модуля заключается:

• в установка модуля на сервер через npm;
• в подключении клиентской версии модуля к нашему приложению.

Для установки на сервер выполняем команду:

npm install axios

Для установки на стороне клиента устанавливаем через bower:

bower install axios

или подключаем исходник через CDN — ссылку:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Следующий код отправляет запрос на сервер и возвращает данные на этапе загрузки страницы  и работает в версии EcmaScript 5:

 var appIndex = new Vue({
            el: '#app',
            data: {
                regions: []
            },
            methods: {},
            watch: {},
            created: function () {},
            mounted: function () {
                var self = this;
                axios
                    .post("http://83.220.168.205:3000/location",
                    {
                        key: "SELECT"
                    })
                    .then(function(response){
                        self.regions = response.data.result;
                    }).catch(function (error) {
                        console.log(error);
                    });
            }
            
        });

То же самое в EcmaScript 6:

var appIndex = new Vue({
        el: '#app',
        data: {
            regions: []
        },
        methods: {},
        watch: {},
        created: function () {},
        mounted: function () {
            axios
                .post("http://83.220.168.205:3000/location",
                {
                    key: "SELECT"
                })
                .then((response)=>{
                    this.regions = response.data.result;
                }).catch((error)=>{
                    console.log(error);
                });
        }
        
    });