Question

我有一个React本机应用程序，在许多设备上都运行良好，最近，我在Android和IOS上的一些设备上都收到了“捕获错误JSON解析错误：无法识别的令牌'<'”。

查看代码

fetch(url, {method: 'POST', headers: {Authorization : `Bearer ${user.token}`}})
            .then(response => {
                const statusCode = response.status;
                const responseJson = response.json();
                return Promise.all([statusCode, responseJson]);
            })
            .then(res => {
                const statusCode = res[0];
                const responseJson = res[1];
                // console.log(responseJson);
                if (statusCode == 200) {
                    if (responseJson.reload.status != 1 ) {
                        Alert.alert(I18n.t('phrases.transaction_failed'), I18n.t('phrases.transaction_not_completed') + ' - ' + responseJson.transaction.status_desc)
                    }else{
                        Actions.success({data: responseJson});
                    }
                }else if(statusCode == 422){
                    alert('missing fields');
                    console.warn(responseJson);
                }else{
                    Alert.alert(I18n.t('words.error'), responseJson.message);
                    console.log(res);
                }
            })
            .catch(err => {
                alert('Catch Error ' + err.message);
                console.log(err);
            }).finally( fin => this.setState({ loading: false }) )
    }

Answer 1

问题可能是在某些情况下，您正在调用的端点未返回JSON，而是返回HTML，可能是伴随HTTP错误的错误页面。因此，您需要在应用程序中进行检查，并诊断为什么在某些情况下而不是其他情况下会发生这种情况。

那么为什么要尝试将HTML解析为JSON？您没有向我们显示任何代码，但是我想您已经在fetch API中碰到了步枪，并且拥有这样的代码：

fetch("/your/endpoint")
.then(response => response.json()) // <=== This is the footgun
.then(data => {
    // ...use the data...
})
.catch(error => {
    // ...report the error...
});

问题是fetch不会拒绝有关HTTP错误的承诺，而只是拒绝网络错误。您需要检查是否没有HTTP 500、404等状态代码：

fetch("/your/endpoint")
.then(response => {
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    return response.json();
})
.then(data => {
    // ...use the data...
})
.catch(error => {
    // ...report the error...
});

捕获错误JSON解析错误：无法识别的令牌'<'-react-native

1 个答案: