Question

我试图在main.js文件上创建一个通用的提取方法，该方法可以处理响应数据和响应代码，并且还可以捕获错误（返回响应错误）并显示错误代码。

例如：- 如果响应代码为500，则显示错误弹出窗口。如果响应代码为401，请转到登录页面如果响应代码为409，则显示错误弹出窗口等。

因此，我没有编写提取操作和条件，而是创建了一个通用方法，然后将URL作为参数传递给它。

但是我遇到一个问题，就是我对函数的功能调用没有得到任何响应。

在fee.js

中，获取代码是这样的

fetch('/api/fee/' + id, {
                method: 'GET',
                credentials: 'include',

}).then(response => {
        if (response.status == 200) {
            this.get_fee_list = json.data.fee
        }
        else if (response.status == 401) {
            window.location.replace("/login");
        }
        else if (response.status == 409) {
            this.notAuthorisedModal: true
        }
        else{
            this.showModal: true
        }
})
.catch(error => {
    showErrorModal: true
})

然后我将其更改为类似main.js中的波纹管的功能

function fetchData(url){

    fetch(url + id, {
                    method: 'GET',
                    credentials: 'include',

    }).then(response => {
            if (response.status == 200) {
                return json.data.fee
            }
            else if (response.status == 401) {
                window.location.replace("/login");
            }
            else if (response.status == 409) {
                this.notAuthorisedModal: true
            }
            else{
                this.showModal: true
            }
    })
    .catch(error => {
        this.showErrorModal: true
    })
}

在fee.js文件中


this.get_fee_list = fetchData('/api/fee/')

但是当我提醒get_fee_list时，它显示为未定义。

我使用async和await进行了尝试，但是我只能在then的回调函数中写入第二个main.js

async function commonApiCall(url) {
    return await fetch(url, {
        method: 'GET',
        credentials: 'include'
    })
    .then(response => response.json())
}

在fee.js

data = commonApiCall('/api/fee_discount/')

data.then(function(json){
this.get_fee_list = json.data.fee;
for (const key in this.get_fee_list) {
    const element = this.get_fee_list[key];
    element["dataDisabled"] = true
}
this.$forceUpdate()
});

在vue devtools中，我发现get_fee_list是空数组

如何修复“获取数据警报但未在VUE中显示”

0 个答案: