代码之家 › 专栏 › 技术社区 › rasilvap

Axios公司createError.js:16未捕获(承诺中)错误:请求失败,状态代码为500

axios reactjs node.js

0

rasilvap · 技术社区 · 5 年前

你好,我正在开发一个react Node Js应用程序,我正在将一个组件类迁移到一个功能组件类,现在我遇到了一个问题: createError.js:16 Uncaught (in promise) Error: Request failed with status code 500 同样的方法在component类中运行良好。接下来是我的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

有什么想法吗?

3 回复 | 直到 5 年前

1

0

yarinsn 5 年前

500是服务器错误。尝试检查您的错误:

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

2

0

Zeitgeist 5 年前

检查Axios文档,您会发现delete方法没有接收到body参数,而body参数是在冒号后面发送的。请求必须只有一个url参数和一个options/configuration param(可选)。

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

我建议你:

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

由于请求只包含参数,因此不再需要此对象。

请记住,此参数属于查询字符串参数类型,这也是URLSearchParams接口的用途。

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

3

0

Raghvender Kataria 5 年前

请这边走

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 });
        });
      }