如何用Promise.all合并React Native中DeviceInfo与Geolocation的Promise

嘿，很高兴看到你在开发第一个React Native应用！用Promise.all()来并行处理这两个异步操作是个非常高效的选择，不用等一个操作完成再启动另一个，能节省不少时间。

首先我们得明确：如果这两个API已经返回Promise（你提到它们均返回Promise），那直接用Promise.all()就行；如果是旧版本的回调式API，我们也可以先把它们包装成Promise再合并。下面分两种情况给出具体实现：

情况1：API本身返回Promise #

如果你的DeviceInfo.getMACAddress()和navigator.geolocation.getCurrentPosition()已经是Promise-based的API，直接把它们放进Promise.all()的数组参数里即可：

Promise.all([
  DeviceInfo.getMACAddress(),
  navigator.geolocation.getCurrentPosition()
])
.then(([macAddress, position]) => {
  // 结果数组的顺序和传入的Promise顺序一致
  console.log('MAC地址:', macAddress);
  console.log('地理位置信息:', position);
  // 在这里处理你的业务逻辑，比如把数据存入组件状态
})
.catch(error => {
  // 任意一个操作失败都会触发这个回调
  console.error('获取信息失败:', error);
});

情况2：API是回调式（手动包装成Promise） #

如果你的代码版本里这两个方法还是回调形式（就像你给出的示例代码那样），我们需要先把它们包装成Promise，再用Promise.all()合并：

第一步：包装两个回调式API #

// 包装DeviceInfo.getMACAddress为Promise
const getMACAddressPromise = () => {
  return new Promise((resolve, reject) => {
    DeviceInfo.getMACAddress(mac => {
      mac ? resolve(mac) : reject(new Error('无法获取MAC地址'));
    });
  });
};

// 包装Geolocation.getCurrentPosition为Promise
const getCurrentPositionPromise = () => {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      position => resolve(position),
      error => reject(error)
    );
  });
};

第二步：用Promise.all合并执行 #

Promise.all([
  getMACAddressPromise(),
  getCurrentPositionPromise()
])
.then(([macAddress, position]) => {
  console.log('MAC地址:', macAddress);
  console.log('地理位置信息:', position);
  // 这里写你的业务逻辑
})
.catch(error => {
  console.error('操作失败:', error);
});

额外提示 #

• Promise.all()会并行执行所有Promise，只有全部成功才会进入then回调，结果数组的顺序和传入的Promise数组顺序完全一致。
• 如果任意一个Promise失败，Promise.all()会立刻触发catch回调，返回第一个出现的错误。
• 在React Native中，别忘了给地理位置请求配置权限：Android需要在AndroidManifest.xml里添加ACCESS_FINE_LOCATION等权限，iOS需要在Info.plist里添加NSLocationWhenInUseUsageDescription描述，否则getCurrentPosition可能会调用失败。

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