fetch () Создание нескольких запросов API в моем приложении React - PullRequest
Новая
       40

fetch () Создание нескольких запросов API в моем приложении React

0 голосов
/ 25 октября 2018

Я работаю над приложением React и для выполнения запросов API я использовал fetch(), но по неизвестной причине fetch() вызывает несколько запросов API, в то время как я ожидаю только один.

Вв текущем сценарии я получаю 3 запроса на вкладке «Сеть» моего браузера:

enter image description here

Код, отвечающий за то же: 

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));
}

Поток приложения в порядке, и кажется, что он работает, как ожидалось, но я не могу выяснить, что является причиной нескольких запросов API.

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Наконец-то обнаружена проблема, проблема возникла из-за отсутствия завершающей косой черты (/) в конце URL.

API ожидает / в конце.Обновленный код: 

apiUrl = Constants.apiBaseUrl + fetchItem + '/';
apiUrl += id ? (id + '/') : '';
apiUrl += Constants.apiFormat;
0 голосов
/ 25 октября 2018

Первые два запроса, видимые в консоли разработчика, показывают код состояния 301 (Moved Permanently).Похоже, что ваш сервер или веб-сервер настроен на перенаправление запросов, которые вы делаете с шаблоном 2?.

Если вы отправляете правильный URL (который не приводит к перенаправлению в сервер) изfetch тогда вы начнете видеть единственный запрос в консоли.

...