redux rtk查询获取错误:请求返回200,但本地主机上没有数据

toiithl6  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(81)

即使查询是正确的,并且API不受保护,我也会得到一个获取错误,并且没有数据。后端在本地运行的端口与前端不同。我们使用rtk查询来获取数据。
基本的API设置:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

const baseQuery = fetchBaseQuery({
    baseUrl: 'http://localhost:8000',
})

export const api = createApi({
    baseQuery,
    endpoints: () => ({}),
})

终点:

import { api } from '../services/api/api'

const ingredientsApi = api.injectEndpoints({
    endpoints: (build) => ({
        getIngredients: build.query<any, void>({
            query: () => '/ingredients/load',
            transformResponse: (response) => {
                console.log('Response, ', response)
                return response
            },
        }),
        getRecipe: build.query<any, void>({
            query: () => '/recipes/recipe/154007',
            transformResponse: (response) => {
                console.log('Response, ', response)
                return response
            },
        }),
    }),
    overrideExisting: false,
})

export const { useGetIngredientsQuery, useGetRecipeQuery } = ingredientsApi

我们正在使用ApiProvider Package 应用程序。
我们得到的错误是{status:'FETCH_DIR',错误:'类型错误:无法获取'}。
如果我们使用一个开放的API,我们接收数据,所以基本的设置工作。如果我们在浏览器中调用API(http://localhost:8000/ingredients/load),数据显示,因此API也可以正常工作。API发送的数据是JSON格式的,正如预期的那样。
我们不知道为什么我们的请求失败,任何提示都很感激!

yshpjwxd

yshpjwxd1#

错误处理:
您可以增强RTK查询端点中的错误处理功能,以提供更详细的错误消息:

`endpoints: (build) => ({
  getIngredients: build.query<any, void>({
    query: () => '/ingredients/load',
    transformResponse: (response) => {
      if (!response.ok) {
        throw new Error('Failed to fetch ingredients');
      }
      return response.json();
    },
  }),
}),
`

这可以帮助您确定问题是否与服务器有关,或者响应是否不正常。
尝试不同的浏览器:
有时浏览器扩展或设置可能会干扰网络请求。尝试在不同的浏览器中测试,看看问题是否仍然存在。
通过系统地检查这些点,您应该能够识别和解决导致RTK查询请求中的“无法获取”错误的问题。

相关问题