使用android應用程式可能導致未處理的Promise拒絕

過去幾天我一直在練習 React Native。我正在嘗試制作電影頁面應用程式。我的代碼正常作業。但我的問題是它顯示了一個關于可能未處理的承諾拒絕的錯誤。我知道問題出在哪里，但我不知道如何解決。

這是問題的根源（Details.js）：

import { isEmptyStatement } from '@babel/types';
import React, {useEffect, useState} from 'react';
import {Text} from 'react-native';
import {getMovie, getTv} from '../services/services';

const Detail = ({route, navigation}) => {
    const movieId = route.params.movieDetail.id;

    const [movieDetail, setMovieDetail] = useState([]);
    const [movieTv, setMovieTv] = useState([]);
    
    const [loaded, setLoaded] = useState(false);
    const [success, setSuccess] = useState(false);

    useEffect(() => {
        getMovie(movieId).then(movieData => {
            if(movieData == null) {
                setLoaded(false);
            }
            else {
                setMovieDetail(movieData);
                setLoaded(true);
            }
        });
    }, [movieId]);
    
    useEffect(() => {
        getTv(movieId).then(movieTv => {
            if(movieTv == null) {
                setLoaded(false);
            }
            else {
                setMovieTv(movieTv);
                setLoaded(true);
            }
        });
    }, [movieId]);

    if(movieDetail.title == null){
        return (
            <React.Fragment>
                {loaded && <Text>{movieTv.name}</Text>}
            </React.Fragment>
        );
    }
    else {
        return (
            <React.Fragment>
                {loaded && <Text>{movieDetail.title}</Text>}
            </React.Fragment>
        );
    }

    console.log(movieTv.success);
    
}

export default Detail;

這是他們獲取資料的地方（services.js）：

import axios from 'axios';

const apiUrl = 'https://api.themoviedb.org/3';
const apiKey = 'api_key=31a7f8174b1e2c29744ec644af796973';

// Get Popular Movies
export const getPopularMovies = async () => {
    const resp = await axios.get(`${apiUrl}/movie/popular?${apiKey}`,);
    return resp.data.results;
};

// Get Upcoming Movies
export const getUpcomingMovies = async () => {
    const resp = await axios.get(`${apiUrl}/movie/upcoming?${apiKey}`,);
    return resp.data.results;
};

// Get Popular TV
export const getPopularTv = async () => {
    const resp = await axios.get(`${apiUrl}/tv/popular?${apiKey}`,);
    return resp.data.results;
};

export const getFamilyMovies = async () => {
    const resp = await axios.get(`${apiUrl}/discover/movie?${apiKey}&with_genres=10751`,);
    return resp.data.results;
};

export const getMovie = async id => {
    const resp = await axios.get(`${apiUrl}/movie/${id}?${apiKey}`,);
    return resp.data;
};

export const getTv = async id => {
    const resp = await axios.get(`${apiUrl}/tv/${id}?${apiKey}`,);
    return resp.data;
};

uj5u.com熱心網友回復：

您已經使用了幾個異步呼叫，并在您的Details.js班級中處理了回傳的承諾。但在每種情況下，您僅通過提供then回呼來處理成功（承諾決議）路徑。

例如，考慮這個

getTv(movieId).then(movieTv => {
    if(movieTv == null) {
        setLoaded(false);
    }
    else {
        setMovieTv(movieTv);
        setLoaded(true);
    }
});

只要網路呼叫成功并且后端回傳成功的（例如 2xx）回應，您的應用程式就會在這里運行良好。但是如果發生任何錯誤，您的應用程式將崩潰，因為您沒有通過處理承諾拒絕來處理錯誤。

所以你應該做的是catch為這些承諾中的每一個添加一個回呼并優雅地處理錯誤場景。您可以執行諸如記錄錯誤、設定任何標志以指示加載失敗、在 UI 上顯示錯誤等操作。

getTv(movieId).then(movieTv => {
    if(movieTv == null) {
        setLoaded(false);
    }
    else {
        setMovieTv(movieTv);
        setLoaded(true);
    }
}).catch(err => {
  console.log(err);
  setLoaded(false);
});

標籤：javascript 安卓 节点.js 反应 反应原生

上一篇：無法安裝NPM

下一篇：無法使用Android應用程式連接到套接字