Vue.js 2.0 - Передача аргументов в методах AJAX Axios

Мне нужно передать аргументы в методах, использующих ajax axios.

    var app = new Vue({
    el: '#app',
    data: {

        urlAdmission: 
        admissions: [
                        { name : 'asdf'},
                        { name : 'sd'}
                    ]
    },
    mounted: function(){
        this.allAdmissions()

    },
    methods: {

        allAdmissions: _.debounce( function(){
            var app = this
            axios.get('http://localhost/school/api/hello')
                .then( function(response ){
                    app.admissions = response.data.admissions
                })
                .catch( function(error){
                    console.log(error)
                })
        })
    }
});

Как вы можете видеть в смонтированном виде, я вызываю методы this.allAdmissions (). Мне нужно передать аргумент, чтобы я мог повторно использовать функцию. Например, this.allAdmissions ('http://localhost/school/api/hello'). Затем используйте его в axios.get ('url'). Спасибо


vue.js axios ajax
person Rbex    schedule 26.03.2017    source источник
comment
Все, что вам нужно, это _.debounce(function(url){}, delay). Debounce пройдет по параметрам.   -  person Bert    schedule 26.03.2017
comment
Могу ли я передать его так: allAdmission ('htpp: // localhost / school / api / hello'), а затем вызвать его с помощью _.debounce (function (url), 500). Это верно?   -  person Rbex    schedule 26.03.2017
comment
Вы пытаетесь создать функцию, которую можно будет использовать повторно, или просто убедитесь, что функция будет выполняться только раз в полсекунды?   -  person Bert    schedule 26.03.2017
comment
Спасибо, это работает! Так простое решение ...   -  person Rbex    schedule 26.03.2017
comment
Да, я думаю, люди были немного сбиты с толку.   -  person Bert    schedule 26.03.2017
comment
Последний вопрос @BertEvans mounted: function(){ var app = this this.allAdmissions('http://localhost/school/api/admissions', app.admissions) }, methods: { allAdmissions: _.debounce( function(url, value){ axios.get(url) .then( function(response ){ value = response.data.admissions }) .catch( function(error){ console.log(error) }) }) } Я передал разрешение на приложение, но оно не работает.   -  person Rbex    schedule 26.03.2017
comment
Передайте просто app вместо app.admissions, тогда value.admissions = response.data.admissions прилипнет.   -  person Alex Sakharov    schedule 26.03.2017

Ответы (2)


arrow_upward
2
arrow_downward

Похоже, что вы пытаетесь сделать функцию, которая может принимать URL-адрес и связывать результаты URL-адреса со значением переменной в ваших данных. Вот как это можно сделать.

methods: { 
  allAdmissions: _.debounce(function(url, value){ 
    axios.get(url)
      .then(function(response){ 
        this[value] = response.data.admissions 
      }.bind(this)) 
      .catch(function(error){ 
        console.log(error) 
      }) 
  })
}

Затем, если вы вызовете этот метод таким образом,

this.allAdmissions('http://localhost/school/api/admissions‌​', "admissions")

allAdmissions установит свойство admissions ваших данных на результат вашего вызова. Это работает, если вы всегда хотите использовать response.data.admissions, потому что вы это жестко запрограммировали. Если вы хотите, чтобы это тоже было переменным, вы можете передать третье значение, например,

methods: { 
  getSomeData: _.debounce(function(url, value, responseValue){ 
    axios.get(url)
      .then(function(response){ 
        this[value] = response.data[responseValue] 
      }.bind(this)) 
      .catch(function(error){ 
        console.log(error) 
      }) 
  })
}
person Bert    schedule 26.03.2017
comment
Да, сейчас работает. Я только что добавил var app=this и app[value]=response.data.admissions, но я знаю, что он будет работать с третьим параметром. Большое вам спасибо за то, что не сдавались! Ты рок-звезда! - person Rbex; 27.03.2017

arrow_upward
0
arrow_downward

В случае, если некоторым понадобится несколько запросов ajax. Вот пример.

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

    created: function(){

        this.ajaxAll()

    },
    methods: {

        ajaxAll: _.debounce( function(){
            var app = this
            var admissions = 'admissions'
            var schoolYear = 'schoolyear'
            axios.all([this.getAllData('http://localhost/school/api/admissions', 'admissions'), this.getAllData('http://localhost/school/api/schoolyear', 'schoolyear')]);


        }),

        getAllData: function(url, value){
            var app = this
            return axios.get(url)
                .then(function(response){
                    app[value] = response.data[value]
                    console.log(response.data.admissions)
                })
        }

    }
})

Кредит @Bert Evans.

person Rbex    schedule 27.03.2017