javascript 计算属性未定义,而不是返回axios请求响应

oug3syen  于 2023-05-05  发布在  Java
关注(0)|答案(2)|浏览(145)

我有一个输入,当它改变时,它应该更新它的计算对应物,这是一个axios请求,但是计算属性总是未定义的,尽管有来自服务器的响应,我看到数据确实打印出来。它只是因为某种原因没有归还。

computed: {
        itemsChildren() {
            if (this.parentReview == null) {
                return null
            } else {
                const formData = new FormData();

                formData.append('ID', this.parentReview["ID"]);

                axios({
                    method: 'POST',
                    url: window.location.origin + '/API/List',
                    data: formData,
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        "RequestVerificationToken": document.forms[0].querySelector('input[name="__RequestVerificationToken"]').value,
                    }
                }).then(response => {
                    const res = response.data;
                    return res;
                }).catch(error => {
                    if (error.response.status == 401 || error.response.status == 402 || error.response.status == 403) {
                        window.location.href = error.response.headers.expiredtokenredirecturi
                    }
                    console.log(error.response);
                });
            }
        }
    }

计算属性是否不应返回API响应?

a9wyjsp7

a9wyjsp71#

你没有从你的函数中返回任何东西,这是使用异步代码时的一个基本错误。
只需使用async/await作为axios响应,itemsChildren也应该是async

computed: {
  async itemsChildren() {
    if (this.parentReview == null) {
      return null;
    } else {
      const formData = new FormData();
      formData.append('ID', this.parentReview["ID"]);

      try {
        const response = await axios({
          method: 'POST',
          url: window.location.origin + '/API/List',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
            "RequestVerificationToken": document.forms[0].querySelector('input[name="__RequestVerificationToken"]').value,
          }
        });
        return response.data;
      } catch (error) {
        if (error.response.status == 401 || error.response.status == 402 || error.response.status == 403) {
          window.location.href = error.response.headers.expiredtokenredirecturi;
        }
        console.log(error.response);
      }
    }
  }
}

PS:我想帮忙,但我不知道computed是什么,它是如何工作的,甚至异步是否可以与它一起使用。
你可以在这里阅读异步编程:https://dev.to/raxraj/asynchronous-javascript-from-callbacks-to-asyncawait-a-journey-through-evolution-5578

kqlmhetl

kqlmhetl2#

您没有正确返回您的axios请求。您可以返回axios请求,或者更好地执行以下操作之一。我也不认为来自服务器的401,402,403响应会触发错误。但是你应该验证这一点,因为我不确定axios如何处理那些响应。

使用Promises

computed: {
    itemsChildren() {
        return new Promise( resolve => {
            if ( this.parentReview == null ) return resolve(null);

            const formData = new FormData();

            formData.append('ID', this.parentReview["ID"]);

            axios({
                method: 'POST',
                url: window.location.origin + '/API/List',
                data: formData,
                headers: {
                    'Content-Type': 'multipart/form-data',
                    "RequestVerificationToken": document.forms[0].querySelector('input[name="__RequestVerificationToken"]').value,
                }
            }).then(response => {
                if ( response.status == 401 || response.status == 402 || response.status == 403 ) {
                    window.location.href = response.headers.expiredtokenredirecturi;
                    return resolve(null);
                }
                return resolve( response.data );
            }).catch(error => {
                console.log( `Error [itemsChildren:axios]`, error );
                resolve( response.data );
            });
        });
    }
}

使用Async/Await

computed: {
    async itemsChildren() {
        if ( this.parentReview == null ) return null;

        const formData = new FormData();
        formData.append('ID', this.parentReview["ID"]);

        try {
            const response = await axios({
                method: 'POST',
                url: window.location.origin + '/API/List',
                data: formData,
                headers: {
                    'Content-Type': 'multipart/form-data',
                    "RequestVerificationToken": document.forms[0].querySelector('input[name="__RequestVerificationToken"]').value,
                }
            });
            if ( response.status == 401 || response.status == 402 || response.status == 403 ) {
                window.location.href = response.headers.expiredtokenredirecturi;
                return null;
            }
            return response;
        } catch ( error ) {
            console.log( `Error [itemsChildren:axios]`, error );
            return null;
        }
    }
}

相关问题