如何從 Axios 中的 HTTP 錯誤獲取狀態碼？

Question

這可能看起來很愚蠢，但我試圖在 Axios 中請求失敗時獲取錯誤數據。

axios
  .get('foo.example')
  .then((response) => {})
  .catch((error) => {
    console.log(error); //Logs a string: Error: Request failed with status code 404
  });

除了字符串，是否有可能獲得一個帶有狀態代碼和內容的 object？ 例如：

Object = {status: 404, reason: 'Not found', body: '404 Not found'}

Answer 1

你看到的是error對象的toString方法返回的字符串。 （ error不是字符串。）

如果從服務器接收到響應，則error對象將包含response屬性：

axios.get('/foo')
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
  });

Answer 2

使用 TypeScript，很容易找到你想要的正確類型。

這使一切變得更容易，因為您可以通過自動完成獲得該類型的所有屬性，因此您可以了解響應和錯誤的正確結構。

import { AxiosResponse, AxiosError } from 'axios'

axios.get('foo.example')
  .then((response: AxiosResponse) => {
    // Handle response
  })
  .catch((reason: AxiosError) => {
    if (reason.response!.status === 400) {
      // Handle 400
    } else {
      // Handle else
    }
    console.log(reason.message)
  })

此外，您可以將參數傳遞給兩種類型，以告知您在response.data中的期望，如下所示：

import { AxiosResponse, AxiosError } from 'axios'
axios.get('foo.example')
  .then((response: AxiosResponse<{user:{name:string}}>) => {
    // Handle response
  })
  .catch((reason: AxiosError<{additionalInfo:string}>) => {
    if (reason.response!.status === 400) {
      // Handle 400
    } else {
      // Handle else
    }
    console.log(reason.message)
  })

Answer 3

正如@Nick 所說，您在console.log一個 JavaScript Error對象時看到的結果取決於console.log的確切實現，這會有所不同並且（imo）使檢查錯誤非常煩人。

如果您想查看完整的Error對象以及繞過toString()方法攜帶的所有信息，您可以使用JSON.stringify ：

axios.get('/foo')
  .catch(function (error) {
    console.log(JSON.stringify(error))
  });

Answer 4

請求配置中有一個名為validateStatus的新選項。 您可以使用它來指定當狀態 < 100 或狀態 > 300（默認行為）時不引發異常。 例子：

const {status} = axios.get('foo.example', {validateStatus: () => true})

Answer 5

您可以使用擴展運算符 ( ... ) 將其強制轉換為這樣的新對象：

axios.get('foo.example')
    .then((response) => {})
    .catch((error) => {
        console.log({...error})
})

請注意：這不會是 Error 的實例。

Answer 6

我正在使用這個攔截器來獲取錯誤響應。

const HttpClient = axios.create({
  baseURL: env.baseUrl,
});

HttpClient.interceptors.response.use((response) => {
  return response;
}, (error) => {
  return Promise.resolve({ error });
});

Answer 7

為了獲取服務器返回的http狀態碼，可以在axios選項中添加validateStatus: status => true ：

axios({
    method: 'POST',
    url: 'http://localhost:3001/users/login',
    data: { username, password },
    validateStatus: () => true
}).then(res => {
    console.log(res.status);
});

這樣，每個 http 響應都會解析從 axios 返回的承諾。

https://github.com/axios/axios#handling-errors

Answer 8

整個錯誤只能使用 error.response 來顯示：

axios.get('url').catch((error) => {
      if (error.response) {
        console.log(error.response);
      }
    });

Answer 9

const handleSubmit = (e) => {
e.preventDefault();
// console.log(name);
setLoading(true);
createCategory({ name }, user.token)
  .then((res) => {
   // console.log("res",res);
    setLoading(false);
    setName("");
    toast.success(`"${res.data.name}" is created`);
    loadCategories();
  })
  .catch((err) => {
    console.log(err);
    setLoading(false);
    if (err.response.status === 400) toast.error(err.response.data);//explained in GD
  });

};

看控制台日志你就明白了

Answer 10

使用 Axios

    post('/stores', body).then((res) => {

        notifyInfo("Store Created Successfully")
        GetStore()
    }).catch(function (error) {

        if (error.status === 409) {
            notifyError("Duplicate Location ID, Please Add another one")
        } else {
            notifyError(error.data.detail)
        }

    })

Answer 11

您可以將錯誤放入一個對象並記錄該對象，如下所示：

axios.get('foo.example')
    .then((response) => {})
    .catch((error) => {
        console.log({error}) // this will log an empty object with an error property
    });

Answer 12

僅獲取錯誤不返回對象確實很奇怪。 在返回error.response 時，您可以訪問所需的大多數反饋信息。

我最終使用了這個：

axios.get(...).catch( error => { return Promise.reject(error.response.data.error); });

這嚴格提供了我需要的東西：狀態代碼（404）和錯誤的文本消息。

Answer 13

這是一個已知的錯誤，嘗試使用"axios": "0.13.1"

https://github.com/mzabriskie/axios/issues/378

我遇到了同樣的問題，所以我最終使用了"axios": "0.12.0" 。 這對我來說可以。

Answer 14

Axios. get('foo.example')
.then((response) => {})
.catch((error) => {
    if(error. response){
       console.log(error. response. data)
       console.log(error. response. status);

      }
})

Answer 15

這是我的代碼：為我工作

 var jsonData = request.body;
    var jsonParsed = JSON.parse(JSON.stringify(jsonData));

    // message_body = {
    //   "phone": "5511995001920",
    //   "body": "WhatsApp API on chat-api.com works good"
    // }

    axios.post(whatsapp_url, jsonParsed,validateStatus = true)
    .then((res) => {
      // console.log(`statusCode: ${res.statusCode}`)

            console.log(res.data)
        console.log(res.status);

        // var jsonData = res.body;
        // var jsonParsed = JSON.parse(JSON.stringify(jsonData));

        response.json("ok")
    })
    .catch((error) => {
      console.error(error)
        response.json("error")
    })