React Native не может получить ответ от localhost

Question

Я учусь с React Native, но не могу получить правильный ответ, мой код извлечения:

try {
     let response = fetch(
      "http://192.168.1.106/little_api/index.php",
      {
        method: "POST",
        headers: {
         "Accept": "application/json",
         "Content-Type": "application/json"
        },
       body: JSON.stringify(data)
     }
    );


     console.log(response);

ответ:

ответ API, который я получаю от API, когда я пытаюсь почтальон:

мой php API: 1018 *

но мой ответ консоли отладчика:

Answer 1

fetch() функция возвращает обещание, поэтому вы должны разрешить это обещание одним из следующих двух способов:

1 / Использование .then()

fetch(
      "http://192.168.1.106/little_api/index.php",
      {
        method: "POST",
        headers: {
         "Accept": "application/json",
         "Content-Type": "application/json"
        },
       body: JSON.stringify(data)
     }
   ).then(response => {
      console.log(response); //<- your response here
   }).catch(error => {
      console.log(error); //<-catch error
 });

2 / Использование async/await синтаксис: вы должны добавить asyn c ключевое слово в функцию, где вы вызываете fetch

async getResponse(){
try {
   let response = fetch(
      "http://192.168.1.106/little_api/index.php",
      {
        method: "POST",
        headers: {
         "Accept": "application/json",
         "Content-Type": "application/json"
        },
       body: JSON.stringify(data)
     }
    );
   console.log(response); //<- your response here
  } catch(e){
  console.log(e);<-catch error
  }
}

Answer 2

Вы можете отправить его с помощью formdata:

let formData = new FormData();
formData.append('firstname', 'test');

Если вы сделаете это, вам не нужно использовать JSON .stringify:

fetch(
  "http://192.168.1.106/little_api/index.php",
  {
    method: "POST",
    headers: {
     "Accept": "application/json",
     "Content-Type": "application/json"
    },
   body: data
 }
 ...

Answer 3

fetch - это асинхронный метод, то есть для него требуется обратный вызов .then. К данным, полученным непосредственно из этого, затем присоединяется метод json() для извлечения фактических данных в читаемом формате.

  fetch("http://192.168.1.106/little_api/index.php", {
    method: "POST",
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
 }).then(response => response.json())
   .then(data => {
     console.log(data) // this should return your data
   })
   .catch(err => console.log(err))

Как сказал Махди N в своем ответе, вы можете использовать async/await синтаксис для извлечения данных без использования вложенных обратных вызовов.