为什么我的 api 发布请求（Vue.js 客户端）从我的快递服务器收到未定义的响应？答案

【问题标题】：Why does my api post request (Vue.js client) receive an undefined response from my express server?为什么我的 api 发布请求（Vue.js 客户端）从我的快递服务器收到未定义的响应？
【发布时间】：2020-05-19 20:00:22
【问题描述】：

我的客户是使用 Vuex 商店的 Vue.js。我在服务器端使用 passport.js 进行身份验证。登录和帐户注册正在工作。检查 mongodb 显示新数据。但是 express 正在向客户端发送未定义的响应。这是我的第一个主要的 javascript 项目，所以我希望这是我的眼睛还看不到的简单东西。

客户端：api.js

export async function registerUser(user) {
  console.log("api to register user");
  console.log(user);
  const route = `${api}/register`;
  return fetch(route, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(user)
  })
    .then(response => {
      console.log(response.json());
      return response.json();
    })
    .then(json => {
      console.log(json);
      return json;
    })
    .catch(err => {
      console.error(err);
    });
}

客户端：index.js（未定义 res 的 vuex 存储）

actions: {
async register(state, user) {
      apis.registerUser(user).then(res => {
        if (res.success) {
          this.dispatch("loadUser");
          alert("successfully registered");
        }
      });
    },
    async loadUser() {
      apis.getUser().then(res => {
        this.commit("setUser", res.user);
      });
    }
}

服务器：app.js

app.post('/api/v1/register', function(req, res) { 
  const success = true;
  Users=new User({email: req.body.email, username : req.body.username}); 
  console.log(req.body);
  User.register(Users, req.body.password, function(err, user) { 
    if (err) { 
      console.log('account could not be saved');
      success = false;
    } else { 
      console.log('account saved');
    }
  })
  res.send({success: success});
});

获取错误打印到控制台

app.js 路由中的服务器 console.logs 表明 req.body 有正确的数据并且用户帐户已成功保存。 res.send 上没有发生错误，但客户端收到未定义的响应。

【问题讨论】：

console.log 是否适用于您的 api.js ？看来您有网络错误。检查api 变量是否类似于/api/v1
确保您的 const route = `${api}/register`; 实际上具有您在服务器 /api/v1/register 中定义的正确 URL。首先，尝试对 url 进行硬编码。你也可以在chrome中检查网络请求（developers.google.com/web/tools/chrome-devtools/network）
网址正确。它正在攻击服务器。上面的控制台屏幕截图是我从客户端获取的内容。

标签： javascript node.js express post fetch

【解决方案1】：

在我的头撞到桌子和一些外部帮助之后，我找到了解决方案。我有两个主要问题。

我没有阻止提交按钮上的默认设置，因此在正确处理请求之前表单正在刷新。
javascript 承诺处理不当。

下面的工作代码：

api.js

export function registerUser(user) {
  console.log("api to register user");
  console.log(user);
  const route = `${api}/register`;
  return fetch(route, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(user)
  })
    .then(response => {
      console.log(response.json());
      return response.json();
    })
}

index.js (vuex 存储)

actions: {
register(state, user) {
      apis.registerUser(user).then(res => {
        if (res.success) {
          alert("successfully registered");
        }
      }).catch(err => {
          console.error(err);
      });
    }
}

app.js 代码保持不变

【讨论】：