Vue.js fetch возвращает пустой responsetext

Я пытаюсь заставить работать свое первое приложение на vue.js. По крайней мере, я могу выполнить «выборку» с результатом 200 (это своего рода успех) с помощью следующего кода:

    fetch("validate-recaptcha.php", {
        method: "post",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },

        //make sure to serialize your JSON body
        body: JSON.stringify({
            name: "myName",
            password: "myPassword"
        })
    })
    .then((response) => {
        //do something awesome that makes the world a better place
        if (response.status == 200) {
            alert(response.statusText + " " + response.responseText);
        }
        else {
            alert("Error: " + response.statusText);
        }
    });

но непонятно, почему response.responseText в undefined. Если я открою URL, который я запрашиваю в браузере, я получу следующее:

{"secret":"yoursecretkey","remoteip":"97.33.22.522"}

так что, по крайней мере, содержимое не пустое, но JavaScript показывает сообщение «OK undefined».

Ссылки:

  1. Код Полный исходный код.
  2. Живая демонстрация (нажмите кнопку Отправить форму).
1
0
1 775
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ответ, полученный из fetch(), не имеет свойства responseText, следовательно, undefined. Вы можете извлечь данные JSON из ответа, используя метод json() в ответе. responseText существует с XMLHttpRequest, но не с fetch():

fetch("validate-recaptcha.php", {
    method: "post",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: "myName", password: "myPassword" })
})
.then((response) => {
    if (response.status == 200) {
        alert(response.statusText);
    }
    else {
        alert("Error: " + response.statusText);
    }

    /* returns a promise that can be utilized using `then() */        
    return response.json();

    // could also use then() here
    // return response.json().then(data => console.log(data));
})
.then(data => console.log(data));

Надеюсь, это поможет!

что значит, что с response.json () я получаю [обещание объекта]? Как преобразовать его в текст?

Alexey Starinsky 13.09.2018 20:04

Чтобы извлечь тело, которое является читаемым потоком, необходимо выполнить методы, например json() и text(), для response. Эти методы возвращают обещания, которые должны использовать then() для доступа к внутреннему содержимому. На самом базовом уровне response.json().then(data => console.log(data));. Вы не сможете получить прямой доступ к содержимому тела в первом then() после выборки. Вам необходимо выполнить один из этих методов и использовать дополнительный then(). Спасибо!

Alexander Staroselsky 13.09.2018 20:07

Другие вопросы по теме