Design & Coding Technology

How to Call REST API Web Service from Javascript in HTML page

Disclosure: When you purchase a service or a product through our links, we sometimes earn a commission.

If you’ve ever taken a look at the documentation for an API and had no idea where to start or what to do and gotten frustrated, this is the article for you.

Start with the new Fetch API, supported by all browsers except IE11 at the time of writing. It simplifies the XMLHttpRequest syntax you see in many of the other examples.

The API includes a lot more, but start with the fetch() method. It takes two arguments:

SEMrush
  1. A URL or an object representing the request.
  2. Optional init object containing the method, headers, body etc.

Simple GET:

const userAction = async () => {
  const response = await fetch('http://example.com/movies.json');
  const myJson = await response.json(); //extract JSON from the http response
  // do something with myJson
}

Recreating the previous top answer, a POST:

const userAction = async () => {
  const response = await fetch('http://example.com/movies.json', {
    method: 'POST',
    body: myBody, // string or object
    headers: {
      'Content-Type': 'application/json'
    }
  });
  const myJson = await response.json(); //extract JSON from the http response
  // do something with myJson
}

Suggested Articles:

Don't miss out!
Learn How to 10X Your Blog Traffic
Invalid email address
Give it a try. You can unsubscribe at any time.

About the author

Rahul Setia

Rahul Setia was born and raised in the Kaithal, Haryana. He worked at brands like Jabong, ProProfs etc. He was also in the List of Top 100 Social Media Influencer's 2019 by Status Brew. He lives in Delhi/NCR and is a Digital Gig & Founder of Websites i.e TechBlogCorner.com, ViralMasalla.com, DealorCoupons.com.
Follow me on: LinkedIn, @rahulsetia007 and Facebook.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.