Vue.js 2.0 - 在方法 AJAX Axios 中传递参数答案

【问题标题】：Vue.js 2.0 - Passing arguments in methods AJAX AxiosVue.js 2.0 - 在方法 AJAX Axios 中传递参数
【发布时间】：2017-08-18 19:32:38
【问题描述】：

我需要在使用 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)
                })
        })
    }
});

正如您在mounted 中看到的，我调用方法this.allAdmissions() 我需要传递一个参数，以便我可以重用该函数。例如 this.allAdmissions('http://localhost/school/api/hello')。然后在 axios.get('url') 中使用它。谢谢

【问题讨论】：

您只需要_.debounce(function(url){}, delay)。 Debounce 将传递参数。
我可以这样传递它吗？allAdmission('htpp://localhost/school/api/hello') 然后使用 _.debounce(function(url), 500) 调用它。这是正确的吗？
您是想创建一个可重复使用的函数，还是只是确保该函数每半秒执行一次？
感谢它的工作！如此简单的解决方案...
是的，我认为人们只是有点困惑。

标签： ajax vue.js axios

【解决方案1】：

看起来您要做的是创建一个可以接受 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) 
      }) 
  })
}

【讨论】：

是的，它现在正在工作。我刚刚添加了var app=this 和app[value]=response.data.admissions，但我知道它适用于第三个参数。非常感谢你没有放弃！你是摇滚明星！

【解决方案2】：

如果有些需要多个 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。

【讨论】：