Почему я не могу загрузить API?

Question

Я собираюсь вызвать API mov ie, используя редукс в приложении реагирования.

Во время процесса вызова API mov ie, использующего redux-thunk, возникает ошибка, когда вызов функции callAPI по пути lib / THMb.

//movie_project/src/lib/THMb.js

import axios from 'axios';

const key = "xxxxxxx";
const url = `https://api.themoviedb.org/3/movie/now_playing?api_key=${key}&language=ko&page=1&region=KR`; 

export const callAPI = async () =>{
    await axios.get(`${url}`);
}

import {  handleActions } from "redux-actions";
import axios from "axios";
import * as movieAPI from '../lib/THMb';

// action types
const GET_MOVIES = 'movie/GET_MOVIES';
const GET_MOVIES_SUCCESS = 'movie/GET_MOVIES_SUCCESS';
const GET_MOVIES_FAILURE = 'movie/GET_MOVIES_FAILURE';

export const getMovies = () => async dispatch => {
    dispatch({ type: GET_MOVIES }); 
    try{
        const res = await movieAPI.callAPI(); // failed
        dispatch({
            type: GET_MOVIES_SUCCESS, // 요청 성공
            payload: res.data.results, // API 요청 결과 값
        })
    }catch(e){
        dispatch({
            type: GET_MOVIES_FAILURE, // 요청 실패
            payload: e,
            error: true
        })
        throw e;
    }
}

const initialState ={
    movieList : [],
    error: null
}

const movie = handleActions(
    {
        [GET_MOVIES]: state => ({
            ...state,
            // loading..
        }),
        [GET_MOVIES_SUCCESS]: (state, action) => ({
            ...state,
            movieList: action.payload,
        }),
        [GET_MOVIES_FAILURE]: (state, action) => ({
            ...state,
            // loading...
        })
    },
    initialState
)

export default movie;

введите описание изображения здесь

---

Однако при вызове url ошибки не возникает из функции getMovies.

export const getMovies = () => async dispatch => {
    dispatch({ type: GET_MOVIES }); // 요청의 시작을 알림.
    try{
        //const res = await movieAPI.callAPI(); // failed
        // success
        const res = await axios.get(`https://api.themoviedb.org/3/movie/now_playing?api_key=xxxxx&language=ko&page=1&region=KR`);
        dispatch({
            type: GET_MOVIES_SUCCESS, // 요청 성공
            payload: res.data.results, // API 요청 결과 값
        })

Почему ошибки возникают в первом случае ???

Answer 1

ошибка возникает в функции callAPI , а не в getMovies , поскольку в полезной нагрузке предполагается, что переменная res извлекает данные из нее и вы успешно ее получаете в функции getMovies , но не в callAPI .

, поскольку вы ничего не возвращали из метода callAPI , поэтому res переменная равна нулю и выдает ошибку.

просто замените функцию callAPI на приведенный ниже код.

export const callAPI = async () =>{
 const res await axios.get(`${url}`);
 return res
}

надеюсь, это сработает, просто попробуйте

Answer 2

Это потому, что в первом случае вы ничего не возвращаете. Вы должны попробовать это:

export const callAPI = async () => {
    let res = await axios.get(`${url}`);
    return res;
}

Надеюсь, это работает для вас.