How to Call a Rest Web Service API from JavaScript

How to call a REST web service API from JavaScript?

I'm surprised nobody has mentioned 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:

  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
}

How to do simple REST API calls in javascript? Uncaught ReferenceError: require is not defined

This usually happens because your JavaScript environment doesn’t understand how to handle the require() function reference. The require() function is only available by default on Node.js environment.

there are several ways to get work around. You can use requireJS or browserify for this. Please check require for browsers

If you want to make a REST API call, you can use XMLHttpRequest instead of Axios

How to call RESTful web service automatically

You can do it using two ways:

(1) Traditional approach:

you can implement polling, basically calling your rest API again & again at a
certain interval; get the data & check for change

(2) Websockets(I like it more):

You can also use WebSockets, basically, web sockets can maintain a live two way communication with the server
. Reference on how to use WebSockets can be found here
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

Trying to Call a REST Web Service API from an HTML page in another project and GET an item's properties

Your $.get does not look right. Try something like this:

$.get( "http://localhost:54754/orders/" + on + "/contents", 
function( data ) {
// do something here with the returned data...
// alert( data );
});

You probably did not intent to submit the form, so change from:

<input id="submitOrder" onclick="getContents()" type="submit" title="Submit" />

to something like:

<input id="submitOrder" onclick="getContents()" type="button" title="Submit" />

I did not review your server side code as the functions, etc. are not fully defined there.

How to call REST API in HTML

you'll need some Javascript here. Something like this should work:

<script type="text/javascript">
var apiUrl = 'https://pokeapi.co/api/v2/pokemon/ditto/';
fetch(apiUrl).then(response => {
return response.json();
}).then(data => {
// Work with JSON data here
console.log(data);
}).catch(err => {
// Do something for an error here
});
</script>

this code is using the fetch function ( more info here ) to make a GET request to the url contained in the apiUrl variable .
You may want to use an HTML input tag to make the Pokemon name dynamic.

Calling REST endpoint from Javascript

Thanks a lot everybody for your replies and thanks for reminding me of asynchronicity in Javascript, which I had totally forgotten about. I managed to make this work by using axios library, which I read integrates nicely with Vue.js, which I am intending to use. Here is the solution that worked for me:

<script>
import axios from "axios";
export default {
name: 'HelloWorld',
data () {
return {
msg: ''
}
},
mounted() {
axios({method: "GET", "url": "https://api.spotify.com/v1/search?q=Muse&type=track"}).then(result => {
this.msg = result.data.tracks.items[0].name
}, error => {
console.error(error);
});
}
}
</script>


Related Topics



Leave a reply



Submit