Question

我的代码太可怕了。我是这个Vue.js的新人。正如您所看到的，我有两个需要成为函数的AJAX调用。我将如何做到这一点。我无法使用例如

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

然后在我的方法中我将

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

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

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

它不起作用。我需要创建一个函数来组合这两个。

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

我看到你正在使用承诺来进行ajax请求，这是向前迈出的一大步。我建议使用单个入口点（公共）方法创建一个单独的js对象，以合并发出两个请求的逻辑。这个单个对象将返回一个在两个请求都满足时解析的组合promise。看看Promise.All就是这个。那么你可以从vue实例中的ready钩子调用你的自定义方法。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

这将使您获得的代码更易于推理和调试错别字或您可能犯的任何其他流错误。

另外一个建议是你使用箭头函数作为回调函数。

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

这将允许您做的是跳过

var app = this

绑定，以便'this'保留对当前vue实例的引用。

Vue.js创建可重用函数

1 个答案: