时间戳

首页 > 解决方案 > Nuxt axios 无法处理服务器响应

javascript - Nuxt axios 无法处理服务器响应

问题描述

我是新手Nuxt.js，我面临着一种奇怪的问题。我的后端 API 中有一个端点，允许最终用户发送一个token和一个新的password并重置用户密码。

当请求被正确发送并且服务器以正确的数据响应时：

在此处输入图像描述

另一方面，Nuxt.js我有一个问题，响应数据。

因此，为了使用 axios 处理所有 HTTP 请求，我有一个这样的类：

class WebAPI {
    // $axios is the instance used in the Nuxt.js context
    constructor($axios) {
        this.$http = $axios;
    }

    async call(config) {
        try {
            ///////////////////////////////////////////////////////
            // HERE IS THE PROBLEM. THE FOLLOWING CONSOLE.LOG
            // IT RETURNS undefined WHILE THE NETWORK RESPONSE
            // RETURNS WITH DATA
            ///////////////////////////////////////////////////////
            const result = await this.$http(config);
            console.log(result);
            // ...
        } catch( e) {
            // ...
        }
    }
}

我像这样使用这个类：

const data = {
    token,
    new_password
};

const options = {
    method: 'POST',
    url   : '/reset-password',
    data
};

return this.webApi.call(options);

但正如您可能看到的，在WebAPI服务中，axios 的响应是undefined.

此外，值得一提的是，完全相同的WebAPI类与我在整个应用程序中执行的其他 API 请求完美配合。

你能帮忙解决这个问题吗？你看有什么不对吗？

标签： javascriptvue.jsvuejs2nuxt.js

解决方案

我认为您使用 axios 错误。尝试使用$request方法，如下所示：

async call(config) {
  try {
    const result = await this.$http.$request(config);
    console.log(result);
    // ...
  } catch( e) {
    // ...
  }
}

推荐阅读