Vue.js Creating Reusable Functions

Question

My code is horrible. I'm new on this Vue.js. As you can see I have two AJAX call that needs to become a function. How I'm going to do it. I can't use for example

var app = this
this.allAdmissions('http://localhost/school/api/admissions', app.admission)

and then in my methods I will just

allAdmissions: _.debounce( function(url, value){

                axios.get(url)
                    .then( function(response ){
                        value = response.data.admissions

                    })
                    .catch( function(error){
                        console.log(error)
                    })
            }),

It doesn't work. I need to create a function to combine this two.

var app = new Vue({
    el: '#app',
    data: {
        value: '',
        admissions: [],
        schoolyear: []
    },

    created: function(){
        this.allAdmissions('http://localhost/school/api/admissions')
        this.allSchoolYear('http://localhost/school/api/schoolyear')
    },
    methods: {

        allAdmissions: _.debounce( function(url){
                var app = this
                axios.get(url)
                    .then( function(response ){
                        app.admissions = response.data.admissions

                    })
                    .catch( function(error){
                        console.log(error)
                    })
            }),
        allSchoolYear: _.debounce( function(url){
                var app = this
                axios.get(url)
                    .then( function(response ){
                        app.schoolyear = response.data.schoolYear

                    })
                    .catch( function(error){
                        console.log(error)
                    })
            })



    }
})

Answer 1

I see that you are using promises for the ajax request which is a great step forward. I would suggest creating a separate js object with a single entrypoint (public) method to consolidate the logic of making both requests. this single object would return a composed promise that is resolved when both requests are fulfilled. take a look at Promise.All for this. then you would call your custom method from the ready hook inside the vue instance. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all .

what this will get you is code that is easier to reason about and debug for typos or any other flow mistake you may have made.

Also another suggestion is that you use arrow functions for your callbacks like so.

.then((response) => {
    this.admissions = response.data.admissions
 })

what this will allow you to do is skip the

var app = this 

binding so that 'this' retains the reference to your current vue instance.