Как сделать обмен данными между js и php используя fetch?

Question

[Руслан Samara]

Не срабатывает ответ от сервера, не возвращает данные.

document.addEventListener('DOMContentLoaded', function () {
  
  function UseFetch(requestData = {}) {
      console.log('Получили объект', requestData);
      console.log("Отправляемый JSON: ", JSON.stringify(requestData));
    fetch('api.php', {
      method: 'POST', // or 'PUT'
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(requestData)
    })
      .then((result) => result.ok === true ? result.json() : false)
      .then((data) => console.log("Success", data))
      .catch(error => console.error("Error", error));
  }

  UseFetch({ 'path': 123, 'abc': 234 });
  
  });

<?php

if($_POST !== null){
// var_dump($_POST);
   $result = json_decode($_POST, true);
   echo json_encode($result);
}else{
    return false;
}

Если указываем вернуть JSON в fetch то возникает ошибка:
Error SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"
Если укажем просто объект result, то вернет:
body: ReadableStream
locked: false
: object { … }
bodyUsed: false
headers: Headers { }
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "server/api.php"
: ResponsePrototype { clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), … }

То есть файл ответа он видит и возвращает код 200, но php код не возвращает данные, пробовал без условий, и возвращать var_dump($_POST) и т.д. Как я понял в глобальную переменную $_POST не прилетают данные.
Но если я вернуть к примеру var_dump([1,2,3]), и в js укажу result.text(), то этот массив прилетит мне в консоль.

Answer 1

[MSAFT]

fetch это promise, попробуй async/await:

document.addEventListener('DOMContentLoaded', function () {
  
  async function UseFetch(requestData = {}) {
      console.log('Получили объект', requestData);
      console.log("Отправляемый JSON: ", JSON.stringify(requestData));
    await fetch('api.php', {
      method: 'POST', // or 'PUT'
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(requestData)
    })
      .then((result) => result.ok === true ? result.json() : false)
      .then((data) => console.log("Success", data))
      .catch(error => console.error("Error", error));
  }

  UseFetch({ 'path': 123, 'abc': 234 });
  
  });

А еще, зачем ты декодируешь и потом кодируешь одни и те же данные? Там скорее всего и ошибка, попробуй так:

if($_POST !== null){
// var_dump($_POST);
   $result = json_encode($_POST);
   echo $result;
}else{
    return false;
}

Comments

[Руслан Samara]

проблема не в этом, не прилетают post данные, почему - не понятно

[MSAFT]

Руслан Samara, думаю потому что надо немного погуглить:

$inputJSON = file_get_contents('php://input');
        if($inputJSON !== null){
            $result = json_decode($inputJSON, TRUE);
            echo json_encode($result);
        }else{
            return false;
        }

document.addEventListener('DOMContentLoaded', function () {

        function UseFetch(requestData = {}) {
            console.log('Получили объект', requestData);
            console.log("Отправляемый JSON: ", JSON.stringify(requestData));
            fetch('/api.php', {
                method: 'POST', // or 'PUT'
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(requestData)
            })
                .then((result) => result.ok === true ? result.json() : false)
                .then((data) => console.log("Success", data))
                .catch(error => console.error("Error", error));
        }

        UseFetch({ 'path': 123, 'abc': 234 });

    });

[Руслан Samara]

$inputJSON = file_get_contents('php://input'); решило проблему!