在React JS中如何通过axios实现单表单提交数据到多个不同API

实现思路 #

• 统一绑定表单所有字段到React状态管理
• 表单提交时阻止默认跳转行为
• 从状态中拆分出两份独立数据：姓名+邮箱提交到第一个API，地址提交到第二个API
• 根据业务需求选择并发或顺序发起Axios请求

完整代码示例（函数组件版本） #

import { useState } from 'react';
import axios from 'axios';

const MultiApiForm = () => {
  // 绑定全量表单字段状态
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    address: ''
  });
  const [loading, setLoading] = useState(false);
  const [submitTip, setSubmitTip] = useState('');

  // 输入内容同步到状态
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setSubmitTip('');

    // 拆分两份提交数据
    const userBaseData = {
      name: formData.name,
      email: formData.email
    };
    const userAddressData = {
      address: formData.address
    };

    try {
      // 并发发起两个请求，替换成实际业务接口地址即可
      const [baseRes, addressRes] = await Promise.all([
        axios.post('你的第一个接口地址', userBaseData),
        axios.post('你的第二个接口地址', userAddressData)
      ]);
      setSubmitTip('全部数据提交成功');
      // 提交成功后可清空表单
      setFormData({ name: '', email: '', address: '' });
    } catch (err) {
      setSubmitTip('提交失败，请检查后重试');
      console.error('提交错误详情：', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>姓名：</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
          required
        />
      </div>
      <div>
        <label>邮箱：</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
        />
      </div>
      <div>
        <label>地址：</label>
        <input
          type="text"
          name="address"
          value={formData.address}
          onChange={handleChange}
          required
        />
      </div>
      <button type="submit" disabled={loading}>
        {loading ? '提交中...' : '提交'}
      </button>
      {submitTip && <p>{submitTip}</p>}
    </form>
  );
};

export default MultiApiForm;

关键注意事项 #

• 错误处理逻辑：示例中使用Promise.all处理并发请求，只要有一个请求失败就会进入catch分支。如果业务允许部分请求成功、不需要强一致性，可以替换为Promise.allSettled，自行判断每个请求的返回状态做对应处理
• 请求顺序控制：如果两个接口存在依赖关系（比如第一个接口返回的用户ID需要传给第二个地址接口），不要使用并发写法，改为await第一个请求完成后，拿返回参数再发起第二个请求即可
• 扩展适配：如果是类组件项目，仅需把状态绑定改为类组件的state写法即可，请求逻辑完全通用

内容的提问来源于stack exchange，提问作者noob27