如何在RTK Query中使用transformResponse转换接口响应数据

你原来的代码有两个问题：一是transformResponse配置位置写错了，它是和query平级的builder.query配置项，不是写在请求参数对象里的；二是你传了body参数却没指定请求方法，默认GET请求会丢失请求体。

直接上修正后的完整实现：

getStocks: builder.query({
    query: credentials => ({
        url: `stocks`,
        method: 'POST',
        body: { credentials },
    }),
    transformResponse: (rawResponse) => {
        // 遍历二维数组，每组数据固定为[元信息对象, 行情数据对象]结构
        return rawResponse.map(stockItem => {
            const [meta, quote] = stockItem;
            return {
                Symbol: meta["2. Symbol"],
                Close: Number(quote["4. close"])
            }
        })
    }
})

处理逻辑说明 #

• 不需要额外做扁平化操作：原始响应是二级数组，直接用map遍历最外层数组，就能把每组嵌套的两个对象拆解重组
• 字段对应关系：股票代码存在每组第一个对象的2. Symbol字段，收盘价存在每组第二个对象的4. close字段
• 收盘价接口返回的是字符串格式，转成数值类型更方便后续表格做排序、数值格式化操作

处理完成后返回的就是可以直接传入表格组件的单层数组，结构如下：

[
    { Symbol: "AAPL", Close: 102.81 },
    { Symbol: "MSFT", Close: 102.81 },
    { Symbol: "BYD", Close: 102.81 },
    { Symbol: "SEC", Close: 102.81 }
]

边缘情况兼容（可选） #

如果接口可能返回异常数据（比如某组数据缺失、字段为空），可以加默认值避免渲染报错：

transformResponse: (rawResponse) => {
    return rawResponse.map(stockItem => {
        const [meta = {}, quote = {}] = stockItem ?? [];
        return {
            Symbol: meta["2. Symbol"] ?? '--',
            Close: Number(quote["4. close"]) || 0
        }
    })
}

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