1

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.com/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.com/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?

SwimBikeRun
  • 4,192
  • 11
  • 49
  • 85
  • Just include a script tag with axios sourced from a CDN like cdnjs.com or jsdelivr.com – charlietfl May 22 '21 at 02: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 May 22 '21 at 17:03

3 Answers3

1

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

TopW3
  • 1,477
  • 1
  • 8
  • 14
  • I discovered XMLHttpRequest last night and worked great. Exactly what I wanted, thanks! Thanks for the explanation on require needing nodejs, that's helpful info for a noobie :) – SwimBikeRun May 22 '21 at 17:04
  • 1
    fetch() is a far more modern and robust API than XXMLHttpRequest – charlietfl May 22 '21 at 17:07
0

For browser you should get axios from a cdn

So add <script src="https://cdn.jsdelivr.net/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.

Hamza Jadid
  • 388
  • 4
  • 17
0

Browers have the fetch API in-built which can be used to make API calls.

Check out the docs here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

acetheninja
  • 376
  • 1
  • 9