React Native如何同时获取多个API？

React Native 同时获取多个 API 通常涉及到并发请求的概念。你可以使用多种方法来实现这一目标，以下是一些常见的方法：

1. 使用 `Promise.all`

Promise.all 可以并行执行多个异步操作，并在所有操作都完成后返回结果。

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';

const fetchMultipleAPIs = async () => {
  const [data, setData] = useState([]);

  try {
    const api1 = fetch('https://api.example.com/data1');
    const api2 = fetch('https://api.example.com/data2');
    const api3 = fetch('https://api.example.com/data3');

    const [response1, response2, response3] = await Promise.all([api1, api2, api3]);

    const json1 = await response1.json();
    const json2 = await response2.json();
    const json3 = await response3.json();

    setData([json1, json2, json3]);
  } catch (error) {
    console.error('Error fetching data: ', error);
  }
};

const App = () => {
  useEffect(() => {
    fetchMultipleAPIs();
  }, []);

  return (
    <View>
      {data.map((item, index) => (
        <Text key={index}>{JSON.stringify(item)}</Text>
      ))}
    </View>
  );
};

export default App;

2. 使用 `async/await` 和 `for` 循环

如果你有多个 API 需要按顺序获取，可以使用 async/await 和 for 循环。

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';

const fetchMultipleAPIsSequentially = async () => {
  const [data, setData] = useState([]);

  try {
    const urls = [
      'https://api.example.com/data1',
      'https://api.example.com/data2',
      'https://api.example.com/data3',
    ];

    for (const url of urls) {
      const response = await fetch(url);
      const json = await response.json();
      setData(prevData => [...prevData, json]);
    }
  } catch (error) {
    console.error('Error fetching data: ', error);
  }
};

const App = () => {
  useEffect(() => {
    fetchMultipleAPIsSequentially();
  }, []);

  return (
    <View>
      {data.map((item, index) => (
        <Text key={index}>{JSON.stringify(item)}</Text>
      ))}
    </View>
  );
};

export default App;

3. 使用第三方库

你也可以使用一些第三方库来简化并发请求的处理，例如 axios。

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

const fetchMultipleAPIsWithAxios = async () => {
  const [data, setData] = useState([]);

  try {
    const urls = [
      'https://api.example.com/data1',
      'https://api.example.com/data2',
      'https://api.example.com/data3',
    ];

    const responses = await Promise.all(urls.map(url => axios.get(url)));

    const jsonData = responses.map(response => response.data);
    setData(jsonData);
  } catch (error) {
    console.error('Error fetching data: ', error);
  }
};

const App = () => {
  useEffect(() => {
    fetchMultipleAPIsWithAxios();
  }, []);

  return (
    <View>
      {data.map((item, index) => (
        <Text key={index}>{JSON.stringify(item)}</Text>
      ))}
    </View>
  );
};

export default App;

应用场景

数据聚合：当你需要从多个 API 获取数据并聚合到一个视图中时。
并行加载：当你需要同时加载多个资源以提高应用性能时。
依赖数据处理：当你需要处理多个 API 返回的数据，并且这些数据之间存在依赖关系时。

可能遇到的问题及解决方法

请求超时：如果某个 API 请求时间过长，可能会导致整个请求超时。可以使用 Promise.race 结合 setTimeout 来设置超时。

const fetchWithTimeout = (url, options, timeout = 5000) => {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Request timed out')), timeout)
    ),
  ]);
};

错误处理：如果某个 API 请求失败，可以使用 Promise.allSettled 来捕获所有请求的状态，而不仅仅是成功的请求。

const results = await Promise.allSettled([api1, api2, api3]);
results.forEach(result => {
  if (result.status === 'fulfilled') {
    console.log(result.value);
  } else {
    console.error(result.reason);
  }
});

通过以上方法，你可以有效地在 React Native 中同时获取多个 API 的数据，并处理可能遇到的问题。