Dart HttpRequest
最后修改于 2025 年 4 月 4 日
Dart 中的 HttpRequest 类提供了向 Web 服务器发出 HTTP 请求的功能。它是 Dart 网页平台库的一部分。
HttpRequest 支持各种 HTTP 方法，包括 GET、POST、PUT 和 DELETE。它处理同步和异步请求以及响应处理。
基本定义
HttpRequest 是一个客户端 API，用于从 Dart Web 应用发出 HTTP 请求。它在 dart:html 库中可用。
主要功能包括请求配置、标头管理、响应处理和错误管理。它仅在浏览器环境中运行。
基本的 GET 请求
此示例演示如何发出简单的 GET 请求来获取数据。
import 'dart:html';
void main() async {
try {
var response = await HttpRequest.getString('https://jsonplaceholder.typicode.com/posts/1');
print('Response: $response');
} catch (e) {
print('Error: $e');
}
}
我们使用 HttpRequest.getString() 来进行简单的 GET 请求。该方法返回一个 Future，其中响应体为字符串。错误处理会捕获网络问题。
$ dart main.dart
Response: {
"userId": 1,
"id": 1,
"title": "...",
"body": "..."
}
带 JSON 的 POST 请求
此示例演示如何发送带 JSON 数据的 POST 请求。
import 'dart:html';
import 'dart:convert';
void main() async {
var url = 'https://jsonplaceholder.typicode.com/posts';
var data = {
'title': 'foo',
'body': 'bar',
'userId': 1
};
try {
var request = await HttpRequest.request(
url,
method: 'POST',
sendData: jsonEncode(data),
requestHeaders: {
'Content-type': 'application/json; charset=UTF-8'
}
);
print('Status: ${request.status}');
print('Response: ${request.responseText}');
} catch (e) {
print('Error: $e');
}
}
我们创建一个带 JSON 数据的 POST 请求。requestHeaders 指定了内容类型。HttpRequest.request() 提供了对请求配置的完全控制。
$ dart main.dart
Status: 201
Response: {
"title": "foo",
"body": "bar",
"userId": 1,
"id": 101
}
处理响应标头
此示例演示如何访问和处理响应标头。
import 'dart:html';
void main() async {
try {
var request = await HttpRequest.request(
'https://jsonplaceholder.typicode.com/posts/1'
);
print('Status: ${request.status}');
print('Content-Type: ${request.getResponseHeader('content-type')}');
var headers = request.responseHeaders;
print('All headers:');
headers.forEach((key, value) => print('$key: $value'));
} catch (e) {
print('Error: $e');
}
}
在成功请求后，我们检查响应标头。getResponseHeader() 访问特定标头，而 responseHeaders 提供所有标头。
$ dart main.dart Status: 200 Content-Type: application/json; charset=utf-8 All headers: cache-control: public, max-age=14400 content-type: application/json; charset=utf-8 ...
错误处理
此示例演示了对 HTTP 请求的全面错误处理。
import 'dart:html';
void main() async {
try {
var request = await HttpRequest.request(
'https://jsonplaceholder.typicode.com/nonexistent',
method: 'GET'
);
if (request.status >= 200 && request.status < 300) {
print('Success: ${request.responseText}');
} else {
print('HTTP Error: ${request.status}');
print('Status text: ${request.statusText}');
}
} catch (e) {
if (e is ErrorEvent) {
print('Network error: ${e.message}');
} else {
print('Unexpected error: $e');
}
}
}
我们处理 HTTP 状态错误和网络错误。该示例检查状态码，并为不同的失败场景提供不同的错误消息。
$ dart main.dart HTTP Error: 404 Status text: Not Found
带进度的文件上传
此示例演示带进度跟踪的文件上传。
import 'dart:html';
void main() {
var fileInput = FileUploadInputElement();
fileInput.onChange.listen((e) {
var file = fileInput.files!.first;
var formData = FormData();
formData.appendBlob('file', file, file.name);
var request = HttpRequest();
request.open('POST', 'https://example.com/upload');
request.upload.onProgress.listen((ProgressEvent e) {
if (e.lengthComputable) {
var percent = (e.loaded / e.total * 100).round();
print('Upload progress: $percent%');
}
});
request.onLoad.listen((e) {
if (request.status == 200) {
print('Upload complete');
}
});
request.send(formData);
});
document.body!.append(fileInput);
}
我们创建一个带进度跟踪的文件上传。upload.onProgress 事件在上传期间提供更新。此示例在浏览器环境中运行。
$ dart main.dart Upload progress: 25% Upload progress: 50% Upload progress: 75% Upload progress: 100% Upload complete
最佳实践
- CORS： 正确处理跨域资源共享
- 超时： 实现请求超时以提高可靠性
- 标头： 设置适当的请求标头
- 错误： 同时处理网络和 HTTP 错误
- 安全： 在处理所有响应之前进行验证
来源
本教程涵盖了 Dart 的 HttpRequest 类，通过实际示例展示了各种 HTTP 操作、错误处理和上传等高级功能。
作者
列出 所有 Dart 教程。