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

Posted 2023-02-22

【中文标题】Vue.js 2.0 - 在方法 AJAX Axios 中传递参数

【英文标题】：Vue.js 2.0 - Passing arguments in methods 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) 调用它。这是正确的吗？

您是想创建一个可重复使用的函数，还是只是确保该函数每半秒执行一次？

感谢它的工作！如此简单的解决方案...

是的，我认为人们只是有点困惑。

【参考方案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。