React Native中如何将Fetch转换为Axios？解决转换后出现response.json未定义错误

嘿，这问题我太熟啦！你之所以会碰到response.json is not a function的错误，是因为Axios和Fetch的响应处理逻辑完全不同——你还在套用Fetch的习惯，但Axios已经帮你把最麻烦的一步做了。

核心差异点 #

• Fetch返回的是一个未解析的Response对象，必须手动调用.json()来解析JSON格式的响应内容；
• Axios会自动识别响应的Content-Type，如果是JSON格式，会直接把响应体解析成JavaScript对象，存放在response.data里，根本不需要再调用.json()方法。

修正后的Axios代码 #

把你的代码里的.then((response) => response.json())去掉，直接从response.data拿结果就行，另外注意异步操作的细节：

axios({ 
  method: 'get', 
  url: URLs._dashboard, 
  headers: { 
    'Content-Type': 'application/json', 
    "Accept": "application/json", 
    'Authorization': myToken, 
  }, 
  signal: abortCont.signal, 
}).then(async (response) => { 
  // 直接获取Axios已解析好的结果
  const result = response.data;
  setApiData(result); 
  // AsyncStorage.setItem是异步方法，加上await更稳妥
  await AsyncStorage.setItem('@code', result.code); 
}) 
.catch((error) => { 
  if(error.name === 'AbortError'){ 
    console.log('fetch aborted'); 
  } 
});

额外提示 #

• 如果你想确认Axios响应的完整结构，可以在then里console.log(response)，会看到它包含data、status、headers等多个字段，data就是你要的业务数据；
• 你的中止请求逻辑（用AbortController的signal）在Axios里是完全兼容的，这部分不用修改。

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