Axios createError.js:16 Uncaught (in promise) 錯誤：請求失敗，狀態碼 500

Question

您好，我正在開發一個 react-Node Js 應用程序，我正在將一個組件 class 遷移到一個功能組件，現在我遇到了問題： createError.js:16 Uncaught (in promise) Error: Request failed with status code 500相同的方法在 class 組件中運行良好。 接下來是我的 react 組件的代碼：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { useState } from "react";
import axios from "axios";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles((theme) => ({
  root: {
    "& > *": {
      margin: theme.spacing(1),
      width: "25ch",
    },
  },
}));

export default function BasicTextFields(props) {
  const classes = useStyles();
  const [collection, setCollection] = useState("");
  const [field, setField] = useState("");
  const [integrationName, setIntegrationName] = useState("");
  const [total, setTotal] = useState("");

  function handleChange(evt, field) {
    setField(evt.target.value);
    console.log("new value", evt.target.value);
  }

  function handleSubmit(event) {
    console.log("Event delete:" + event);
    var params = new URLSearchParams();
    params.append("collection", collection);
    params.append("field", field);
    params.append("integrationName", integrationName);
    var request = {
      params: params,
    };

    console.log("request: 127.0.0.1:" + request);

    axios.delete(`http://127.0.0.1:8081/firestore/`, request).then((res) => {
      console.log("react1: ", res);
      console.log("react2: ", res.data);
      this.setState({ total: res.data });
    });
  }

  function handleSubmitCount(event) {
    console.log("...count...");
    var params = new URLSearchParams();
    params.append("collection", collection);
    params.append("field", field);
    params.append("integrationName", integrationName);
    var request = {
      params: params,
    };

    console.log("request 127.0.0.1:" + request);
    console.log("BACKEND_HOST:", process.env);
    axios.get(`http://127.0.0.1:8081/firestore/`, request).then((res) => {
      this.setState({ total: res.data });
    });
  }

  return (
    <span>
      <form className={classes.root} noValidate autoComplete="off">
        <TextField
          name="collection"
          onChange={(e) => setCollection(e.target.value)}
          helperText="Collection"
          variant="outlined"
          required
          margin="dense"
        />
        <TextField
          name="field"
          onChange={(e) => setCollection(e.target.value)}
          helperText="Field"
          variant="outlined"
          required
          margin="dense"
        />

        <TextField
          name="value"
          onChange={(e) => setCollection(e.target.value)}
          helperText="Value"
          variant="outlined"
          required
          margin="dense"
        />
        <br />
        <Button
          variant="contained"
          color="primary"
          onClick={(e) => handleSubmit(e)}
          disableElevation
          type="button"
        >
          Delete Registers
        </Button>
        <Button
          variant="contained"
          color="primary"
          onClick={(e) => handleSubmitCount(e)}
          disableElevation
          type="button"
        >
          Count Registers
        </Button>

        <br />
        <br />
        <Typography variant="h6" gutterBottom>
          {total}
        </Typography>
      </form>
    </span>
  );
}

我收到錯誤，當我單擊按鈕並使用handleSubmitCount方法時，由於某種原因它沒有調用 axios 請求，而是拋出了前面提到的問題。

有任何想法嗎？

Answer 1

請試試這個方法

function requestObject(url,method, params) {
    let configObject = {
        "url": url,
        "method": method,
        "params": params
        
    }
    return configObject
}

 function handleSubmit(event) {
        console.log("Event delete:" + event);
       let data= {
      "collection": collection, "field" : field, 
      "integrationName":integrationName
};
let configObejct = requestObject("http://127.0.0.1:8081/firestore/", "delete", data);
axios.request(configObejct).then((res) => {
          console.log("react1: ", res);
          console.log("react2: ", res.data);
          this.setState({ total: res.data });
        });
      }

Answer 2

500 是服務器錯誤。 嘗試檢查您的錯誤：

axios.get("http://127.0.0.1:8081/firestore/", request).then((res) => {
  this.setState({ total: res.data });
}).catch(error => console.error(error));

Answer 3

檢查 Axios 文檔，您會發現 delete 方法沒有收到您在冒號后發送的正文參數。 請求只能有一個 url 參數和一個選項/配置參數（可選）。

https://github.com/axios/axios/blob/master/README.md#axiosdeleteurl-config

我建議你提出這樣的要求：

axios.delete(`http://127.0.0.1:8081/firestore/${params.toString()}`).then(callback);

由於請求僅包含您的參數，因此不再需要此 object。

請記住，此參數屬於查詢字符串參數類型，這就是 URLSearchParams 接口的用途。

https://developer.mozilla.org/es/docs/Web/API/URLSearchParams

祝你好運！

Answer 4

似乎已經過去了幾個月，但它就在這里......（我也有同樣的問題。

您很可能會收到 HTTP 錯誤代碼，並且 Axios 拒絕 promise。

您將需要捕獲它並從服務器（如果有）獲取消息。

axios.get(`http://127.0.0.1:8081/firestore/`, request)
    .then((res) => {
        this.setState({ total: res.data });
    })
    .catch((error) => {
        // here you will have access to error.response
        console.log(error.response)
    });

Answer 5

給定， axios.get('').catch(e => console.log(e.response)

為了獲得 axios 實際響應，您需要執行e.response 。 此外，在屏幕截圖中，您可以看到 e 會引發錯誤文本消息。