如何在React项目中获取仅返回纯文本的REST接口响应结果

这个接口默认返回纯文本格式的国家码，不需要按JSON响应的逻辑处理，实现步骤如下：

接口参数预处理 #

你当前请求带的formatted=true参数会返回带多余换行、缩进的格式化文本，直接把参数值改成formatted=false，接口就会返回无冗余空白的标准两字母国家码，比如示例坐标请求返回值就是AT（奥地利）。
注意：示例里的vincea23是公开测试用户名，生产环境请替换成你自己在Geonames注册的免费账号用户名，避免触发限流。

核心调用逻辑 #

因为返回值是纯文本，请求时直接用Response的text()方法解析即可，不需要调用json()，用原生fetch就能实现，不需要额外引入第三方请求库：

/**
 * 根据经纬度获取国家码
 * @param {number} lat 纬度
 * @param {number} lng 经度
 * @param {string} username Geonames账号用户名
 * @returns {Promise<string|null>} 两字母国家码
 */
const getCountryCode = async (lat, lng, username) => {
  try {
    // 生产环境建议替换为https前缀地址，避免HTTPS站点拦截HTTP请求：https://secure.geonames.org/countryCode
    const res = await fetch(
      `http://api.geonames.org/countryCode?formatted=false&lat=${lat}&lng=${lng}&username=${username}`
    )
    const result = await res.text()
    const countryCode = result.trim()
    // 正常国家码长度为2位，长度异常时说明接口返回了错误信息（比如坐标在公海、用户名无效、请求超限）
    if (countryCode.length !== 2) {
      throw new Error(countryCode)
    }
    return countryCode
  } catch (err) {
    console.error('国家码获取失败：', err.message)
    return null
  }
}

React 组件内使用示例 #

函数组件中结合useEffect调用即可：

import { useEffect, useState } from 'react'

export default function GeoInfo() {
  const [countryCode, setCountryCode] = useState(null)
  // 替换为你自己的Geonames用户名
  const GEONAMES_USER = 'your_personal_username'

  useEffect(() => {
    // 示例坐标测试
    getCountryCode(47.03, 10.2, GEONAMES_USER).then(code => {
      setCountryCode(code)
    })
  }, [])

  return (
    <div>
      对应国家码：{countryCode ?? '加载中...'}
    </div>
  )
}

常见注意事项 #

• 不要误用res.json()解析响应：接口返回text/plain类型内容，强行调用JSON解析方法会直接抛出语法错误
• 线上环境优先使用HTTPS协议接口，避免浏览器混合内容拦截
• 做好错误兜底：当传入坐标位于公海、账号请求量超限、用户名无效时，接口会返回文本形式的错误提示，需要在代码里做捕获处理

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