React Native调用图书API报Unhandled Promise Rejection网络请求错误怎么解决

问题根因 #

• 核心问题：接口URL配置错误，当前bookUrl仅填写了Google Books API的密钥，缺少完整的接口请求前缀与参数规则，无法发起有效请求
• 次要问题：异步请求未做异常捕获，请求失败时直接抛出未处理的Promise rejection警告，也就是你收到的报错提示
• 注释的axios逻辑也存在地址拼接错误，仅拼接了密钥和搜索关键词，缺少接口路径与参数标识，无法正常请求

修复步骤 #

1. 补全完整的Google Books API请求地址，标准格式为：https://www.googleapis.com/books/v1/volumes?q=搜索关键词&key=你的API密钥
2. 给async/await逻辑添加try/catch包裹，主动捕获请求异常避免报错
3. 调整请求触发时机，避免页面刚加载搜索关键词为空时发起无效请求

修复后完整代码 #

import axios from 'axios';
import React, { useEffect } from 'react'
import { Text, View} from 'react-native';
import { Card, Title, Paragraph } from 'react-native-paper';
import { Searchbar } from 'react-native-paper';

export default function Home() {
  const [searchquery, setSearchquery] = React.useState('');
  // 替换为你自己的完整API密钥
  const GOOGLE_BOOKS_KEY = "AIzaSyBlFjUCkaUPmmRdglEO-7FbzerUtCJEtEk";
  const BASE_URL = "https://www.googleapis.com/books/v1/volumes";

  const getData = async ()=>{
    // 搜索关键词为空时不发起请求
    if(!searchquery.trim()) return;
    try {
      const response = await fetch(`${BASE_URL}?q=${encodeURIComponent(searchquery)}&key=${GOOGLE_BOOKS_KEY}`);
      const data = await response.json();
      console.log('接口返回数据：',data);
    } catch (error) {
      console.error('请求失败：',error);
    }
  }

  // 若要使用axios可替换为下面的逻辑
  // const getData = async ()=>{
  //   if(!searchquery.trim()) return;
  //   try {
  //     const res = await axios.get(BASE_URL,{
  //       params: {
  //         q: searchquery,
  //         key: GOOGLE_BOOKS_KEY
  //       }
  //     })
  //     console.log('接口返回数据：',res.data);
  //   } catch (error) {
  //     console.error('请求失败：',error);
  //   }
  // }

  // 搜索关键词变化时触发请求，也可以新增搜索按钮，改为点击按钮触发避免频繁请求
  useEffect(() => {
    getData()
  }, [searchquery]);

  return (
    <View >
      <Searchbar
        placeholder="Search Books"
        onChangeText={(query) => setSearchquery(query)}
        value={searchquery}
        style={{ marginTop: 30, marginHorizontal: 10 }}
      />
    </View>
  );
}

额外注意事项 #

• 安卓本地调试如果仍然报网络错误，检查安卓项目android/app/src/main/AndroidManifest.xml文件中application标签是否添加了android:usesCleartextTraffic="true"属性，部分调试场景需要开启明文流量权限
• Google Books API有请求频率限制，调试时不要短时间内发起大量请求

内容的提问来源于stack exchange，提问作者Monu Patil