React使用Fetch发Get请求报JSON解析错误及请求URL异常问题

根因说明 #

• 你遇到的JSON解析报错本质是请求返回内容不合法：地址拼接错误后，请求命中了本地开发服务的404规则，返回的是HTML格式的404页面，内容以<开头，调用res.json()解析时自然会抛出异常。
• 地址自动拼接本地服务域名的核心原因是：你的API变量没有添加http://协议前缀，浏览器会把无协议的地址识别为相对路径，自动拼接当前页面的域名前缀，就出现了你观察到的地址异常。

修复步骤 #

• 修正API变量的定义，补全协议前缀：
  将原有赋值API = '10.58.6.96:8000'修改为 API = 'http://10.58.6.96:8000'即可解决地址拼接问题。
• 建议补充请求异常捕获逻辑，避免出现未处理的Promise报错，优化后代码参考如下：

componentDidMount() {
    fetch(`${API}${this.props.location.pathname}`)
      .then(res => {
        // 先校验请求状态是否正常
        if (!res.ok) throw new Error('请求异常，状态码：' + res.status)
        return res.json()
      })
      .then(data => {
        console.log(data);
        this.setState({
          productsInfo: data.result,
        });
      })
      // 捕获所有请求/解析阶段的错误
      .catch(err => console.error('接口请求失败：', err))
    console.log('apiCheck', API);
}

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