如何使用Axios发送追加数据？请求参数无效问题排查

核心问题 #

你当前代码存在两个关键问题：

• 服务器要求接收普通JSON对象格式的参数，但你却用FormData实例包装参数，还错误设置了multipart/form-data请求头，导致服务器无法解析参数，返回“请求参数无效”。
• Traveller函数中创建了FormData但未返回，最终传入createBooking的formData大概率是undefined。

修正步骤 #

1. 替换FormData为普通JS对象 #

既然服务器接受对象格式，直接用普通JS对象存储参数即可：

function Traveller() {
    // 创建普通JS对象存储表单参数
    const formData = {
        destination: myData?.data?.destination || '',
        source: myData?.data?.source || '',
        time: myData?.data?.time || '',
        type: myData?.data?.type || '',
        car_type: selectedCar?.name || '',
        distance: selectedCar?.distance || '',
        name: formValues?.name || '',
        email: formValues?.email || '',
        mobile_no: formValues?.mobile_no || ''
    };
    return formData; // 必须返回对象，否则无法传递给请求函数
}

2. 修正请求参数与请求头 #

服务器接受JSON对象，请求体直接传组合后的对象，请求头改为适配JSON的格式（axios默认就是application/json，可省略显式设置）：

export const createBooking = async (token, formData) => {
    try {
        const postData = {
            api: 'create-booking',
            token: token,
            // 将表单参数展开到请求对象中，或按服务器要求的结构传递
            ...formData
        };
        const response = await axios.post(BASE_URL, postData, {
            headers: {
                "Accept": "application/json"
            }
        });

        console.log(response.data)
        return response;
    } catch (error) {
        console.log(error);
    }
}

特殊情况说明 #

如果服务器要求参数必须放在formData字段下，只需保持postData的结构，但要确保formData是普通JS对象而非FormData实例：

const postData = {
    api: 'create-booking',
    token: token,
    formData: formData // 这里的formData是普通JS对象
};

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