React中使用Axios发送登录POST请求出现参数异常如何解决

问题根源 #

• createAsyncThunk 的payload构造函数仅支持接收1个自定义传参，你代码中写的async (email, password)=>{}里的第二个password参数实际是Redux Toolkit自动注入的thunkAPI对象，你拼接URL时把该对象转为字符串，就出现了password=[object%20Object]的报错。
• 你当前是手动拼接URL传参，既不符合你提到的「把参数放到POST请求体」的要求，也容易出现编码错误。

修正方案 #

方案1：参数放在POST请求体（符合Axios官方规范+Swagger要求） #

调用logCustomerIn时需要把参数封装为单个对象传入，示例调用写法：

dispatch(logCustomerIn({
  email: 'example@gmail.com',
  password: 'examplepassword'
}))

修正后的logCustomerIn代码：

export const logCustomerIn = createAsyncThunk(
    'customer/logCustomerIn',
    // 解构唯一的传参对象，取出email和password
    async ({email, password})=>{
        // post方法第二个参数为请求体对象，符合要求
        const response = await axios.post(`http://localhost:8080/api/login`, {
            email,
            password
        })
        console.log(response)
        return response.data.success
    }
)

方案2：如果接口明确要求参数放在URL查询串 #

如果Swagger标注参数为query类型，建议用Axios内置的params配置项自动编码参数，避免手动拼接出错：

export const logCustomerIn = createAsyncThunk(
    'customer/logCustomerIn',
    async ({email, password})=>{
        const response = await axios.post(`http://localhost:8080/api/login`, {}, {
            // params会自动把参数编码后拼到URL查询串
            params: {
                email,
                password
            }
        })
        console.log(response)
        return response.data.success
    }
)

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