metoda fetch - post

Witam, będe chciał wysłać dane wpisane w formularzu do backendu (za backendem jeszcze czekam). Moje pytanie czy to co napisałem jest ok ? po wpisaniu odpowiedniego adresu ULR w miejsce API dane zostaną wysłane? na razie tylko te dane ktore wpisalem w formularzu pokazuja sie ładnie w aplikacji, ale wrzucam je tylko do tablicy.

addItem = e => {
    e.preventDefault();
    const newItem = {
      name: e.target[0].value,
      question: e.target[1].value,
      answer: e.target[2].value,
      description: e.target[3].value,
      image: e.target[4].value,
    };
    this.setState(prevState => ({
      items: [...prevState.items, newItem]
    }));
    const post = {
      method: 'POST',
      body: JSON.stringify(newItem),
      headers: {
       'Content-Type': 'application/json'
   }
    };
    fetch('API', post)
      .then(response => response.json())
    e.target.reset();
  };

1. Twoja funkcja addItem() nie czeka aż backend odpowie (musiałbyś mieć await fetch('API', ...);
2. Co zrobisz, jeśli backend zwróci informację nie udało się?

Patryk27 napisał(a):

1. Twoja funkcja addItem() nie czeka aż backend odpowie (musiałbyś mieć await fetch('API', ...);

Op już użył starej składni fetch.then, więc po co miałby jeszcze używać async - await? Chodzi Ci o to, że powinien używać nowej składni?

Poza tym czy musi czekać? Przecież ma po fetch wywołanie funkcji then i tam można rozwiązać Promise i zareagować na rezultat. Async - await to tylko nowa składnia i niekoniecznie zatrzymywanie całej funkcji addItem jest konieczne. Z tego co widać w kodzie jedyną operacją po fetch jest reset pola formularza, czy rzeczywiście nie chcemy resetować formularza do czasu odpowiedzi lub jeżeli coś pójdzie nie tak? Nie wiem co chce osiągnąć op.

2. Co zrobisz, jeśli backend zwróci informację nie udało się?

Racja. Przedstawiony kod nie zareaguje w ogóle na błąd z serwera. Autor musiałby do łańcuszka fetch().then().then() dodać jeszcze error() i tam obsłużyć błąd np.

Op już użył starej składni fetch.then, więc po co miałby jeszcze używać async - await?

W moim założeniu addItem() byłoby async i wtedy można prosto zrobić await fetch(...) z pominięciem zabawy w kombinatory.

Proszę o pomoc.
Backend powstał niestety mam problem z wysyłlaniem bo samo odbieranie działa ok :

  fetch("https://api...")
      .then(response => {
        if (response.ok) {
          console.log(response)
          return response;
        }
        throw Error(response.status)
      })
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.log(error))

w konsoli wyswietla się tak jak powinno :

0: {Id: 1, Name: "imie1", Description: "brak1"}
1: {Id: 2, Name: "imie2", Description: "brak2"}
2: {Id: 3, Name: "imie2", Description: "brak3"}

Natomiast gdy chce wysłac:

 const ob = {
      Name: "imie3",
      Description: "opis",
    }

    fetch("https://api....", {
      method: "post",
      headers: {
        "Content-Type": "application/json" 
      },
      body: JSON.stringify(ob)
    })
      .then(res => res.json())
      .then(res => {
        console.log(res);
      })

Występuje błąd:

Access to fetch at 'https://api..' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
POST https://api..... net::ERR_FAILED
Uncaught (in promise) TypeError: Failed to fetch

Backend ma nieprawidłowo skonfigurowany CORS - wyślij tę informację z przeglądarki programiście / devopsowi.

Przeglądarki ze względu na bezpieczeństwo wymagają, żeby aplikacja webowa korzystała z jednego źródła Same-origin policy. Twoja aplikacja stoi na localhost:3000, a próbujesz się połączyć z jakimś api 'https://api..' które jest innym źródłem (inna domena). W związku z tym przeglądarka blokuje połączenie wyświetlając stosowny komunikat.

Żeby zezwolić na korzystanie z wielu źródeł przeglądarka musi otrzymać w nagłówku odpowiedzi 'Access-Control-Allow-Origin'. Zatem albo trzeba wykonać zmianę po stronie serwera i dodać to do nagłówka w odpowiedzi, albo musisz zainstalować wtyczkę do przeglądarki, do Chrome istnieje wtyczka Allow CORS, która dodaje do nagłówka odpowiedzi tę wymaganą wartość. Tylko pamiętaj, żeby wyłączyć wtyczkę jeżeli jej nie potrzebujesz.

chyba trzeba coś dodać po stronie serwera gdyż błąd który wypisałem wyżej występuje z zainstalowaną wtyczką Allow Cors, natomiast bez tej wtyczki błąd brzmi:

Access to fetch at 'https://api...' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
POST https://api.. net::ERR_FAILED
Uncaught (in promise) TypeError: Failed to fetch