React Native调用Yelp API遇Axios网络错误及未处理Promise拒绝求助

1. 先添加错误捕获，获取详细错误信息 #

你的代码未处理异步请求的异常，导致仅抛出笼统的Network Error。先给searchApi加上try/catch，打印完整错误日志，这能帮你定位具体问题：

修改useResults Hook：

import { useEffect, useState } from 'react';
import yelp from '../api/yelp';

export default () => {
  const [results, setResults] = useState([]);
  const [errorMsg, setErrorMsg] = useState('');

  const searchApi = async (searchTerm) => {
    setErrorMsg('');
    try {
      const response = await yelp.get('/search', {
        params: {
          limit: 50,
          term: searchTerm,
          location: 'Ankara',
        },
      });
      setResults(response.data.businesses);
    } catch (err) {
      console.log('完整错误信息:', err);
      setErrorMsg('加载数据失败，请检查网络');
    }
  };

  useEffect(() => {
    searchApi('Kebap');
  }, []);

  return [searchApi, results, errorMsg];
};

在页面中添加错误信息展示，方便调试：

// SearchScreen.js
const [searchApi, results, errorMsg] = useResults();

return (
  <View>
    {errorMsg && <Text style={{color: 'red', padding: 10}}>{errorMsg}</Text>}
    <SearchBar />
    {/* ...其他组件 */}
  </View>
);

2. 检查平台网络权限 #

• Android：确保android/app/src/main/AndroidManifest.xml中添加了网络权限：

<uses-permission android:name="android.permission.INTERNET" />

漏加该权限会直接导致所有网络请求失败。

• iOS：HTTPS请求默认被ATS（App Transport Security）允许，无需额外配置。若使用代理，需确保代理能正常访问外网。

3. 验证API请求本身的有效性 #

用Postman、curl或浏览器直接调用Yelp API，排除API密钥或参数问题：

curl -H "Authorization: Bearer 你的API密钥" "https://api.yelp.com/v3/businesses/search?limit=50&term=Kebap&location=Ankara"

如果该请求失败，说明是API密钥无效、参数错误或Yelp API限制（如IP封禁、调用次数超限）；若请求成功，问题则出在React Native项目的配置或网络环境。

4. 检查模拟器/真机的网络环境 #

• 确保模拟器/真机与主机在同一网络下，未使用代理导致无法访问外网。
• iOS模拟器可尝试重置网络：Hardware > Erase All Content and Settings；Android模拟器可重启或切换网络模式。

5. 验证Axios配置的正确性 #

你的Axios配置看似正常，可尝试直接写完整URL测试，排除baseURL的潜在问题：

// 临时修改searchApi中的请求
import axios from 'axios';

const response = await axios.get('https://api.yelp.com/v3/businesses/search', {
  headers: { Authorization: 'Bearer 你的API密钥' },
  params: { limit:50, term: searchTerm, location: 'Ankara' }
});

若此请求成功，说明Axios实例配置存在问题；否则继续排查网络层面的问题。

内容的提问来源于stack exchange，提问作者Alper Yilmaz