React/Redux技术问询：获取浏览器地理位置后如何调用API获取周边商铺？

嘿，这个需求我之前做过类似的，给你梳理下清晰的逻辑组织方式，不管是小型应用还是后续要扩展的场景都能hold住：

如果你的商铺展示逻辑只在这一个组件里用到，直接在componentDidMount里写逻辑是最直接的方式，记得做好错误处理和状态管理：

import React, { Component } from 'react';

class NearbyShops extends Component {
  state = {
    shops: [],
    loading: true,
    error: null,
  };

  componentDidMount() {
    // 先检查浏览器是否支持地理定位
    if (!navigator.geolocation) {
      this.setState({
        loading: false,
        error: '你的浏览器不支持地理定位功能',
      });
      return;
    }

    // 请求用户授权获取位置
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const { latitude, longitude } = position.coords;
        // 获取到经纬度后调用商铺API
        this.fetchNearbyShops(latitude, longitude);
      },
      (error) => {
        // 处理定位失败的情况（比如用户拒绝授权）
        let errorMsg = '';
        switch(error.code) {
          case error.PERMISSION_DENIED:
            errorMsg = '你拒绝了位置授权，无法获取周边商铺';
            break;
          case error.POSITION_UNAVAILABLE:
            errorMsg = '无法获取当前位置';
            break;
          case error.TIMEOUT:
            errorMsg = '定位请求超时';
            break;
          default:
            errorMsg = '定位失败，请稍后重试';
        }
        this.setState({ loading: false, error: errorMsg });
      },
      // 定位配置项，根据需求调整
      { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
    );
  }

  // 单独抽离API调用逻辑，保持代码清晰
  fetchNearbyShops = async (lat, lon) => {
    try {
      const response = await fetch(`/api/shops?lat=${lat}&lon=${lon}`);
      if (!response.ok) throw new Error('获取商铺数据失败');
      const shops = await response.json();
      this.setState({ shops, loading: false });
    } catch (err) {
      this.setState({ loading: false, error: err.message });
    }
  };

  render() {
    const { loading, error, shops } = this.state;
    if (loading) return <div>加载中...</div>;
    if (error) return <div className="error">{error}</div>;
    return (
      <div className="shops-list">
        {shops.map(shop => (
          <div key={shop.id} className="shop-item">
            <h3>{shop.name}</h3>
            <p>{shop.address}</p>
          </div>
        ))}
      </div>
    );
  }
}

export default NearbyShops;

如果后续多个组件需要用到定位+获取商铺的逻辑，或者想让组件更专注于UI渲染，建议把核心逻辑抽离出来：

2.1 抽离API调用到Service层 #

创建src/services/shopService.js：

// 封装商铺相关API调用
export const fetchNearbyShops = async (lat, lon) => {
  const response = await fetch(`/api/shops?lat=${lat}&lon=${lon}`);
  if (!response.ok) throw new Error('获取商铺数据失败');
  return response.json();
};

2.2 抽离定位逻辑到工具函数或自定义Hook #

方式一：工具函数（适配Class组件） #

创建src/utils/geolocation.js：

export const getCurrentPosition = (options = {}) => {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      reject(new Error('浏览器不支持地理定位'));
      return;
    }
    navigator.geolocation.getCurrentPosition(resolve, reject, {
      enableHighAccuracy: true,
      timeout: 10000,
      maximumAge: 60000,
      ...options,
    });
  });
};

然后在组件里使用：

// 组件内引入
import { getCurrentPosition } from '../utils/geolocation';
import { fetchNearbyShops } from '../services/shopService';

// 在componentDidMount里调用
async componentDidMount() {
  try {
    this.setState({ loading: true });
    const position = await getCurrentPosition();
    const shops = await fetchNearbyShops(position.coords.latitude, position.coords.longitude);
    this.setState({ shops, loading: false });
  } catch (err) {
    this.setState({ loading: false, error: err.message });
  }
}

方式二：自定义Hook（适配Function组件，推荐React 16.8+） #

创建src/hooks/useNearbyShops.js：

import { useState, useEffect } from 'react';
import { getCurrentPosition } from '../utils/geolocation';
import { fetchNearbyShops } from '../services/shopService';

export const useNearbyShops = () => {
  const [shops, setShops] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadShops = async () => {
      try {
        const position = await getCurrentPosition();
        const shopData = await fetchNearbyShops(position.coords.latitude, position.coords.longitude);
        setShops(shopData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    loadShops();
  }, []);

  return { shops, loading, error };
};

然后在Function组件里直接用：

import { useNearbyShops } from '../hooks/useNearbyShops';

const NearbyShops = () => {
  const { shops, loading, error } = useNearbyShops();

  if (loading) return <div>加载中...</div>;
  if (error) return <div className="error">{error}</div>;

  return (
    <div className="shops-list">
      {shops.map(shop => (
        <div key={shop.id} className="shop-item">
          <h3>{shop.name}</h3>
          <p>{shop.address}</p>
        </div>
      ))}
    </div>
  );
};

• API调用逻辑：统一放在src/services/目录下，比如shopService.js，方便统一管理API地址、请求头、错误处理等。
• 定位工具函数：放在src/utils/或src/helpers/目录下，比如geolocation.js，作为通用工具复用。
• 自定义Hook：放在src/hooks/目录下，专门存放业务相关的自定义Hook，和UI组件解耦。
• 组件内逻辑：如果只是单一组件使用，直接写在组件内即可，但建议把API调用单独抽成组件方法，保持代码清晰。

最后别忘了处理边界情况：比如用户拒绝授权后提供手动输入位置的入口，或者默认使用城市中心点作为 fallback，提升用户体验~

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