Question

我已经创建了一个反应表单，并希望使用表单数据向webhook.site发出发布请求。如果我收到200状态代码，那么我想将表单数据发送到后端快递服务器以进行进一步的操作。我正在使用axios发出POST请求。这是我的反应形式的axios代码段：

import React, { Fragment, useState } from "react";
import axios from "axios";

const Form = () => {
  const [candidate, setCandidate] = useState({
    fullName: "",
    phoneNumber: 0,
    email: "",
    gitProfile: "",
    linkToResume: "",
    designation: "",
    interest: "",
  });

  const onChange = e =>
    setCandidate({ ...candidate, [e.target.name]: e.target.value });

  const onSubmit = e => {
    e.preventDefault();

    axios
      .post("http://localhost:5000/", {
        candidate,
      })
      .then(res => {
        console.log(res, candidate);
      });
  };

当前，我直接将数据发送到后端。我已经单独检查了发布到webhook.site和后端的代码，代码工作正常。但是我想同时做。如果在发布到webhook.site后收到200状态代码，则只有我想将表单数据发送到后端。

Answer 1

    axios
  .post("http://localhost:5000/", {
    candidate,
  })
  .then(res => {
    console.log(res, candidate);
   // Write your another post request here because if your first request return 200 statusCode  it will execute this function otherwise it will go catch function

  }).catch(error => { 
   // if your first request failed then it execute this function. Here you can get error message.
   console.log(error);  
   });

Answer 2

检查第一个POST返回状态是否为200，然后调用下一个请求。

axios
  .post("http://localhost:5000/", {
    candidate,
  })
  .then(res => {
    console.log(res, candidate);
    if (res.status === 200) {
      axios.post('/url', {data})
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }).catch(function (error) {
  console.log(error);
});

如何从反应形式发出2个POST请求

2 个答案: