Node.js环境用RTK Query createApi遇Headers未定义错误及相关问题求助

解决Node.js环境下RTK Query的Headers未定义问题及实现需求 #

首先解决ReferenceError: Headers is not defined：Node.js没有浏览器原生的Headers/Request/Response全局对象，使用node-fetch时需要手动挂载这些变量，或者在配置中适配。

1. 使用createApi结合自定义函数获取数据 #

以下提供两种实现方式，并明确fetchFn与queryFn的区别：

方式一：给fetchBaseQuery传递自定义fetchFn

先安装依赖：

npm install @reduxjs/toolkit node-fetch

代码实现：

const { configureStore, createApi, fetchBaseQuery } = require('@reduxjs/toolkit/query/react');
const fetch = require('node-fetch');

// 挂载node-fetch的全局对象，解决Headers未定义问题
global.Headers = fetch.Headers;
global.Request = fetch.Request;
global.Response = fetch.Response;

// 创建API切片
const pokemonApi = createApi({
  reducerPath: 'pokemonApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://pokeapi.co/api/v2/',
    // 传递自定义fetch实现
    fetchFn: fetch,
  }),
  endpoints: (builder) => ({
    getPokemonByName: builder.query({
      query: (name) => `pokemon/${name}`,
    }),
  }),
});

方式二：使用完全自定义的queryFn

如果不需要fetchBaseQuery的封装逻辑，可以直接写自定义请求：

const { configureStore, createApi } = require('@reduxjs/toolkit/query/react');
const fetch = require('node-fetch');

const pokemonApi = createApi({
  reducerPath: 'pokemonApi',
  endpoints: (builder) => ({
    getPokemonByName: builder.query({
      // queryFn接收请求参数与API上下文，自行处理请求全流程
      queryFn: async (name) => {
        try {
          const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
          if (!res.ok) throw new Error(`HTTP错误: ${res.status}`);
          const data = await res.json();
          return { data };
        } catch (err) {
          return { error: { status: res?.status || 500, data: err.message } };
        }
      },
    }),
  }),
});

fetchFn与queryFn的核心区别：

• fetchFn仅替换fetchBaseQuery底层的fetch实现，仍复用RTK Query的请求封装、缓存逻辑
• queryFn是完全自定义的请求逻辑，从发起请求、响应解析到错误捕获全由自己实现，适合复杂定制场景

2. 不使用hooks，通过selectors打印数据 #

需要配置store、触发请求后，用selectors从state中读取缓存数据：

// 创建store并集成API切片
const store = configureStore({
  reducer: {
    [pokemonApi.reducerPath]: pokemonApi.reducer,
  },
  // 必须添加API中间件，处理缓存、请求队列等核心逻辑
  middleware: (getDefault) => getDefault().concat(pokemonApi.middleware),
});

// 发起请求并打印数据
async function getPokemonData() {
  // 触发请求：dispatch API生成的初始化动作
  await store.dispatch(pokemonApi.endpoints.getPokemonByName.initiate('pikachu'));
  
  // 使用selectors读取缓存数据
  const pokemonState = pokemonApi.endpoints.getPokemonByName.select('pikachu')(store.getState());
  
  // 打印结果
  if (pokemonState.data) {
    console.log('获取到的Pokemon数据:', pokemonState.data);
  } else if (pokemonState.error) {
    console.log('请求失败:', pokemonState.error);
  }
}

// 执行函数
getPokemonData();

注意：initiate返回Promise，必须await等待请求完成，否则state中无缓存数据；select方法接收请求参数（如pikachu），返回一个selector函数，传入store state即可拿到对应数据。

内容的提问来源于stack exchange，提问作者MEKALA DEEKSHITHA REDDY