本文详解 fetch 请求中误用 `json.stringify()` 导致响应对象被转为字符串、进而无法访问 `.features` 等属性的问题，并提供完整、安全的前后端联调方案。

在使用 fetch 调用 Django 提供的 GeoJSON API 时，一个常见但隐蔽的错误是：在已成功解析为 JavaScript 对象后，又将其意外转回 JSON 字符串。这正是你遇到 typeof data === 'string' 且 data.features 为 undefined 的根本原因。

? 问题定位：链式 .then() 中的类型丢失

你的原始代码如下（关键问题行已标出）：

fetch('/guidebook/api/peak-data/')
  .then(response => response.json())           // ✅ 正确：将响应体解析为 JS 对象（如 { type: "FeatureCollection", features: [...] }）
  .then(response => JSON.stringify((response))) // ❌ 错误：又把对象转成字符串！此时 response 已是 object，再 stringify → string
  .then(data => {
    console.log('Type of data:', typeof data);        // → "string"
    console.log('Type of features:', typeof data.features); // → undefined（字符串无 .features 属性）
  });

response.json() 返回的是一个 Promise，它解析响应流并返回一个 JavaScript 对象（Object），而非字符串。而 JSON.stringify() 的作用恰恰相反——它把 JS 对象序列化为 JSON 格式的字符串。一旦执行这一步，后续所有属性访问（如 data.features）都会失败。

✅ 正确写法：保持对象形态，直接使用

只需删除冗余的 JSON.stringify() 步骤，即可直接操作解析后的 GeoJSON 对象：

fetch('/guidebook/api/peak-data/')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // 返回 Promise
  })
  .then(data => {
    console.log('Parsed GeoJSON object:', data);
    console.log('Type of data:', typeof data); // → "object"
    console.log('Features count:', data.features?.length || 0);

    // ✅ 安全访问 features（推荐使用可选链）
    if (Array.isArray(data.features)) {
      data.features.forEach(feature => {
        const coords = feature.geometry?.coordinates;
        const name = feature.properties?.peak_name;
        console.log(`Peak: ${name}, Coordinates:`, coords);
      });
    }
  })
  .catch(error => {
    console.error('Fetch or parsing failed:', error);
  });

⚠️ 后端注意事项：Django JsonResponse 与 serialize() 的配合

你的 Django 视图存在一个潜在风险：

def get_peak_data(request):
    peaks = Peak.objects.all()
    peak_data = serialize('geojson', peaks, geometry_field='peak_coordinates')
    return JsonResponse(peak_data, safe=False, content_type='application/json')

⚠️ serialize('geojson', ...) 返回的是 字符串格式的 GeoJSON（不是 Python dict）。虽然 JsonResponse(..., safe=False) 可接受字符串，但这绕过了 Django 的 JSON 安全校验，且易引发编码/头信息不一致问题。

✅ 推荐更健壮的写法（解析后再返回）：

from django.http import JsonResponse
from django.core.serializers.json import DjangoJSONEncoder
import json

def get_peak_data(request):
    peaks = Peak.objects.all()
    # serialize → str → json.loads() → dict → JsonResponse 自动序列化（更安全）
    geojson_str = serialize('geojson', peaks, geometry_field='peak_coordinates')
    geojson_dict = json.loads(geojson_str)  # 转为 Python dict
    return JsonResponse(geojson_dict, encoder=DjangoJSONEncoder)

或更简洁地（Django 4.1+ 支持直接序列化为 dict）：

from django.contrib.gis.serializers.geojson import Serializer

def get_peak_data(request):
    peaks = Peak.objects.all()
    serializer = Serializer()
    geojson_dict = serializer.serialize(
        peaks,
        geometry_field='peak_coordinates',
        use_natural_primary_keys=True,
        fields=('peak_name', 'peak_elevation')
    )
    return JsonResponse(geojson_dict)

? 总结：关键原则

• response.json() = 字符串 → JS 对象（只应调用一次）；
• JSON.stringify() = JS 对象 → 字符串（仅在需要发送或存储时使用）；
• 前端拿到 GeoJSON 对象后，用 data.features、feature.geometry.coordinates 等标准属性访问地理数据；
• 后端避免直接返回 serialize() 的字符串给 JsonResponse，优先确保返回的是 Python 字典结构；
• 始终检查 response.ok 和添加 .catch()，避免静默失败。

遵循以上实践，你就能稳定获取并操作来自 Django 的 GeoJSON 数据，顺利提取坐标、名称等关键字段。