Извлекаем api .then вызывающего кода выполняется в первую очередь, чем служба .then, что приводит к неопределенным данным

Question

У меня есть эта функция в моем сервисе

function getBreeds() {
    const requestOptions = {
        method: "GET"
    };

    return fetch(`${config.apiUrl}breeds`, requestOptions).then(handleResponse);
}

function handleResponse(response) {
    response.text().then(text => {
        const data = text && JSON.parse(text)
        if (!response.ok) {
            const error = (data && data.message) || response.statusText
            return Promise.reject(error)
        }
        return data
    })
}

, и она была вызвана в моем магазине vuex

getBreeds({ commit }) {
    commit("getRequest")

    catService.getBreeds()
        .then(
            breeds => { 
                commit("getBreedsSuccess", breeds)  // this line of code executed first even the api is not yet finish
                console.log(breeds)
            },
            error => commit("getFailure", error)
        )
}

Что происходит, если в моем магазине vuex сначала вызывается, чем затем в моем служении ценность породы стала неопределенной. Как решить эту проблему?

Answer 1

Ваш handleResponse ничего не возвращает, поэтому функция getBreeds возвращает Обещание, которое разрешает , как только вы получили заголовки (микрозадача после разрешения fetch), но до анализа ответа.

Всякий раз, когда у вас есть Обещание, вы почти всегда должны либо await, либо return, за исключением инициатора, чтобы убедиться, что все соединено правильно. Измените

response.text().then(text => {

на

return response.text().then(text => {

Это вернет обещание .text() до вызывающего, getBreeds и до getBreeds.

(вам также, вероятно, следует поставить .catch в конец вызова catService.getBreeds, если он не существует)