React Native调用非示例API返回undefined问题求助

嘿，我一眼就瞅到你代码里的核心问题了——你所有API请求函数最后都在返回responseJson.movies，但只有Facebook的movies.json接口返回的数据里有movies字段，另外两个API的返回结构完全不一样啊！

咱们一个个拆解问题：

1. 字段不匹配直接导致返回undefined #

• 国家API（apiHost2）：调用/v1/Country/getCountries/后，返回的是国家列表的数组（或包裹在特定键名里的数组），根本没有movies这个属性，你硬取这个字段肯定得到undefined。得改成返回实际的国家数据，比如如果接口返回是{ "Countries": [...] }，就返回responseJson.Countries，要是直接返回数组就写return responseJson。
• NASA的APOD API（apiHost3）：这个接口返回的是单条天文数据对象，里面有title、url、explanation这些字段，完全没有movies，你取这个字段当然是undefined，直接返回整个responseJson或者你需要的具体字段就行。

2. 其他可能踩的坑 #

HTTP协议限制 #

你的国家API用的是http协议，在iOS 9+和Android新版本里，默认会拦截非HTTPS的请求。如果是这个原因，得配置允许HTTP请求：

• iOS：在Info.plist里添加NSAppTransportSecurity字典，把NSAllowsArbitraryLoads设为YES（注意上线时最好针对性配置，别全局放开）。
• Android：在AndroidManifest.xml的application标签里加上android:usesCleartextTraffic="true"。

API有效性检查 #

确认NASA的API密钥是否还能用（你用的这个是公开测试密钥，可能有请求次数限制）；国家API的接口路径有没有拼写错误，比如末尾的斜杠是否需要，或者有没有参数遗漏。

修正后的示例代码 #

const apiHost1 = 'https://facebook.github.io';
const apiHost2 = 'http://countryapi.gear.host';
const apiHost3 = 'https://api.nasa.gov';
export default {
  async fectchInitialOrders(){
    try {
      let response = await fetch(apiHost1 + '/react-native/movies.json');
      let responseJson = await response.json();
      return responseJson.movies; // 这个没问题，因为该接口确实返回movies字段
    } catch (error) {
      console.error(error);
    }
  },
  async fectchInitialCountry(){
    try {
      let response = await fetch(apiHost2 + '/v1/Country/getCountries/');
      let responseJson = await response.json();
      // 这里根据实际返回结构调整，比如如果是responseJson.Countries就写这个
      return responseJson; 
    } catch (error) {
      console.error(error);
    }
  },
  async fectchNasaData(){
    try {
      let response = await fetch(apiHost3 + '/planetary/apod?api_key=NNKOjkoul8n1CH18TWA9gwngW1s1SmjESPjNoUFo');
      let responseJson = await response.json();
      // 直接返回NASA的APOD数据，不用硬找movies字段
      return responseJson; 
    } catch (error) {
      console.error(error);
    }
  }
};

实用调试技巧 #

以后遇到这种问题，先在response.json()之后加一句console.log(responseJson)，把完整的返回数据打出来看看结构，再决定取哪个字段，别直接照搬第一个接口的写法哦～

内容的提问来源于stack exchange，提问作者Priva Leuga