為什么我的 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 代碼保持不變