使用 Joi - Express 验证输入并在 React 中使用它

Question

我正在尝试在后端使用 Redux Form、Thunk 和 Joi 验证表单。我想做的是当用户提交表单时，我想发送调用我的 API 的操作，然后如果 Joi 中间件发现表单有问题，则在前端做出反应相应地根据错误是什么。

我遇到的问题是我不知道如何访问 Joi 发回的错误状态代码后的 json。

这是我在前端的调度操作：

export const signUp = (
  newUser: User
): ThunkAction<void, AppState, null, Action<string>> => async dispatch => {
  try {
    const res = await axios.post("http://localhost:2000/users/signup", newUser);
  } catch (error) {
     console.log("THE ERROR", error)
  }
};

然后在后端，这是我的 joi 中间件：

validateBody: (schema) => {
        return (req, res, next) => {
            const result = Joi.validate(req.body, schema);
            if (result.error)  {
                return res.status(400).json({ error: "this is your error" })
            }

            // validated values are in req.value.body if it's there
            if (!req.value) {
                req.value = {};
            }
            req.value['body'] = result.value;
            // the next allows the middleware to pass through
            next();
        }

    },

如果我运行这个表格有问题，我会得到

THE ERROR Error: Request failed with status code 400
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

但我找不到如何访问 catch 块中的 json ("this is your error")。任何帮助将非常感激。非常感谢。

Answer 1

Axios 错误在 error.response 内。

您可以这样访问错误：

  try {
    const res = await axios.post("http://localhost:2000/users/signup", newUser);
  } catch (error) {
    if (error.response) {
      /*The request was made and the server responded with a
        status code that falls out of the range of 2xx  */
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      /* The request was made but no response was received, `error.request`
       * is an instance of XMLHttpRequest in the browser and an instance
       * of http.ClientRequest in Node.js */
      console.log(error.request);
    } else {
      // Something happened in setting up the request and triggered an Error
      console.log("Error", error.message);
    }
  }

使用 Joi - Express 验证输入并在 React 中使用它

Validating input with Joi - Express and using it in React

express

reactjs

joi