如何在JavaScript中实现点击按钮发起简单REST API调用？require未定义报错如何解决

错误原因 #

require 是 Node.js（服务端 JavaScript 运行环境）特有的模块导入语法，浏览器端的原生 JavaScript 没有内置这个能力，所以才会抛出 ReferenceError 报错。你不需要强制改用后端实现，浏览器端本身就内置了发起 HTTP 请求的原生能力，完全可以在前端完成需求。

最简实现方案（零第三方依赖） #

直接用浏览器原生支持的 fetch API 即可，完全不需要依赖 axios 这类第三方库，修改你的 submit.js 代码如下即可：

function apicall() {
    console.log("apicall called");
    fetch("https://www.mydog.com/api/v3/user", {
        method: "GET",
        headers: {
            "Authorization": "Bearer 1234"
        }
    })
    .then(response => {
        // 若接口返回JSON格式数据，调用.json()方法解析，普通文本则用.text()
        return response.json();
    })
    .then(resData => {
        console.log("请求成功，返回数据：", resData);
    })
    .catch(error => {
        console.log("请求出错：", error);
    });
}

额外说明 #

• 如果你运行后遇到跨域错误，是浏览器的同源安全策略限制，只有这种情况才需要通过服务端做代理转发请求，否则前端直接调用即可。
• 如果你确实想要使用 axios，只需要删除const axios = require('axios').default;这行代码，在HTML中通过script标签引入 axios 官方提供的客户端打包版本即可直接使用，不需要额外导入。

常见疑问解答 #

• 客户端 JavaScript 本身内置了HTTP请求能力，fetch 就是官方标准的原生实现，不需要依赖任何第三方库
• 你当前的需求不需要改成后端 JavaScript 实现，仅在遇到跨域限制时才需要服务端配合
• 目前最简单的实现就是上述原生 fetch 方案，所有现代浏览器都原生支持

内容的提问来源于stack exchange，提问作者SwimBikeRun