javascript 我试图从餐db网站获取API，它说错误无法在控制台获取API

aurhwmvo 于 2023-05-27 发布在 Java

关注(0)|答案(1)|浏览(111)

请找到我的recipeslice.js代码。我正在使用react-redux技术制作食谱网站。我在从"https://www.themealdb.com/api.php"网站获取API时遇到问题

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

export const fetchRecipes = createAsyncThunk(
  'recipes/fetchRecipes',
  async () => {
    fetch('https://www.themealdb.com/api/json/v1/1/list.php?c=list')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
  }
);

const recipesSlice = createSlice({
  name: 'recipes',
  initialState: {
    recipes: [],
    status: 'idle',
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchRecipes.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchRecipes.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.recipes = action.payload;
      })
      .addCase(fetchRecipes.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default recipesSlice.reducer;

请帮助我从"https://www.themealdb.com/api.php"获取API数据，因为我正在使用react-redux技术制作食谱网站。
我试图在recipeslice.js文件中添加代码，但控制台中的错误是无法获取数据。
我试图在recipeslice.js文件中添加代码，但控制台中的错误是无法获取数据，还有一些错误是这样的：bundle.js:327 GET https://www.themealdb.com/api/json/v1/1/list.php?c=list net::ERR_INSUFFICIENT_RESOURCES。

JavaScript

来源：https://stackoverflow.com/questions/76332054/i-am-trying-to-fetch-api-from-meal-db-website-it-says-the-error-failed-to-fetch

1条答案

按热度按时间

l5tcr1uw1#

问题

端点"https://www.themealdb.com/api/json/v1/1/list.php?c=list"返回以下JSON数据响应 *：

{
  "meals": [
    {
      "strCategory": "Beef"
    },
    {
      "strCategory": "Breakfast"
    },
    {
      "strCategory": "Chicken"
    },
    {
      "strCategory": "Dessert"
    },
    {
      "strCategory": "Goat"
    },
    {
      "strCategory": "Lamb"
    },
    {
      "strCategory": "Miscellaneous"
    },
    {
      "strCategory": "Pasta"
    },
    {
      "strCategory": "Pork"
    },
    {
      "strCategory": "Seafood"
    },
    {
      "strCategory": "Side"
    },
    {
      "strCategory": "Starter"
    },
    {
      "strCategory": "Vegan"
    },
    {
      "strCategory": "Vegetarian"
    }
  ]
}

*我不知道这个数据是否正确。我只能验证/确认它是请求的数据。

我看到的fetchRecipes thunk的问题是它不返回任何东西。

export const fetchRecipes = createAsyncThunk(
  'recipes/fetchRecipes',
  async () => {
    // This fetch Promise isn't returned
    fetch('https://www.themealdb.com/api/json/v1/1/list.php?c=list')
      .then(response => response.json())
      // console.log returns undefined
      .then(data => console.log(data))
      .catch(error => console.error(error));
  }
);

建议方案

从Thunk返回一个值。
不要将async/await和Promise链混合使用，使用其中一个。
对于fetchRecipes.rejected的情况，不要忘记返回任何抛出的（* 和捕获的 *）错误。有关更多详细信息，请参见处理Thunk错误。

使用Promise链

export const fetchRecipes = createAsyncThunk(
  'recipes/fetchRecipes',
  (_, thunkAPI) => {
    // Return Promise
    return fetch('https://www.themealdb.com/api/json/v1/1/list.php?c=list')
      .then(response => response.json())
      .then(data => {
        // log independently
        console.log(data);

        // return data from Promise chain
        return data;
      })
      .catch(error => {
        console.error(error);
        return thunkAPI.rejectWithValue(error);
      );
  }
);

使用`async/await`/`try/catch`

export const fetchRecipes = createAsyncThunk(
  'recipes/fetchRecipes',
  async (_, thunkAPI) => {
    try {
      const response = await fetch(
        'https://www.themealdb.com/api/json/v1/1/list.php?c=list'
      );
      const data = await response.json();
      console.log(data);
      return data;
    } catch(error) {
      console.error(error);
      return thunkAPI.rejectWithValue(error);
    }
  }
);

赞(0）回复(0）举报 2023-05-27

我来回答

javascript 我试图从餐db网站获取API，它说错误无法在控制台获取API

1条答案

问题

建议方案

使用Promise链

使用`async/await`/`try/catch`

相关问题

热门标签

最新问答

javascript 我试图从餐db网站获取API，它说错误无法在控制台获取API

1条答案

问题

建议方案

使用Promise链

使用async/await/try/catch

相关问题

热门标签

最新问答

使用`async/await`/`try/catch`