客户端如何捕获Promise拒绝错误？注册请求异常排查

服务器端问题根源 #

1. 未正确返回错误响应：在用户已存在的分支中，使用Promise.reject()无效——User.find()的回调是普通同步函数，无法处理Promise拒绝，会引发未捕获的Promise错误导致服务器崩溃，同时客户端请求因未收到响应挂起。
2. 错误处理遗漏：bcrypt.hash()的回调中未处理哈希生成失败的错误，哈希出错时客户端无法收到反馈。
3. 查询效率低下：用User.find()查询所有匹配邮箱的用户，只需判断是否存在单个用户，User.findOne()更高效。

客户端问题根源 #

fetch仅在网络故障时抛出异常，HTTP错误状态码（如409冲突）不会触发catch块。因此即使服务器返回错误，客户端仍会解析响应并将thunk标记为fulfilled，无法触发错误处理逻辑。

修正后的服务器代码（server.js） #

app.post('/signup', async (req, res) => {
  try {
    const { email, password: plainTextPassword } = req.body;

    // 检查用户是否存在，findOne更高效
    const existingUser = await User.findOne({ email });
    if (existingUser) {
      // 返回409状态码（冲突）+ 错误信息
      return res.status(409).json({ error: 'Account already exists' });
    }

    // 生成密码哈希
    const hash = await bcrypt.hash(plainTextPassword, saltRounds);
    // 创建并保存用户
    const user = new User({ email, password: hash });
    const result = await user.save();
    
    res.status(201).json(result);
  } catch (err) {
    // 统一处理所有服务器端错误
    res.status(500).json({ error: err.message });
  }
});

修正后的客户端代码（reduxSlice.js） #

export const signup = createAsyncThunk(
  'userAuth/signup',
  async (payload, thunkAPI) => {
    const { email, password } = payload;
    const result = await fetch(signupPath, {
      mode: 'cors',
      credentials: 'include',
      method: "post",
      body: JSON.stringify({ email, password }),
      headers: {
        'Content-Type': 'application/json'
      }
    });

    // 检查HTTP响应状态，非2xx则抛出错误
    if (!result.ok) {
      const errorData = await result.json();
      throw new Error(errorData.error || 'Signup failed');
    }

    return result.json();
  }
);

关键优化点 #

• 服务器端改用async/await替代回调嵌套，代码更简洁且错误处理更统一。
• 用户已存在时返回标准409状态码，符合HTTP语义。
• 客户端主动检查响应状态，将HTTP错误转换为异常，确保Redux thunk进入rejected状态，便于后续错误处理。

内容的提问来源于stack exchange，提问作者benwl