Redux Toolkit RTK Query接口无法发送Payload的问题

我的RTK Query Mutation代码 #

updateData: builder.mutation({
  query: ({ myParams }) => ({
    url: `/update-data`,
    method: 'POST',
    dataType: 'json',
    myParams, // 参考文档尝试的写法
    data: myParams,
    body: myParams,
    params: myParams // 以上四个参数都试过
  }),
}),

请求调用代码 #

updateData({
  myParams,
})
  .unwrap()
  .then((data: any) => {
     console.log('DATA: ', data);
  })
  .catch(({ error }) => {
     console.log('DATA ERROR: ', error);
  });

问题现象 #

请求能成功触发接口，但返回400错误提示缺少参数，查看浏览器网络面板发现没有任何Payload被发送。

对比：jQuery调用正常 #

使用以下jQuery代码调用同一接口时，返回200状态码，且网络面板能看到Payload：

$.ajax({
    url: `/update-data`,
    type: 'POST',
    data: myParams,
    success: function (data) {
      console.log('DATA: ', data);
    }
});

解决方法 #

1. 移除无效配置：RTK Query的query配置中不存在dataType字段，这是jQuery的专属参数，直接删除。
2. 正确设置请求体：RTK Query基于Fetch API，POST请求的请求体需通过body字段传递，且要匹配后端接收格式：
   • 如果后端期望表单格式（x-www-form-urlencoded）（jQuery默认发送的格式），需将参数转换为URLSearchParams：

     updateData: builder.mutation({
       query: ({ myParams }) => ({
         url: `/update-data`,
         method: 'POST',
         body: new URLSearchParams(myParams),
       }),
     }),
     

   • 如果后端期望JSON格式，直接传递myParams即可，RTK Query会自动设置Content-Type: application/json：

     updateData: builder.mutation({
       query: ({ myParams }) => ({
         url: `/update-data`,
         method: 'POST',
         body: myParams,
       }),
     }),
     

3. 避免参数混用：不要同时设置data/params/body，params是用于URL查询参数的，body才是POST请求的请求体。

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