JS HTTP GET/POST 请求
最后修改于 2023 年 10 月 18 日
在本文中，我们将展示如何在 JavaScript 中创建 HTTP GET 和 POST 请求。我们使用 Fetch API 和 Axios 库。
HTTP
超文本传输协议（Hypertext Transfer Protocol (HTTP)）是一种用于分布式、协作式、超媒体信息系统的应用层协议。HTTP 协议是万维网数据通信的基础。
HTTP GET
HTTP GET 方法请求指定资源的表示。使用 GET 的请求应该只检索数据。
HTTP POST
HTTP POST 方法将数据发送到服务器。它通常用于上传文件或提交完成的 Web 表单。
Fetch API
Fetch API 提供了一个 JavaScript 接口，用于访问和操作 HTTP 管道的各个部分，例如请求和响应。该 API 源于浏览器。
fetch 是一个全局函数，它接受 url 和 options 参数，并返回一个 promise。该 promise 解决为请求的响应。
let promise = fetch(url, [options])
如果我们不提供 options，则会生成一个简单的 GET 请求，以下载 url 的内容。
Axios
Axios 是一个基于 promise 的 HTTP 客户端，适用于浏览器和 Node.js。Axios 使得向 REST 端点发送异步 HTTP 请求和执行 CRUD 操作变得容易。它可以在纯 JavaScript 或与 Vue 或 React 等库一起使用。
JS fetch GET 请求
以下示例创建一个简单的 GET 请求，并将结果作为文本处理。
<script>
async function doRequest() {
let url = 'http://webcode.me';
let res = await fetch(url);
if (res.ok) {
let text = await res.text();
return text;
} else {
return `HTTP error: ${res.status}`;
}
}
doRequest().then(data => {
console.log(data);
});
</script>
我们获取 webcode.me 网页的内容。
let url = 'http://webcode.me'; let res = await fetch(url);
fetch 方法只接受 URL 作为参数。在这种情况下，默认请求是 GET 请求。
let text = await res.text();
我们从请求中获取正文作为纯文本。
JS fetch POST 请求
在下一个示例中，我们使用 JSON 数据创建一个 POST 请求。
<script>
async function doRequest() {
let url = 'http://httpbin.org/post';
let data = {'name': 'John Doe', 'occupation': 'John Doe'};
let res = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (res.ok) {
// let text = await res.text();
// return text;
let ret = await res.json();
return JSON.parse(ret.data);
} else {
return `HTTP error: ${res.status}`;
}
}
doRequest().then(data => {
console.log(data);
});
</script>
POST 请求被发送到 http://httpbin.org/post。
let data = {'name': 'John Doe', 'occupation': 'John Doe'};
这是要发送的数据。
let res = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
我们将 method 参数设置为 POST，并选择 application/json 作为内容类型。数据被字符串化为 body 参数。
let ret = await res.json(); return JSON.parse(ret.data);
我们获取数据作为 JSON 字符串，并将其解析为 JSON 对象。
JS 使用 Axios 的 GET 请求
以下示例使用 Axios 库创建一个 GET 请求。
$ npm i axios
我们安装 Axios 模块。
const axios = require('axios');
async function doGetRequest() {
let res = await axios.get('http://webcode.me');
let data = res.data;
console.log(data);
}
doGetRequest();
该示例从一个简单的网站检索一个主页。它使用 async/await 语法。
JS 使用 Axios 的 POST 请求
在下面的示例中，我们生成一个包含表单数据的 POST 请求。
$ npm i axios form-data
我们安装 form-data 模块。
使用 application/x-www-form-urlencoded 时，数据在请求的正文中发送； 键和值以键值对的形式编码，用 '&' 分隔，键和值之间用 '=' 分隔。
const axios = require('axios');
const FormData = require('form-data');
async function doPostRequest() {
const form_data = new FormData();
form_data.append('name', 'John Doe');
form_data.append('occupation', 'gardener');
let res = await axios.post('http://httpbin.org/post', form_data,
{ headers: form_data.getHeaders() });
let data = res.data;
console.log(data);
}
doPostRequest();
为了以适当的格式生成表单数据，我们使用 FormData 对象。
来源
在本文中，我们在 JavaScript 中创建了 HTTP GET/POST 请求。