Overall problem: How to do a simple REST API call in javascript when a button is clicked
I want to do the equivalent of this REST call but in javascript
curl -X GET \
\
-H 'Authorization: Bearer 1234'
Attempted solution that doesn't work
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Submit</title>
</head>
<body>
<script src="submit.js"></script>
<button onclick="apicall()">Make REST API call</button>
</body>
</html>
submit.js
const axios = require('axios').default;
function apicall() {
console.log("apicall called");
const headers = {
"Authorization": "Bearer 1234",
}
axios.get(
";,
{headers: headers}
).then(function (response){
console.log(response)
}).catch(function (error) {
// handle error
console.log(error);
}).then(function () {
// always executed
});
Problem with attempted solution
Opening page.html and clicking the button shows this in the console: submit.js:1 Uncaught ReferenceError: require is not defined
Answer to subproblem (but feels not straightforward)
Client on Node.js: Uncaught ReferenceError: require is not defined
Never doing web programming before (but many years in algorithm / applied math type of programming) I'm wondering if I'm getting off track. This answer seems helpful except isn't making an http request something simple that's built into every language? Should I be using something beside axios maybe? What's the simplest way to do a client javascript side http call? Or am I asking the wrong question and need to do backend javascript for this?
Overall problem: How to do a simple REST API call in javascript when a button is clicked
I want to do the equivalent of this REST call but in javascript
curl -X GET \
https://www.mydog./api/v3/user \
-H 'Authorization: Bearer 1234'
Attempted solution that doesn't work
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Submit</title>
</head>
<body>
<script src="submit.js"></script>
<button onclick="apicall()">Make REST API call</button>
</body>
</html>
submit.js
const axios = require('axios').default;
function apicall() {
console.log("apicall called");
const headers = {
"Authorization": "Bearer 1234",
}
axios.get(
"https://www.mydog./api/v3/user",
{headers: headers}
).then(function (response){
console.log(response)
}).catch(function (error) {
// handle error
console.log(error);
}).then(function () {
// always executed
});
Problem with attempted solution
Opening page.html and clicking the button shows this in the console: submit.js:1 Uncaught ReferenceError: require is not defined
Answer to subproblem (but feels not straightforward)
Client on Node.js: Uncaught ReferenceError: require is not defined
Never doing web programming before (but many years in algorithm / applied math type of programming) I'm wondering if I'm getting off track. This answer seems helpful except isn't making an http request something simple that's built into every language? Should I be using something beside axios maybe? What's the simplest way to do a client javascript side http call? Or am I asking the wrong question and need to do backend javascript for this?
Share Improve this question asked May 22, 2021 at 2:32 SwimBikeRunSwimBikeRun 4,48011 gold badges59 silver badges97 bronze badges 3- Just include a script tag with axios sourced from a CDN like cdnjs. or jsdelivr. – charlietfl Commented May 22, 2021 at 2:37
- That was something I tried, but it didn't work. I just add it into the html file right? I tried both above and below the other script tag, didn't work either way. But good to know it should have worked and I was doing something else wrong. – SwimBikeRun Commented May 22, 2021 at 17:03
- Does this answer your question? How to call a REST web service API from JavaScript? – stackprotector Commented Mar 13, 2024 at 14:15
3 Answers
Reset to default 1This 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
Browers have the fetch API in-built which can be used to make API calls.
Check out the docs here: https://developer.mozilla/en-US/docs/Web/API/Fetch_API/Using_Fetch
For browser you should get axios from a cdn
So add <script src="https://cdn.jsdelivr/npm/axios/dist/axios.min.js"></script> in your html file before the submit.js (the order is important, so that you get axios first then you use it) And remove the require in submit.js
require is for nodejs, you use a package manager to download the package locally, then you can import it using require, while in the browser you don’t have that option.