Как ответ сервера через fetch вернуть в виде текста в переменную?

Question

[Alex]

return fetch(ajaxurl, {
                 method: 'POST',
                 body: formData
             }).then(resp => resp.text());

возвращается все равно промис?!
Подскажите что тут не правильно, ведь text() возвратить должен ответ сервера в виде текста?

Comments

[Yzurgzd]

попробуй вместо text написать json

[Alex]

Yzurgzd, как бы ожидаемо Uncaught (in promise) SyntaxError: Unexpected token d in JSON at position 0 ответ то текст :)

[Сергей Соколов]

покажите всю функцию, или хотя бы её объявление, откуда return.

Есть ли там сахар async ?

[Alex]

Сергей Соколов, выше ничего больше нет обычная синхронная функция function name(){} ну и formData.

function getIndex(adr) {
             var formData = new FormData();
             formData.append('action', 'getindex');
             formData.append('address', adr);
             return fetch(ajaxurl, {
                 method: 'POST',
                 body: formData
             }).then(resp => resp.text())
                 .then(data => data)
}

[Just Me]

что тебя смущает? В коллбеке и присвой ответ переменной

Answer 1

[Вадим]

Подскажите что тут не правильно, ведь text() возвратить должен ответ сервера в виде текста?

Тут всё правильно. resp.text() как Вы заметили, тоже возвращает промис. А вот следующий then уже вернёт данные.

fetch(ajaxurl, {
  method: 'POST',
  body: formData
})
.then(resp => resp.text())
.then(data => alert(data))

Comments

[Alex]

return fetch(ajaxurl, {
                 method: 'POST',
                 body: formData
             }).then(resp => resp.text())
                 .then(data => data)

Всё равно промис

[Вадим]

Alex, Так а куда Вы вернули data? вникуда? Вы же с ним ничего не сделали

[Вадим]

Alex, Видится мне у Вас типичное непонимание как перейти с синхронного мышления на асинхронное.
Это нормально, сам таким был :-)
Если у Вас асинхронный код, то это либо цепочка промисов
func()
.then(action1)
.then(action2)
.then(action3)
И отдельно в переменные ни в какие результат не записываете. Данные передаются по цепочке.

Либо используйте async/await.
Тогда будет типа так:

async function asyncFn() {
 const data = await fetch(ajaxurl, {
                 method: 'POST',
                 body: formData
             }).then(resp => resp.text())
alert(data)
}
asyncFn()

[Alex]

Вадим, ну стрелочная функция вроде как возвращает ответ в return. Или я не правильно понимаю. Я пытаюсь синхронно получить ответ от сервера.

[Alex]

Вадим, а синхронно получить ответ через fetch не получится? я просто раньше всегда пользовался jquery $.ajax, а тут нужно синхронно дать ответ от сервера.

[Вадим]

Alex, если Вы хотите полной синхронности, то используйте XMLHttpRequest, там есть синхронный режим.

[Вадим]

Alex, в $.ajax тоже есть синхронный режим.
https://ruseller.com/jquery?id=11 - async: false

[Alex]

Вадим, async уже считается устаревшим, поэтому не использую его.
Я первый раз связался с fetch, думал он умеет быть синхронным. C XMLHttpRequest много кода писать лень думал с фетч получится))

[Вадим]

Alex, ну вот и синхронность точно так же считается устаревшей)

[Alex]

Вадим, да видимо придется изощряться с асинхронным результатом функции делая саму функцию асинхронной. Если честно с ведением новых стандартов со старых времен JS кажется что всё только усложняется, хотя вроде пытаются всё упрощать ))
Так как при асинхронность иногда становится как мне кажется костылём, возможно я конечно просто мыслю по старому))

[Вадим]

Alex,

возможно я конечно просто мыслю по старому

Так и есть :-)
Но, несомненно, всё усложнилось.

Answer 2

[Сергей Соколов]

Сетевые запросы асинхронны по своей природе: выполняются непредсказуемо долго.

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

function getIndex(adr) {
  // ...
  return fetch(ajaxurl, {
    method: 'POST',
    body: formData
  }).then(resp => resp.text())
    .then(showResult)
    // парашютики не забываем:
    .catch(err => console.error(err));
}

function showResult(data) {
  console.log(data);
}

getIndex('https://ya.ru/'); // вернёт промис, ну и фиг с ним

Либо поместите всю логику дальнейшей работы с результатом прямо в цепочку промисов:

function getIndex(adr) {
  // ...
  return fetch(ajaxurl, {
    method: 'POST',
    body: formData
  }).then(resp => resp.text())
    .then(showResult)
    .catch(err => console.error(err));
}

getIndex('https://ya.ru/')
  .then(data => {
    document.querySelector('#output').innerText = data;
  })
  .catch(err => console.error(err));

Comments

[Alex]

да видимо так и придётся сделать как во втором варианте. Работать с результатом как с промисом, втыкая дальнейшую логику в then результата.

Answer 3

[Владимир]

Промис всегда возвращает промис
https://habr.com/ru/company/mailru/blog/269465/
Вариант 1) используй await ну тут зависит от того чего у тебя выше написано
https://developer.mozilla.org/en-US/docs/Web/JavaS...

Вариант 2) Переписать код выше, так чтобы он работал с Promise

Comments

[Alex]

await же в асинхронных функциях вызывается только вроде бы или нет?
Мне надо возвратить return c текстом ответа сервера синхронно, т.е. дождавшись ответа.

[Alex]

"Переписать код выше, так чтобы он работал с Promise"

Как это сделать чтобы синхронно получить ответ сервера пост запросом ?

[Владимир]

Alex, fetch асинхронный, как ты с него можешь ответ получить синхронно?
Можно переписать код, который использует этот ответ в асинхроный и использовать await но синхронным ты его уже никак не сделаешь.