React Js: Promise rejection due to SyntaxError:

Question

React Js: Promise rejection due to SyntaxError:

I've been attempting to make a POST request using the fetch method in reactjs. Despite going through some documentation, I haven't been able to resolve my error. Can someone please lend a hand?

Below is the snippet of my reactjs code:

 handleSubmit(e) {
       e.preventDefault();
       var self = this;
    
       const payload = {
       id: 111,
       studentName: 'param',
       age: 24,
       emailId: 2
    };
    fetch({
       method: 'POST',
       url: 'http://localhost:8083/students',
       body: payload,
       headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
     })
       .then(function(response) {
           return response.json()
         }).then(function(body) {
           console.log(body);
         });
     }
    
  }

If there's anyone familiar with reactjs, could you provide a straightforward example on how to execute a post request? It can be done using either fetch or axios.

javascript json fetch-api

Answer 1

Answer №1

Here is a quick demonstration.

fetch('https://exampleAPI.com/login',{
    method:'POST',
    headers:{
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    },
    body:JSON.stringify({
    email: userEmailAddress,
    password: userPassword
  })
  }).then(function (response) {

    //Check if response status is 200(OK) 
    if(response.ok) {
      alert("Welcome, you are logged in.");
    }
    //if not, throw an error to be caught in the catch block
    throw new Error(response);
  })
  .catch(function (error) {
    //Handle any errors
    console.log(error);
  });

For more detailed information on how to utilize the `fetch` function, visit https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Answer 2

Here is a quick demonstration.

fetch('https://exampleAPI.com/login',{
    method:'POST',
    headers:{
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    },
    body:JSON.stringify({
    email: userEmailAddress,
    password: userPassword
  })
  }).then(function (response) {

    //Check if response status is 200(OK) 
    if(response.ok) {
      alert("Welcome, you are logged in.");
    }
    //if not, throw an error to be caught in the catch block
    throw new Error(response);
  })
  .catch(function (error) {
    //Handle any errors
    console.log(error);
  });

For more detailed information on how to utilize the `fetch` function, visit https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Answer 3

Answer №2

I just addressed a similar query earlier. You can find the answer here.

The beauty of React lies in its simplicity - it's essentially Javascript.

So, all you really need is a method to perform a POST to your server!

You have the option to utilize the built-in fetch function or go for a more comprehensive library like axios

Here are examples using both approaches:

// ES7 async/await
const post_data = { firstname: 'blabla', etc....};
const res = await fetch('localhost:3000/post_url', { method: 'POST', body: post_data });
const json = await res.json();

// Using standard promises
const post_data = { firstname: 'blabla', etc....};
fetch('localhost:3000/post_url', { method: 'POST', body: post_data })
.then(function (res) { return res.json(); })
.then(function (json) { console.log(json); };

// AXIOS example directly from their Github
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Answer 4

I just addressed a similar query earlier. You can find the answer here.

The beauty of React lies in its simplicity - it's essentially Javascript.

So, all you really need is a method to perform a POST to your server!

You have the option to utilize the built-in fetch function or go for a more comprehensive library like axios

Here are examples using both approaches:

// ES7 async/await
const post_data = { firstname: 'blabla', etc....};
const res = await fetch('localhost:3000/post_url', { method: 'POST', body: post_data });
const json = await res.json();

// Using standard promises
const post_data = { firstname: 'blabla', etc....};
fetch('localhost:3000/post_url', { method: 'POST', body: post_data })
.then(function (res) { return res.json(); })
.then(function (json) { console.log(json); };

// AXIOS example directly from their Github
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

React Js: Promise rejection due to SyntaxError:

Answer №1

Answer №2

Similar questions

Tips for displaying a nested list in React.js

How come I am receiving {"readyState":1} in the DOM instead of JSON data in AngularJS?

Uploading Images Dynamically with AJAX

Navigating Tabs and jQuery for JSON Data Refresh: A Step-by-Step Guide

Differences seen in display when using Internet Explorer's prependTo feature

Executing a console.log statement within an array nested inside a function of an object

Why does Javascript execute in this specific order?

Secure your Express.js session cookies for enhanced protection

developing a plain old Java object that includes select elements from the response

Update JSON records based on specified conditions

Heroku deployment failed: Push rejected due to lack of a Cedar-supported application

Managing Jawbone API OAuth access tokens using node.js (express and passport)

iOS fixed positioning and scrolling

Passing dynamic props to Vue mixin: a guide

Switch the status of an individual item within a datalist using jQuery in an ASP.NET application

Detect keypress within a BrowserWindow even when multiple BrowserView components are present

Ways to delete a CSS attribute with jquery

Ways to refresh the DOM while making an asynchronous request

Is the unit-converts npm package compatible with the website https://unpkg.com?

Using PHP to pass variables to an external JavaScript file