Question

我正在使用React App进行工作，并使用fetch()进行API请求，但是由于某些未知原因，fetch()导致了多个API请求，而我只希望一个。

在当前情况下，我的浏览器的“网络”标签中收到3个请求：

JSON.stringify()

负责此操作的代码是：

componentDidMount() {
    var planet_id = this.props.match.params.id;
    let planetData = [];
    apiFetch('planets', false, planet_id).then(function(jsonResponse) {
        planetData = jsonResponse;
    }).then(data => this.setState({ 
        planet: planetData,
        loading: false
    }));
}

apiFetch（）的定义：

export function apiFetch(fetchParam, fullUrl = false, id = false) {
let fetchItem;

let apiUrl;

if (fullUrl) {
    apiUrl = fetchParam;
} else {
    switch (fetchParam) {
        case 'people': {
            fetchItem = Constants.apiPeople;
            break;
        }
        case 'planets': {
            fetchItem = Constants.apiPlanets;
            break;
        }
        default: {
            fetchItem = Constants.apiPlanets;
        }
    }
    apiUrl = Constants.apiBaseUrl + fetchItem;
    apiUrl += id ? ('/' + id) : '';
    apiUrl += Constants.apiFormat;
}

return fetch(apiUrl, {
    method: Constants.fetchMethod,
    cache: Constants.apiNoCache
})
.then(response => response.json())
.catch(error => console.error('Error in API:', error));
}

App的流程很好，并且似乎可以按预期运行，但是我无法弄清楚是什么导致了多个API请求。

Answer 1

在开发人员控制台中可见的前两个请求显示状态代码301 (Moved Permanently)。似乎您的后端或Web服务器已配置为使用模式2?重定向您正在发出的请求。

如果您从fetch发送正确的URL（不会在后端导致重定向），那么您将开始在控制台中看到单个请求。

Answer 2

最后找到了问题，由于URL末尾缺少斜杠（/），因此出现了问题。

API的结尾应为/。更新的代码：

apiUrl = Constants.apiBaseUrl + fetchItem + '/';
apiUrl += id ? (id + '/') : '';
apiUrl += Constants.apiFormat;

fetch（）在我的React App中发出多个API请求

2 个答案: