反应中带有 async/await 的 Axios 错误处理程序消息

Question

我的app从react请求axios到nestjs服务器，代码在这里

const loginEvent = async (id, password) => {
    try {
      const res = await (await axios.post('users/login', { id, password })).data;
      if (res.success) {
         ...
      } else {
         ...
      }
    } catch (err) {
      console.log('Login Err ', err);
    }
  };

在 Postman 中，我可以正确地看到包括消息和成功。

{
    "success": false,
    "statusCode": 400,
    "timestamp": "2022-05-17T11:50:16.676Z",
    "path": "/users/login",
    "message": [
        "id should not be empty"
    ],
    "error": "Bad Request"
}

但是，在 React 中只显示简短的错误消息。

POST http://localhost:3000/users/login 400 (Bad Request)
Login Err  Error: Request failed with status code 400
    at createError (createError.js:16:1)
    at settle (settle.js:17:1)
    at XMLHttpRequest.onloadend (xhr.js:66:1)

当请求发生错误时，服务器发送一个已处理的消息并且success = false，但是在axios using async/wait的响应中都没有找到。

如果我不使用 async/wait，我可以在 axios.post.then.catch() 中检查两者，但我想使用 async/wait 使代码更清晰。我该怎么办？

Answer 1

如果服务器发送数组消息，你应该能够在你的错误中的响应对象中得到它们，如下所示：

async function loginEvent() {
  try {
    const res = await (await axios.post('users/login')).data
    // your code
  } catch (e: any) {
    const statusCode = e.response.status // 400
    const statusText = e.response.statusText // Bad Request
    const message = e.response.data.message[0] // id should not be empty
    console.log(`${statusCode} - ${statusText} - ${message}`)
  }
}

希望对您有所帮助！

反应中带有 async/await 的 Axios 错误处理程序消息

Axios error handler message with async/await in the react

reactjs

async-await

axios