如何在JavaScript中执行HTTP请求?
HTTP协议是Web上数据通信的基础。它是一种请求-响应协议,意味着客户端发送请求到服务器,服务器返回响应给客户端。
最常见的HTTP方法是GET
、POST
、PUT
和DELETE
。通过JavaScript发送请求非常常见,可以使用更现代的fetch
API或较旧的XMLHttpRequest
Web API来实现。
使用Fetch API
Fetch API是XMLHttpRequest
的现代替代品。它是一个基于Promise的API,允许您像XMLHttpRequest
一样进行网络请求,但具有更简单和更强大的接口。
HTTP GET请求
最简单的用例是向给定的URL发出GET
请求。由于fetch()
API返回一个Promise,您可以使用then
方法处理响应。在下面的示例中,响应使用json()
方法转换为JSON,然后记录到控制台。
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data));
/* 输出: {
'userId': 1,
'id': 1,
'title': 'sunt aut facere repellat provident occaecati…',
'body': '…'
} */
HTTP POST请求
要进行POST
请求,您需要将请求选项的对象作为fetch()
的第二个参数传递。method
选项设置为'POST'
,body
选项设置为要发送的数据。
body
选项中的数据类型可能会有所不同,并且应根据Content-type
头进行编码。在下面的示例中,数据被编码为JSON,使用JSON.stringify
,并且Content-type
头设置为'application/json; charset=UTF-8'
。
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
}),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
})
.then(response => response.json())
.then(data => console.log(data));
/* 输出: {
'title': 'foo',
'body': 'bar',
'userId': 1,
'id': 101
} */
HTTP PUT请求
与POST
请求类似,您可以通过在请求选项对象中将method
选项设置为'PUT'
来进行PUT
请求。其余的请求选项与POST
请求相同。
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
body: JSON.stringify({
id: 1,
title: 'foo',
body: 'bar',
userId: 1
}),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
})
.then(response => response.json())
.then(data => console.log(data));
/* 输出: {
'id': 1,
'title': 'foo',
'body': 'bar',
'userId': 1
} */
HTTP DELETE请求
要进行DELETE
请求,您需要在请求选项对象中将method
选项设置为'DELETE'
。DELETE
请求没有请求体,因此在下面的示例中省略了body
选项。
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
}),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
})
.then(response => response.json())
.then(data => console.log(data));
/* Logs: {
'title': 'foo',
'body': 'bar',
'userId': 1,
'id': 101
} */
使用XMLHttpRequest
XMLHttpRequest
是JavaScript中进行HTTP请求的旧方法。它不如fetch
API强大,但仍然被广泛使用,并且在所有现代浏览器中都得到支持。
XMLHttpRequest
使用事件监听器来处理响应和错误,而不是使用Promise。onload
事件用于处理响应,onerror
事件用于处理错误。
发送HTTP GET请求
以下示例使用XMLHttpRequest
web API向给定的URL发送GET
请求。当请求成功时,调用给定的callback
函数并传递responseText
,当发生错误时调用err
函数。
const httpGet = (url, callback, err = console.error) => {
const request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = () => callback(request.responseText);
request.onerror = () => err(request);
request.send();
};
httpGet(
'https://jsonplaceholder.typicode.com/posts/1',
console.log
);
/* Logs: {
'userId': 1,
'id': 1,
'title': 'sunt aut facere repellat provident occaecati…',
'body': '…'
} */
发送HTTP POST请求
以下示例使用XMLHttpRequest
Web API向给定的URL发出POST
请求。data
参数是要发送的数据,callback
函数在请求成功时被调用,并传入responseText
。为了设置Content-type
头部,你需要使用setRequestHeader
方法。
const httpPost = (url, data, callback, err = console.error) => {
const request = new XMLHttpRequest();
request.open('POST', url, true);
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.onload = () => callback(request.responseText);
request.onerror = () => err(request);
request.send(data);
};
httpPost(
'https://jsonplaceholder.typicode.com/posts',
JSON.stringify({
userId: 1,
id: 1337,
title: 'Foo',
body: 'bar bar bar'
}),
console.log
);
/* 输出: {
'title': 'foo',
'body': 'bar',
'userId': 1,
'id': 101
} */
HTTP PUT请求
以下示例使用XMLHttpRequest
Web API向给定的URL发出PUT
请求。data
参数是要发送的数据,callback
函数在请求成功时被调用,并传入responseText
。
const httpPut = (url, data, callback, err = console.error) => {
const request = new XMLHttpRequest();
request.open('PUT', url, true);
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.onload = () => callback(request);
request.onerror = () => err(request);
request.send(data);
};
httpPut(
'https://jsonplaceholder.typicode.com/posts/1',
JSON.stringify({
id: 1,
title: 'foo',
body: 'bar',
userId: 1
}),
request => console.log(request.responseText)
);
/* 输出: {
'id': 1,
'title': 'foo',
'body': 'bar',
'userId': 1
} */
HTTP DELETE请求
以下示例使用XMLHttpRequest
Web API向给定的URL发出DELETE
请求。callback
函数在请求成功时被调用,并传入responseText
。
const httpDelete = (url, callback, err = console.error) => {
const request = new XMLHttpRequest();
request.open('DELETE', url, true);
request.onload = () => callback(request);
request.onerror = () => err(request);
request.send();
};
httpDelete('https://jsonplaceholder.typicode.com/posts/1', request => {
console.log(request.responseText);
});
/* 输出: {} */