如何在 javascript 中进行简单的 REST API 调用？ 未捕获的 ReferenceError：未定义要求
[英]How to do simple REST API calls in javascript? Uncaught ReferenceError: require is not defined
问题描述
Overall problem: How to do a simple REST API call in javascript when a button is clicked
总体问题：单击按钮时如何在 javascript 中进行简单的 REST API 调用
I want to do the equivalent of this REST call but in javascript我想做相当于这个 REST 调用但在 javascript
curl -X GET \
https://www.mydog.com/api/v3/user \
-H 'Authorization: Bearer 1234'
Attempted solution that doesn't work尝试的解决方案不起作用
page.html页.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提交.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打开 page.html 并单击按钮在控制台中显示： 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 Node.js 上的客户端：未捕获的 ReferenceError：未定义要求
Never doing web programming before (but many years in algorithm / applied math type of programming) I'm wondering if I'm getting off track.以前从未做过 web 编程（但在算法/应用数学类型的编程方面多年）我想知道我是否偏离了轨道。 This answer seems helpful except isn't making an http request something simple that's built into every language?这个答案似乎很有帮助，除非不是让 http 请求一些简单的内置于每种语言的东西？ Should I be using something beside axios maybe?我应该在 axios 旁边使用什么东西吗？ What's the simplest way to do a client javascript side http call?进行客户端 javascript 端 http 调用的最简单方法是什么？ Or am I asking the wrong question and need to do backend javascript for this?还是我问错了问题，需要为此做后端 javascript ？
3 个解决方案
解决方案1
1 已采纳 2021-05-22 02:45:26
This usually happens because your JavaScript environment doesn't understand how to handle the require() function reference.这通常是因为您的 JavaScript 环境不了解如何处理 require() function 参考。 The require() function is only available by default on Node.js environment. require() function 默认情况下仅在 Node.js 环境中可用。
there are several ways to get work around.有几种方法可以解决问题。 You can use requireJS or browserify for this.您可以为此使用 requireJS 或 browserify。 Please check require for browsers请检查浏览器的要求
If you want to make a REST API call, you can use XMLHttpRequest instead of Axios如果要进行 REST API 调用，可以使用XMLHttpRequest代替 ZD3E28535C74CCEE298187A
解决方案2
0 2021-05-22 02:45:02
For browser you should get axios from a cdn对于浏览器，您应该从 cdn 获取 axios
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所以在 submit.js 之前的submit.js文件中添加<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> （顺序很重要，所以你首先得到 axios 然后你使用它）并删除 submit.js 中的require
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. require 用于nodejs，您使用 package 管理器在本地下载 package ，然后您可以使用require导入它，而在浏览器中您没有该选项。
解决方案3
0 2021-05-22 02:49:44
Browers have the fetch API in-built which can be used to make API calls.浏览器具有内置的fetch API 可用于进行 API 调用。
Check out the docs here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch在此处查看文档： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.