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

Question

我的客户是使用 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 上没有发生错误，但客户端收到未定义的响应。

Answer 1

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

1. 我没有阻止提交按钮上的默认设置，因此在正确处理请求之前表单正在刷新。
2. 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 代码保持不变