RESTful API\u8bbe\u8ba1\u4e2d，HTTP\u72b6\u6001\u7801\u4e0d\u4ec5\u662f\u6280\u672f\u5b9e\u73b0\u7ec6\u8282，\u66f4\u662fAPI\u5951\u7ea6\u7684\u91cd\u8981\u7ec4\u6210\u90e8\u5206\u3002\u5b83\u4eec\u6784\u6210\u4e86\u5ba2\u6237\u7aef\u4e0e\u670d\u52a1\u5668\u4e4b\u95f4\u901a\u4fe1\u7684\u8bed\u4e49\u6846\u67b6，\u4f7f\u5f97API\u80fd\u591f\u81ea\u6211\u63cf\u8ff0\u5176\u5904\u7406\u7ed3\u679c\u3002<\/p>\n
Richardson\u6210\u719f\u5ea6\u6a21\u578b\u5c06RESTful\u670d\u52a1\u5206\u4e3a\u56db\u4e2a\u7b49\u7ea7：<\/p>\n
Level 0：POX\u6cbc\u6cfd<\/p>\n
\u4f7f\u7528\u5355\u4e00\u7aef\u70b9（\u5982\/api）<\/p>\n<\/li>\n
\u5355\u4e00HTTP\u65b9\u6cd5（\u901a\u5e38POST）<\/p>\n<\/li>\n
\u72b6\u6001\u4fe1\u606f\u5728\u54cd\u5e94\u4f53\u4e2d\u4f20\u9012<\/p>\n<\/li>\n
\u72b6\u6001\u7801\u57fa\u672c\u53ea\u6709200\u548c500<\/p>\n<\/li>\n<\/ul>\n
http<\/p>\n
POST \/api HTTP\/1.1
\nContent-Type: application\/json<\/p>\n
{
\n "operation": "createUser",
\n "data": {"name": "John", "email": "john@example.com"}
\n}<\/p>\n
HTTP\/1.1 200 OK
\nContent-Type: application\/json<\/p>\n
{
\n "status": "error",
\n "code": "USER_EXISTS",
\n "message": "User already exists"
\n}<\/p>\n
Level 1：\u8d44\u6e90\u5206\u79bb<\/p>\n
\u591a\u4e2a\u7aef\u70b9\u5bf9\u5e94\u4e0d\u540c\u8d44\u6e90<\/p>\n<\/li>\n
\u4ecd\u4e3b\u8981\u4f7f\u7528\u5355\u4e00HTTP\u65b9\u6cd5<\/p>\n<\/li>\n
\u72b6\u6001\u7801\u5f00\u59cb\u6709\u66f4\u591a\u5e94\u7528<\/p>\n<\/li>\n<\/ul>\n
Level 2：HTTP\u52a8\u8bcd<\/p>\n
\u6b63\u786e\u4f7f\u7528HTTP\u65b9\u6cd5（GET\u3001POST\u3001PUT\u3001DELETE\u7b49）<\/p>\n<\/li>\n
\u72b6\u6001\u7801\u88ab\u5145\u5206\u5229\u7528<\/p>\n<\/li>\n
\u8fd9\u662f\u5927\u591a\u6570"RESTful"API\u6240\u5728\u7684\u5c42\u7ea7<\/p>\n<\/li>\n<\/ul>\n
Level 3：\u8d85\u5a92\u4f53\u63a7\u5236（HATEOAS）<\/p>\n
\u54cd\u5e94\u4e2d\u5305\u542b\u76f8\u5173\u64cd\u4f5c\u7684\u94fe\u63a5<\/p>\n<\/li>\n
\u72b6\u6001\u7801\u5f15\u5bfc\u5ba2\u6237\u7aef\u72b6\u6001\u8f6c\u79fb<\/p>\n<\/li>\n
\u771f\u6b63\u7684RESTful\u5b9e\u73b0<\/p>\n<\/li>\n<\/ul>\n
http<\/p>\n
GET \/orders\/123 HTTP\/1.1
\nAccept: application\/json<\/p>\n
HTTP\/1.1 200 OK
\nContent-Type: application\/json<\/p>\n
{
\n "id": "123",
\n "status": "processing",
\n "total": 99.99,
\n "_links": {
\n "self": { "href": "\/orders\/123" },
\n "cancel": {
\n "href": "\/orders\/123\/cancel",
\n "method": "POST"
\n },
\n "payment": {
\n "href": "\/orders\/123\/payment",
\n "method": "POST"
\n }
\n }
\n}<\/p>\n
200 OK – \u901a\u7528\u6210\u529f<\/p>\n
http<\/p>\n
GET \/users\/123 HTTP\/1.1<\/p>\n
HTTP\/1.1 200 OK
\nContent-Type: application\/json<\/p>\n
{
\n "id": "123",
\n "name": "John Doe",
\n "email": "john@example.com"
\n}<\/p>\n
\u9002\u7528\u573a\u666f：<\/p>\n
GET：\u8d44\u6e90\u83b7\u53d6\u6210\u529f<\/p>\n<\/li>\n
PUT\/PATCH：\u8d44\u6e90\u66f4\u65b0\u6210\u529f<\/p>\n<\/li>\n
POST：\u975e\u521b\u5efa\u64cd\u4f5c\u6210\u529f（\u5982\u8ba1\u7b97\u3001\u9a8c\u8bc1）<\/p>\n<\/li>\n<\/ul>\n
201 Created – \u8d44\u6e90\u521b\u5efa\u6210\u529f<\/p>\n
http<\/p>\n
POST \/users HTTP\/1.1
\nContent-Type: application\/json<\/p>\n
{
\n "name": "Jane Smith",
\n "email": "jane@example.com"
\n}<\/p>\n
HTTP\/1.1 201 Created
\nLocation: \/users\/456
\nContent-Type: application\/json<\/p>\n
{
\n "id": "456",
\n "name": "Jane Smith",
\n "email": "jane@example.com",
\n "created_at": "2024-01-15T10:30:00Z"
\n}<\/p>\n
\u6700\u4f73\u5b9e\u8df5：<\/p>\n
\u5fc5\u987b\u5305\u542bLocation\u5934\u6307\u5411\u65b0\u8d44\u6e90<\/p>\n<\/li>\n
\u54cd\u5e94\u4f53\u5e94\u5305\u542b\u521b\u5efa\u7684\u8d44\u6e90\u8868\u793a<\/p>\n<\/li>\n
\u9002\u7528\u4e8e\u540c\u6b65\u521b\u5efa\u64cd\u4f5c<\/p>\n<\/li>\n
202 Accepted – \u8bf7\u6c42\u5df2\u63a5\u53d7<\/p>\n
http<\/p>\n
POST \/video-transcoding HTTP\/1.1
\nContent-Type: application\/json<\/p>\n
{
\n "video_id": "789",
\n "format": "mp4"
\n}<\/p>\n
HTTP\/1.1 202 Accepted
\nLocation: \/jobs\/transcode-abc123
\nRetry-After: 30
\nContent-Type: application\/json<\/p>\n
{
\n "job_id": "transcode-abc123",
\n "status": "pending",
\n "estimated_completion": "2024-01-15T10:35:00Z",
\n "_links": {
\n "self": { "href": "\/jobs\/transcode-abc123" },
\n "status": { "href": "\/jobs\/transcode-abc123\/status" }
\n }
\n}<\/p>\n
\u9002\u7528\u573a\u666f：<\/p>\n
\u5f02\u6b65\u5904\u7406<\/p>\n<\/li>\n
\u957f\u65f6\u95f4\u8fd0\u884c\u7684\u64cd\u4f5c<\/p>\n<\/li>\n
\u9700\u8981\u8f6e\u8be2\u7ed3\u679c\u7684\u60c5\u51b5<\/p>\n<\/li>\n<\/ul>\n
204 No Content – \u65e0\u5185\u5bb9<\/p>\n
http<\/p>\n
DELETE \/users\/123 HTTP\/1.1<\/p>\n
HTTP\/1.1 204 No Content<\/p>\n
\u9002\u7528\u573a\u666f：<\/p>\n
DELETE\u64cd\u4f5c\u6210\u529f<\/p>\n<\/li>\n
PUT\/PATCH\u66f4\u65b0\u4f46\u65e0\u9700\u8fd4\u56de\u8d44\u6e90<\/p>\n<\/li>\n
\u67d0\u4e9bPOST\u64cd\u4f5c（\u5982\u70b9\u8d5e\u3001\u5173\u6ce8）<\/p>\n<\/li>\n<\/ul>\n
301 Moved Permanently \u548c 308 Permanent Redirect<\/p>\n
http<\/p>\n
GET \/old-api\/users HTTP\/1.1<\/p>\n
HTTP\/1.1 301 Moved Permanently
\nLocation: \/api\/v2\/users<\/p>\n
307 Temporary Redirect \u548c 302 Found<\/p>\n
http<\/p>\n
POST \/api\/maintenance HTTP\/1.1
\nContent-Type: application\/json<\/p>\n
{
\n "action": "backup"
\n}<\/p>\n
HTTP\/1.1 307 Temporary Redirect
\nLocation: \/api\/backup-endpoint<\/p>\n
303 See Other – POST\u540e\u7684\u91cd\u5b9a\u5411<\/p>\n
http<\/p>\n
POST \/checkout HTTP\/1.1
\nContent-Type: application\/json<\/p>\n
{
\n "cart_id": "cart123"
\n}<\/p>\n
HTTP\/1.1 303 See Other
\nLocation: \/order\/456\/confirmation<\/p>\n
400 Bad Request – \u901a\u7528\u5ba2\u6237\u7aef\u9519\u8bef<\/p>\n
http<\/p>\n
POST \/users HTTP\/1.1
\nContent-Type: application\/json<\/p>\n
{
\n "name": "John",
\n "email": "invalid-email"
\n}<\/p>\n
HTTP\/1.1 400 Bad Request
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": "VALIDATION_ERROR",
\n "message": "Request validation failed",
\n "details": [
\n {
\n "field": "email",
\n "message": "Must be a valid email address"
\n }
\n ]
\n }
\n}<\/p>\n
401 Unauthorized – \u8ba4\u8bc1\u5931\u8d25<\/p>\n
http<\/p>\n
GET \/secure-data HTTP\/1.1
\nAuthorization: Bearer expired-token<\/p>\n
HTTP\/1.1 401 Unauthorized
\nWWW-Authenticate: Bearer realm="api", error="invalid_token"
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": "INVALID_TOKEN",
\n "message": "The access token is expired or invalid"
\n }
\n}<\/p>\n
403 Forbidden – \u6743\u9650\u4e0d\u8db3<\/p>\n
http<\/p>\n
GET \/admin\/users HTTP\/1.1
\nAuthorization: Bearer user-token<\/p>\n
HTTP\/1.1 403 Forbidden
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": "INSUFFICIENT_PERMISSIONS",
\n "message": "You don't have permission to access this resource"
\n }
\n}<\/p>\n
404 Not Found – \u8d44\u6e90\u4e0d\u5b58\u5728<\/p>\n
http<\/p>\n
GET \/users\/99999 HTTP\/1.1<\/p>\n
HTTP\/1.1 404 Not Found
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": "RESOURCE_NOT_FOUND",
\n "message": "User with id 99999 not found",
\n "resource": "user",
\n "resource_id": "99999"
\n }
\n}<\/p>\n
405 Method Not Allowed<\/p>\n
http<\/p>\n
PUT \/users HTTP\/1.1<\/p>\n
HTTP\/1.1 405 Method Not Allowed
\nAllow: GET, POST, HEAD, OPTIONS
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": "METHOD_NOT_ALLOWED",
\n "message": "PUT method is not allowed for this resource"
\n }
\n}<\/p>\n
409 Conflict – \u8d44\u6e90\u51b2\u7a81<\/p>\n
http<\/p>\n
PUT \/users\/123 HTTP\/1.1
\nContent-Type: application\/json
\nIf-Match: "abc123"<\/p>\n
{
\n "name": "Updated Name",
\n "version": 2
\n}<\/p>\n
HTTP\/1.1 409 Conflict
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": "VERSION_CONFLICT",
\n "message": "Resource has been modified by another request",
\n "current_version": "def456",
\n "suggested_action": "Retrieve the latest version and retry"
\n }
\n}<\/p>\n
422 Unprocessable Entity – \u8bed\u4e49\u9519\u8bef<\/p>\n
http<\/p>\n
POST \/orders HTTP\/1.1
\nContent-Type: application\/json<\/p>\n
{
\n "items": [],
\n "shipping_address": {
\n "street": "123 Main St"
\n \/\/ missing city and country
\n }
\n}<\/p>\n
HTTP\/1.1 422 Unprocessable Entity
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": "UNPROCESSABLE_ENTITY",
\n "message": "The request was well-formed but contains semantic errors",
\n "details": [
\n {
\n "field": "shipping_address.city",
\n "message": "City is required"
\n },
\n {
\n "field": "shipping_address.country",
\n "message": "Country is required"
\n },
\n {
\n "field": "items",
\n "message": "Order must contain at least one item"
\n }
\n ]
\n }
\n}<\/p>\n
500 Internal Server Error – \u901a\u7528\u670d\u52a1\u5668\u9519\u8bef<\/p>\n
http<\/p>\n
GET \/users HTTP\/1.1<\/p>\n
HTTP\/1.1 500 Internal Server Error
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": "INTERNAL_SERVER_ERROR",
\n "message": "An unexpected error occurred",
\n "reference": "ERR-20240115-001",
\n "support_contact": "support@api.example.com"
\n }
\n}<\/p>\n
502 Bad Gateway, 503 Service Unavailable, 504 Gateway Timeout<\/p>\n
http<\/p>\n
GET \/api\/third-party-data HTTP\/1.1<\/p>\n
HTTP\/1.1 503 Service Unavailable
\nRetry-After: 300
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": "SERVICE_UNAVAILABLE",
\n "message": "Service is temporarily unavailable for maintenance",
\n "estimated_recovery": "2024-01-15T12:00:00Z",
\n "status_page": "https:\/\/status.example.com"
\n }
\n}<\/p>\n
ETag\u4e0eIf-None-Match<\/p>\n
http<\/p>\n
GET \/articles\/123 HTTP\/1.1
\nIf-None-Match: "abc123"<\/p>\n
# \u5982\u679cETag\u5339\u914d
\nHTTP\/1.1 304 Not Modified
\nETag: "abc123"<\/p>\n
# \u5982\u679cETag\u4e0d\u5339\u914d
\nHTTP\/1.1 200 OK
\nETag: "def456"
\nContent-Type: application\/json<\/p>\n
{
\n "id": "123",
\n "title": "Updated Article",
\n "content": "…",
\n "updated_at": "2024-01-15T10:00:00Z"
\n}<\/p>\n
Last-Modified\u4e0eIf-Modified-Since<\/p>\n
http<\/p>\n
GET \/articles HTTP\/1.1
\nIf-Modified-Since: Mon, 15 Jan 2024 09:00:00 GMT<\/p>\n
# \u5982\u679c\u6ca1\u6709\u4fee\u6539
\nHTTP\/1.1 304 Not Modified
\nLast-Modified: Mon, 15 Jan 2024 08:00:00 GMT<\/p>\n
# \u5982\u679c\u6709\u4fee\u6539
\nHTTP\/1.1 200 OK
\nLast-Modified: Mon, 15 Jan 2024 10:00:00 GMT
\nContent-Type: application\/json<\/p>\n
[
\n {
\n "id": "123",
\n "title": "New Article",
\n "created_at": "2024-01-15T09:30:00Z"
\n }
\n]<\/p>\n
http<\/p>\n
GET \/large-file.pdf HTTP\/1.1
\nRange: bytes=0-999<\/p>\n
HTTP\/1.1 206 Partial Content
\nContent-Range: bytes 0-999\/5000
\nContent-Length: 1000
\nContent-Type: application\/pdf<\/p>\n
<binary data><\/p>\n
http<\/p>\n
PROPPATCH \/webdav\/resources HTTP\/1.1
\nContent-Type: application\/xml<\/p>\n
<?xml version="1.0" encoding="utf-8" ?>
\n<D:propertyupdate xmlns:D="DAV:">
\n <D:set>
\n <D:prop>
\n <D:displayname>New Name<\/D:displayname>
\n <\/D:prop>
\n <\/D:set>
\n<\/D:propertyupdate><\/p>\n
HTTP\/1.1 207 Multi-Status
\nContent-Type: application\/xml<\/p>\n
<?xml version="1.0" encoding="utf-8" ?>
\n<D:multistatus xmlns:D="DAV:">
\n <D:response>
\n <D:href>\/webdav\/resource1<\/D:href>
\n <D:status>HTTP\/1.1 200 OK<\/D:status>
\n <\/D:response>
\n <D:response>
\n <D:href>\/webdav\/resource2<\/D:href>
\n <D:status>HTTP\/1.1 403 Forbidden<\/D:status>
\n <D:responsedescription>Permission denied<\/D:responsedescription>
\n <\/D:response>
\n<\/D:multistatus><\/p>\n
http<\/p>\n
GET \/api\/v1\/users HTTP\/1.1<\/p>\n
HTTP\/1.1 410 Gone
\nContent-Type: application\/json
\nLink: <\/api\/v2\/users>; rel="latest-version"<\/p>\n
{
\n "error": {
\n "code": "API_VERSION_DEPRECATED",
\n "message": "API v1 has been deprecated since 2024-01-01",
\n "deprecation_date": "2024-01-01T00:00:00Z",
\n "sunset_date": "2024-07-01T00:00:00Z",
\n "migration_guide": "https:\/\/docs.example.com\/migration\/v1-to-v2"
\n }
\n}<\/p>\n
http<\/p>\n
GET \/api\/v1\/products HTTP\/1.1<\/p>\n
HTTP\/1.1 308 Permanent Redirect
\nLocation: \/api\/v2\/products
\nContent-Type: application\/json<\/p>\n
{
\n "message": "API endpoint has been permanently moved",
\n "deprecation_notice": "v1 will be sunset on 2024-06-30"
\n}<\/p>\n
http<\/p>\n
POST \/transfer HTTP\/1.1
\nContent-Type: application\/json<\/p>\n
{
\n "from_account": "acc123",
\n "to_account": "acc456",
\n "amount": 1000
\n}<\/p>\n
HTTP\/1.1 422 Unprocessable Entity
\nContent-Type: application\/problem+json<\/p>\n
{
\n "type": "https:\/\/api.example.com\/errors\/insufficient-funds",
\n "title": "Insufficient Funds",
\n "status": 422,
\n "detail": "Account acc123 has only 500.00 available, but 1000.00 was requested",
\n "instance": "\/transfer\/attempt\/abc-123-def-456",
\n "balance": 500.00,
\n "accounts": ["acc123", "acc456"],
\n "extensions": {
\n "code": "INSUFFICIENT_FUNDS",
\n "request_id": "req-123456",
\n "timestamp": "2024-01-15T10:30:00Z"
\n }
\n}<\/p>\n
http<\/p>\n
GET \/v1\/users\/invalid-id HTTP\/1.1<\/p>\n
HTTP\/1.1 404 Not Found
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": 404,
\n "message": "User not found: invalid-id",
\n "status": "NOT_FOUND",
\n "details": [
\n {
\n "@type": "type.googleapis.com\/google.rpc.ErrorInfo",
\n "reason": "USER_NOT_FOUND",
\n "domain": "users.googleapis.com",
\n "metadata": {
\n "resource": "users\/invalid-id",
\n "service": "user-service"
\n }
\n },
\n {
\n "@type": "type.googleapis.com\/google.rpc.LocalizedMessage",
\n "locale": "en-US",
\n "message": "The requested user does not exist."
\n }
\n ]
\n }
\n}<\/p>\n
prometheus<\/p>\n
# Prometheus\u6307\u6807\u793a\u4f8b
\nhttp_requests_total{method="POST", endpoint="\/users", status="201"} 153
\nhttp_requests_total{method="POST", endpoint="\/users", status="400"} 12
\nhttp_requests_total{method="GET", endpoint="\/users\/{id}", status="404"} 8
\nhttp_requests_total{method="GET", endpoint="\/users", status="500"} 3<\/p>\n
# \u9519\u8bef\u7387\u8ba1\u7b97
\nrate(http_requests_total{status=~"4..|5.."}[5m]) \/ rate(http_requests_total[5m])<\/p>\n
json<\/p>\n
{
\n "timestamp": "2024-01-15T10:30:15.123Z",
\n "level": "INFO",
\n "message": "HTTP request processed",
\n "http": {
\n "method": "POST",
\n "path": "\/users",
\n "status_code": 201,
\n "duration_ms": 45
\n },
\n "user": {
\n "id": "user-123",
\n "role": "admin"
\n },
\n "request_id": "req-abc-123",
\n "correlation_id": "corr-xyz-789",
\n "tags": ["api", "user-service"]
\n}<\/p>\n
\u4e0d\u5f53\u793a\u4f8b（\u6cc4\u9732\u5185\u90e8\u4fe1\u606f）：<\/p>\n
http<\/p>\n
HTTP\/1.1 500 Internal Server Error
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "message": "Database connection failed: Connection refused to 10.0.0.5:5432",
\n "stack_trace": "java.sql.SQLException: Connection refused…",
\n "internal_code": "DB_CONN_REFUSED",
\n "database_ip": "10.0.0.5"
\n }
\n}<\/p>\n
\u6b63\u786e\u793a\u4f8b：<\/p>\n
http<\/p>\n
HTTP\/1.1 500 Internal Server Error
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": "INTERNAL_ERROR",
\n "message": "An internal server error occurred",
\n "reference": "ERR-20240115-001",
\n "support_contact": "support@example.com"
\n }
\n}<\/p>\n
http<\/p>\n
HTTP\/1.1 400 Bad Request
\nContent-Type: application\/json
\nStrict-Transport-Security: max-age=31536000; includeSubDomains
\nX-Content-Type-Options: nosniff
\nX-Frame-Options: DENY
\nContent-Security-Policy: default-src 'self'<\/p>\n
{
\n "error": {
\n "code": "VALIDATION_ERROR",
\n "message": "Invalid input provided"
\n }
\n}<\/p>\n
http<\/p>\n
# \u521b\u5efa\u4ed3\u5e93
\nPOST \/user\/repos HTTP\/1.1
\nAuthorization: token ghp_abc123
\nContent-Type: application\/json<\/p>\n
{
\n "name": "new-repo",
\n "description": "A new repository"
\n}<\/p>\n
# \u6210\u529f\u54cd\u5e94
\nHTTP\/1.1 201 Created
\nLocation: https:\/\/api.github.com\/repos\/octocat\/new-repo
\nContent-Type: application\/json<\/p>\n
{
\n "id": 1296269,
\n "name": "new-repo",
\n "full_name": "octocat\/new-repo",
\n "private": false,
\n "html_url": "https:\/\/github.com\/octocat\/new-repo",
\n "created_at": "2011-01-26T19:01:12Z"
\n}<\/p>\n
# \u51b2\u7a81\u54cd\u5e94（\u4ed3\u5e93\u5df2\u5b58\u5728）
\nHTTP\/1.1 422 Unprocessable Entity
\nContent-Type: application\/json<\/p>\n
{
\n "message": "Repository creation failed.",
\n "errors": [
\n {
\n "resource": "Repository",
\n "code": "custom",
\n "field": "name",
\n "message": "name already exists on this account"
\n }
\n ],
\n "documentation_url": "https:\/\/docs.github.com\/rest\/repos\/repos#create-a-repository-for-the-authenticated-user"
\n}<\/p>\n
http<\/p>\n
# \u521b\u5efa\u652f\u4ed8\u610f\u56fe
\nPOST \/v1\/payment_intents HTTP\/1.1
\nAuthorization: Bearer sk_test_abc123
\nContent-Type: application\/x-www-form-urlencoded<\/p>\n
amount=2000¤cy=usd&payment_method_types[]=card<\/p>\n
# \u6210\u529f\u54cd\u5e94
\nHTTP\/1.1 200 OK
\nContent-Type: application\/json<\/p>\n
{
\n "id": "pi_1JABC123",
\n "object": "payment_intent",
\n "amount": 2000,
\n "currency": "usd",
\n "status": "requires_payment_method",
\n "client_secret": "pi_1JABC123_secret_xyz789"
\n}<\/p>\n
# \u65e0\u6548\u53c2\u6570\u54cd\u5e94
\nHTTP\/1.1 400 Bad Request
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "type": "invalid_request_error",
\n "message": "Invalid integer: abc",
\n "param": "amount"
\n }
\n}<\/p>\n
\u4e00\u81f4\u6027\u662f\u5173\u952e：\u5728\u6574\u4e2aAPI\u4e2d\u4fdd\u6301\u72b6\u6001\u7801\u4f7f\u7528\u7684\u4e00\u81f4\u6027<\/p>\n<\/li>\n
\u6b63\u786e\u7684\u72b6\u6001\u7801：\u4e3a\u6bcf\u79cd\u60c5\u51b5\u9009\u62e9\u8bed\u4e49\u6700\u51c6\u786e\u7684\u72b6\u6001\u7801<\/p>\n<\/li>\n
\u4e30\u5bcc\u7684\u9519\u8bef\u4fe1\u606f：\u63d0\u4f9b\u53ef\u64cd\u4f5c\u7684\u9519\u8bef\u8be6\u60c5，\u4f46\u907f\u514d\u4fe1\u606f\u6cc4\u9732<\/p>\n<\/li>\n
\u9002\u5f53\u7684\u91cd\u8bd5\u6307\u5bfc：\u901a\u8fc7Retry-After\u5934\u6216\u9519\u8bef\u4fe1\u606f\u6307\u5bfc\u5ba2\u6237\u7aef\u91cd\u8bd5<\/p>\n<\/li>\n
\u76d1\u63a7\u4e0e\u544a\u8b66：\u57fa\u4e8e\u72b6\u6001\u7801\u5206\u5e03\u8bbe\u7f6e\u76d1\u63a7\u548c\u544a\u8b66<\/p>\n<\/li>\n
\u7248\u672c\u63a7\u5236：\u660e\u786e\u5904\u7406API\u7248\u672c\u53d8\u66f4\u548c\u5e9f\u5f03<\/p>\n<\/li>\n
\u5b89\u5168\u8003\u8651：\u5728\u9519\u8bef\u54cd\u5e94\u4e2d\u5b9e\u65bd\u9002\u5f53\u7684\u5b89\u5168\u63aa\u65bd<\/p>\n<\/li>\n
\u6587\u6863\u5316：\u5b8c\u6574\u8bb0\u5f55\u6bcf\u4e2a\u7aef\u70b9\u53ef\u80fd\u8fd4\u56de\u7684\u72b6\u6001\u7801\u53ca\u5176\u542b\u4e49<\/p>\n<\/li>\n
\u9519\u8bef\u793a\u4f8b：<\/p>\n
http<\/p>\n
POST \/login HTTP\/1.1
\nContent-Type: application\/json<\/p>\n
{
\n "username": "wrong",
\n "password": "wrong"
\n}<\/p>\n
HTTP\/1.1 200 OK
\nContent-Type: application\/json<\/p>\n
{
\n "success": false,
\n "error": "Invalid credentials"
\n}<\/p>\n
\u6b63\u786e\u505a\u6cd5：<\/p>\n
http<\/p>\n
HTTP\/1.1 401 Unauthorized
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": "INVALID_CREDENTIALS",
\n "message": "Username or password is incorrect"
\n }
\n}<\/p>\n
\u9519\u8bef\u793a\u4f8b：<\/p>\n
http<\/p>\n
GET \/users\/999 HTTP\/1.1<\/p>\n
HTTP\/1.1 500 Internal Server Error
\nContent-Type: application\/json<\/p>\n
{
\n "error": "User not found"
\n}<\/p>\n
\u6b63\u786e\u505a\u6cd5：<\/p>\n
http<\/p>\n
HTTP\/1.1 404 Not Found
\nContent-Type: application\/json<\/p>\n
{
\n "error": {
\n "code": "USER_NOT_FOUND",
\n "message": "User with id 999 does not exist"
\n }
\n}<\/p>\n
\u5728\u73b0\u4ee3\u5355\u9875\u5e94\u7528\u4e2d，\u72b6\u6001\u7801\u7684\u5904\u7406\u5448\u73b0\u53cc\u91cd\u6027：\u5ba2\u6237\u7aef\u8def\u7531\u548cAPI\u901a\u4fe1\u3002<\/p>\n
\u5ba2\u6237\u7aef\u8def\u7531\u72b6\u6001\u7801\u6a21\u62df<\/p>\n
javascript<\/p>\n
\/\/ React Router v6\u4e2d\u7684\u72b6\u6001\u7801\u5904\u7406
\nimport { useRouteError, isRouteErrorResponse } from 'react-router-dom';<\/p>\n
function ErrorBoundary() {
\n const error = useRouteError();<\/p>\n
if (isRouteErrorResponse(error)) {
\n return (
\n <div className="error-page">
\n <h1>{error.status} {error.statusText}<\/h1>
\n {error.status === 404 && (
\n <div>
\n <h2>\u9875\u9762\u672a\u627e\u5230<\/h2>
\n <p>\u60a8\u8bbf\u95ee\u7684\u9875\u9762\u4e0d\u5b58\u5728\u6216\u5df2\u88ab\u79fb\u52a8<\/p>
\n <Link to="\/">\u8fd4\u56de\u9996\u9875<\/Link>
\n <\/div>
\n )}
\n {error.status === 401 && (
\n <div>
\n <h2>\u9700\u8981\u767b\u5f55<\/h2>
\n <p>\u8bf7\u767b\u5f55\u540e\u8bbf\u95ee\u6b64\u9875\u9762<\/p>
\n <button onClick={() => navigate('\/login')}>\u524d\u5f80\u767b\u5f55<\/button>
\n <\/div>
\n )}
\n <\/div>
\n );
\n }<\/p>\n
return <div>\u53d1\u751f\u4e86\u672a\u77e5\u9519\u8bef<\/div>;
\n}<\/p>\n
API\u8bf7\u6c42\u72b6\u6001\u7801\u7edf\u4e00\u5904\u7406<\/p>\n
javascript<\/p>\n
\/\/ Axios\u62e6\u622a\u5668\u914d\u7f6e
\nconst apiClient = axios.create({
\n baseURL: process.env.REACT_APP_API_URL,
\n timeout: 10000,
\n});<\/p>\n
\/\/ \u8bf7\u6c42\u62e6\u622a\u5668
\napiClient.interceptors.request.use(
\n config => {
\n const token = localStorage.getItem('access_token');
\n if (token) {
\n config.headers.Authorization = `Bearer ${token}`;
\n }
\n return config;
\n },
\n error => Promise.reject(error)
\n);<\/p>\n
\/\/ \u54cd\u5e94\u62e6\u622a\u5668
\napiClient.interceptors.response.use(
\n response => response,
\n error => {
\n if (!error.response) {
\n \/\/ \u7f51\u7edc\u9519\u8bef
\n return Promise.reject({
\n code: 'NETWORK_ERROR',
\n message: '\u7f51\u7edc\u8fde\u63a5\u5931\u8d25，\u8bf7\u68c0\u67e5\u7f51\u7edc\u8bbe\u7f6e',
\n originalError: error
\n });
\n }<\/p>\n
const { status, data } = error.response;<\/p>\n
switch (status) {
\n case 400:
\n \/\/ \u7edf\u4e00\u5904\u7406\u9a8c\u8bc1\u9519\u8bef
\n return Promise.reject({
\n code: 'VALIDATION_ERROR',
\n message: data.error?.message || '\u8bf7\u6c42\u53c2\u6570\u65e0\u6548',
\n details: data.error?.details,
\n originalError: error
\n });<\/p>\n
case 401:
\n \/\/ Token\u8fc7\u671f\u5904\u7406
\n if (data.error?.code === 'TOKEN_EXPIRED') {
\n return handleTokenRefresh(error);
\n }
\n \/\/ \u5f3a\u5236\u767b\u51fa
\n localStorage.removeItem('access_token');
\n localStorage.removeItem('refresh_token');
\n window.location.href = '\/login?redirect=' + encodeURIComponent(window.location.pathname);
\n return Promise.reject({
\n code: 'UNAUTHORIZED',
\n message: '\u767b\u5f55\u5df2\u8fc7\u671f，\u8bf7\u91cd\u65b0\u767b\u5f55',
\n originalError: error
\n });<\/p>\n
case 403:
\n \/\/ \u6743\u9650\u4e0d\u8db3
\n return Promise.reject({
\n code: 'FORBIDDEN',
\n message: '\u60a8\u6ca1\u6709\u6743\u9650\u6267\u884c\u6b64\u64cd\u4f5c',
\n originalError: error
\n });<\/p>\n
case 404:
\n return Promise.reject({
\n code: 'NOT_FOUND',
\n message: data.error?.message || '\u8bf7\u6c42\u7684\u8d44\u6e90\u4e0d\u5b58\u5728',
\n originalError: error
\n });<\/p>\n
case 429:
\n \/\/ \u8bf7\u6c42\u9891\u7387\u9650\u5236
\n const retryAfter = error.response.headers['retry-after'];
\n return Promise.reject({
\n code: 'RATE_LIMITED',
\n message: '\u8bf7\u6c42\u8fc7\u4e8e\u9891\u7e41，\u8bf7\u7a0d\u540e\u91cd\u8bd5',
\n retryAfter,
\n originalError: error
\n });<\/p>\n
case 500:
\n case 502:
\n case 503:
\n case 504:
\n \/\/ \u670d\u52a1\u5668\u9519\u8bef
\n return Promise.reject({
\n code: 'SERVER_ERROR',
\n message: '\u670d\u52a1\u5668\u6682\u65f6\u4e0d\u53ef\u7528，\u8bf7\u7a0d\u540e\u91cd\u8bd5',
\n status,
\n originalError: error
\n });<\/p>\n
default:
\n return Promise.reject({
\n code: 'UNKNOWN_ERROR',
\n message: `\u672a\u77e5\u9519\u8bef (${status})`,
\n originalError: error
\n });
\n }
\n }
\n);<\/p>\n
Next.js\u4e2d\u7684\u72b6\u6001\u7801\u5904\u7406<\/p>\n
javascript<\/p>\n
\/\/ pages\/404.js – \u81ea\u5b9a\u4e49404\u9875\u9762
\nexport default function Custom404() {
\n return (
\n <div className="container">
\n <h1>404 – \u9875\u9762\u672a\u627e\u5230<\/h1>
\n <p>\u62b1\u6b49，\u60a8\u8bbf\u95ee\u7684\u9875\u9762\u4e0d\u5b58\u5728<\/p>
\n <Link href="\/">
\n <a>\u8fd4\u56de\u9996\u9875<\/a>
\n <\/Link>
\n <\/div>
\n );
\n}<\/p>\n
\/\/ \u9875\u9762\u7ea7\u522b\u7684\u9519\u8bef\u5904\u7406
\nexport async function getServerSideProps(context) {
\n try {
\n const { id } = context.params;
\n const res = await fetch(`https:\/\/api.example.com\/products\/${id}`);<\/p>\n
if (res.status === 404) {
\n return {
\n notFound: true, \/\/ \u89e6\u53d1404\u9875\u9762
\n };
\n }<\/p>\n
if (!res.ok) {
\n throw new Error(`Failed to fetch product: ${res.status}`);
\n }<\/p>\n
const product = await res.json();<\/p>\n
return {
\n props: { product },
\n };
\n } catch (error) {
\n \/\/ \u8bb0\u5f55\u9519\u8bef\u5230\u65e5\u5fd7\u7cfb\u7edf
\n console.error('Product page error:', error);<\/p>\n
\/\/ \u8fd4\u56de500\u9519\u8bef\u9875\u9762
\n return {
\n props: {
\n error: {
\n message: '\u52a0\u8f7d\u4ea7\u54c1\u4fe1\u606f\u5931\u8d25',
\n statusCode: 500
\n }
\n }
\n };
\n }
\n}<\/p>\n
\/\/ \u81ea\u5b9a\u4e49\u9519\u8bef\u9875\u9762
\nfunction ProductPage({ product, error }) {
\n if (error) {
\n return (
\n <ErrorPage
\n statusCode={error.statusCode}
\n message={error.message}
\n \/>
\n );
\n }<\/p>\n
return (
\n <div>
\n <h1>{product.name}<\/h1>
\n {\/* \u4ea7\u54c1\u8be6\u60c5 *\/}
\n <\/div>
\n );
\n}<\/p>\n
html<\/p>\n
<!– 404\u9519\u8bef\u9875\u9762\u793a\u4f8b –>
\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n <meta charset="UTF-8">
\n <meta name="viewport" content="width=device-width, initial-scale=1.0">
\n <title>404 – \u9875\u9762\u672a\u627e\u5230<\/title>
\n <style>
\n .error-container {
\n max-width: 600px;
\n margin: 100px auto;
\n padding: 40px;
\n text-align: center;
\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
\n }<\/p>\n
.error-code {
\n font-size: 120px;
\n font-weight: 300;
\n color: #e0e0e0;
\n margin: 0;
\n }<\/p>\n
.error-message {
\n font-size: 24px;
\n margin: 20px 0;
\n color: #333;
\n }<\/p>\n
.error-description {
\n color: #666;
\n margin-bottom: 30px;
\n line-height: 1.6;
\n }<\/p>\n
.error-actions {
\n display: flex;
\n gap: 15px;
\n justify-content: center;
\n flex-wrap: wrap;
\n }<\/p>\n
.btn {
\n padding: 12px 24px;
\n border-radius: 6px;
\n text-decoration: none;
\n font-weight: 500;
\n transition: all 0.2s;
\n }<\/p>\n
.btn-primary {
\n background: #0070f3;
\n color: white;
\n }<\/p>\n
.btn-secondary {
\n background: #f5f5f5;
\n color: #333;
\n border: 1px solid #ddd;
\n }<\/p>\n
.btn:hover {
\n transform: translateY(-2px);
\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
\n }<\/p>\n
.search-form {
\n margin-top: 30px;
\n display: flex;
\n gap: 10px;
\n }<\/p>\n
.search-input {
\n flex: 1;
\n padding: 12px;
\n border: 1px solid #ddd;
\n border-radius: 6px;
\n font-size: 16px;
\n }<\/p>\n
@media (max-width: 600px) {
\n .error-container {
\n margin: 50px 20px;
\n padding: 20px;
\n }<\/p>\n
.error-code {
\n font-size: 80px;
\n }
\n }
\n <\/style>
\n<\/head>
\n<body>
\n <div class="error-container">
\n <h1 class="error-code">404<\/h1>
\n <h2 class="error-message">\u9875\u9762\u8d70\u4e22\u4e86<\/h2>
\n <p class="error-description">
\n \u62b1\u6b49，\u60a8\u8bbf\u95ee\u7684\u9875\u9762\u53ef\u80fd\u5df2\u88ab\u79fb\u9664\u3001\u91cd\u547d\u540d\u6216\u6682\u65f6\u4e0d\u53ef\u7528\u3002
\n \u8bf7\u68c0\u67e5\u7f51\u5740\u662f\u5426\u6b63\u786e，\u6216\u4f7f\u7528\u641c\u7d22\u529f\u80fd\u67e5\u627e\u76f8\u5173\u5185\u5bb9\u3002
\n <\/p><\/p>\n
<div class="error-actions">
\n <a href="\/" class="btn btn-primary">\u8fd4\u56de\u9996\u9875<\/a>
\n <a href="javascript:history.back()" class="btn btn-secondary">\u8fd4\u56de\u4e0a\u4e00\u9875<\/a>
\n <a href="\/contact" class="btn btn-secondary">\u8054\u7cfb\u652f\u6301<\/a>
\n <\/div><\/p>\n
<form class="search-form" action="\/search" method="GET">
\n <input
\n type="text"
\n class="search-input"
\n name="q"
\n placeholder="\u641c\u7d22\u60a8\u9700\u8981\u7684\u5185\u5bb9…"
\n autofocus
\n >
\n <button type="submit" class="btn btn-primary">\u641c\u7d22<\/button>
\n <\/form><\/p>\n
<!– \u70ed\u95e8\u94fe\u63a5\u63a8\u8350 –>
\n <div style="margin-top: 40px; text-align: left;">
\n <h3 style="margin-bottom: 15px;">\u70ed\u95e8\u9875\u9762<\/h3>
\n <ul style="list-style: none; padding: 0; margin: 0;">
\n <li style="margin-bottom: 10px;">
\n <a href="\/products" style="color: #0070f3; text-decoration: none;">
\n \u4ea7\u54c1\u4e2d\u5fc3
\n <\/a>
\n <\/li>
\n <li style="margin-bottom: 10px;">
\n <a href="\/docs" style="color: #0070f3; text-decoration: none;">
\n \u6587\u6863\u4e2d\u5fc3
\n <\/a>
\n <\/li>
\n <li style="margin-bottom: 10px;">
\n <a href="\/blog" style="color: #0070f3; text-decoration: none;">
\n \u6280\u672f\u535a\u5ba2
\n <\/a>
\n <\/li>
\n <\/ul>
\n <\/div>
\n <\/div>
\n<\/body>
\n<\/html><\/p>\n
javascript<\/p>\n
\/\/ \u6e10\u8fdb\u5f0f\u589e\u5f3a\u7684\u9519\u8bef\u5904\u7406
\nclass ProgressiveErrorHandler {
\n constructor() {
\n this.errorQueue = [];
\n this.maxRetries = 3;
\n this.retryDelays = [1000, 3000, 10000]; \/\/ \u6307\u6570\u9000\u907f
\n }<\/p>\n
async handleRequest(requestFunc, options = {}) {
\n const {
\n retryCount = 0,
\n userMessage = '\u64cd\u4f5c\u5931\u8d25，\u8bf7\u91cd\u8bd5',
\n fallbackAction = null
\n } = options;<\/p>\n
try {
\n return await requestFunc();
\n } catch (error) {
\n \/\/ \u8bb0\u5f55\u9519\u8bef
\n this.logError(error);<\/p>\n
\/\/ \u6839\u636e\u9519\u8bef\u7c7b\u578b\u5904\u7406
\n switch (error.code) {
\n case 'NETWORK_ERROR':
\n return this.handleNetworkError(error, {
\n requestFunc,
\n retryCount,
\n userMessage,
\n fallbackAction
\n });<\/p>\n
case 'SERVER_ERROR':
\n return this.handleServerError(error, {
\n requestFunc,
\n retryCount,
\n userMessage,
\n fallbackAction
\n });<\/p>\n
case 'RATE_LIMITED':
\n return this.handleRateLimit(error, {
\n requestFunc,
\n retryCount,
\n userMessage
\n });<\/p>\n
default:
\n return this.showUserError(error, userMessage, fallbackAction);
\n }
\n }
\n }<\/p>\n
async handleNetworkError(error, options) {
\n const { requestFunc, retryCount, userMessage, fallbackAction } = options;<\/p>\n
if (retryCount < this.maxRetries) {
\n \/\/ \u663e\u793a\u91cd\u8bd5\u63d0\u793a
\n this.showToast({
\n type: 'warning',
\n message: `\u7f51\u7edc\u8fde\u63a5\u4e0d\u7a33\u5b9a，${retryCount + 1}\u79d2\u540e\u91cd\u8bd5…`,
\n duration: retryCount + 1 * 1000
\n });<\/p>\n
\/\/ \u5ef6\u8fdf\u91cd\u8bd5
\n await this.delay(this.retryDelays[retryCount]);<\/p>\n
return this.handleRequest(requestFunc, {
\n …options,
\n retryCount: retryCount + 1
\n });
\n }<\/p>\n
\/\/ \u8fbe\u5230\u6700\u5927\u91cd\u8bd5\u6b21\u6570
\n return this.showOfflineMode(error, userMessage, fallbackAction);
\n }<\/p>\n
async handleServerError(error, options) {
\n const { status, originalError } = error;<\/p>\n
if ([502, 503, 504].includes(status)) {
\n \/\/ \u4e34\u65f6\u6027\u670d\u52a1\u5668\u9519\u8bef，\u53ef\u4ee5\u91cd\u8bd5
\n if (options.retryCount < 2) { \/\/ \u670d\u52a1\u5668\u9519\u8bef\u53ea\u91cd\u8bd52\u6b21
\n await this.delay(this.retryDelays[options.retryCount]);<\/p>\n
return this.handleRequest(options.requestFunc, {
\n …options,
\n retryCount: options.retryCount + 1
\n });
\n }
\n }<\/p>\n
\/\/ \u6c38\u4e45\u6027\u670d\u52a1\u5668\u9519\u8bef\u6216\u8fbe\u5230\u91cd\u8bd5\u6b21\u6570
\n return this.showUserError(error, options.userMessage, options.fallbackAction);
\n }<\/p>\n
async handleRateLimit(error, options) {
\n const { retryAfter } = error;
\n const waitTime = retryAfter ? parseInt(retryAfter) * 1000 : 60000;<\/p>\n
this.showToast({
\n type: 'info',
\n message: `\u64cd\u4f5c\u8fc7\u4e8e\u9891\u7e41，\u8bf7${Math.ceil(waitTime \/ 1000)}\u79d2\u540e\u91cd\u8bd5`,
\n duration: 5000
\n });<\/p>\n
await this.delay(waitTime);<\/p>\n
return this.handleRequest(options.requestFunc, {
\n …options,
\n retryCount: options.retryCount + 1
\n });
\n }<\/p>\n
showOfflineMode(error, userMessage, fallbackAction) {
\n \/\/ \u663e\u793a\u79bb\u7ebf\u6a21\u5f0fUI
\n this.showOfflineUI();<\/p>\n
\/\/ \u5982\u679c\u6709\u5907\u7528\u64cd\u4f5c，\u6267\u884c\u5b83
\n if (fallbackAction) {
\n return fallbackAction();
\n }<\/p>\n
\/\/ \u5426\u5219\u8fd4\u56de\u4e00\u4e2a\u7279\u6b8a\u7684\u79bb\u7ebf\u7ed3\u679c
\n return {
\n success: false,
\n offline: true,
\n message: '\u5f53\u524d\u5904\u4e8e\u79bb\u7ebf\u6a21\u5f0f，\u6570\u636e\u5c06\u5728\u7f51\u7edc\u6062\u590d\u540e\u540c\u6b65'
\n };
\n }<\/p>\n
showUserError(error, userMessage, fallbackAction) {
\n \/\/ \u663e\u793a\u7528\u6237\u53cb\u597d\u7684\u9519\u8bef\u63d0\u793a
\n this.showDialog({
\n title: '\u64cd\u4f5c\u5931\u8d25',
\n message: userMessage,
\n type: 'error',
\n buttons: [
\n {
\n text: '\u91cd\u8bd5',
\n action: () => {
\n if (fallbackAction) {
\n fallbackAction();
\n } else {
\n window.location.reload();
\n }
\n }
\n },
\n {
\n text: '\u8054\u7cfb\u652f\u6301',
\n action: () => {
\n window.open('\/contact', '_blank');
\n }
\n }
\n ]
\n });<\/p>\n
return {
\n success: false,
\n error: error.code || 'UNKNOWN_ERROR',
\n message: userMessage
\n };
\n }<\/p>\n
logError(error) {
\n \/\/ \u53d1\u9001\u9519\u8bef\u5230\u76d1\u63a7\u7cfb\u7edf
\n if (window.analytics) {
\n window.analytics.track('error_occurred', {
\n error_code: error.code,
\n error_message: error.message,
\n url: window.location.href,
\n timestamp: new Date().toISOString()
\n });
\n }<\/p>\n
\/\/ \u672c\u5730\u5b58\u50a8\u9519\u8bef\u961f\u5217（\u7528\u4e8e\u79bb\u7ebf\u65f6\u91cd\u8bd5）
\n this.errorQueue.push({
\n error,
\n timestamp: Date.now(),
\n context: {
\n url: window.location.href,
\n userAgent: navigator.userAgent
\n }
\n });<\/p>\n
\/\/ \u4fdd\u6301\u961f\u5217\u5927\u5c0f
\n if (this.errorQueue.length > 100) {
\n this.errorQueue.shift();
\n }<\/p>\n
\/\/ \u5b58\u50a8\u5230localStorage
\n localStorage.setItem('error_queue', JSON.stringify(this.errorQueue));
\n }<\/p>\n
showToast(options) {
\n \/\/ \u5b9e\u73b0Toast\u63d0\u793a
\n const toast = document.createElement('div');
\n toast.className = `toast toast-${options.type}`;
\n toast.textContent = options.message;
\n toast.style.cssText = `
\n position: fixed;
\n top: 20px;
\n right: 20px;
\n padding: 12px 24px;
\n border-radius: 6px;
\n color: white;
\n background: ${options.type === 'warning' ? '#f0ad4e' : '#5bc0de'};
\n z-index: 10000;
\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);
\n animation: slideIn 0.3s ease;
\n `;<\/p>\n
document.body.appendChild(toast);<\/p>\n
setTimeout(() => {
\n toast.style.animation = 'slideOut 0.3s ease';
\n setTimeout(() => toast.remove(), 300);
\n }, options.duration || 3000);
\n }<\/p>\n
delay(ms) {
\n return new Promise(resolve => setTimeout(resolve, ms));
\n }
\n}<\/p>\n
\/\/ \u4f7f\u7528\u793a\u4f8b
\nconst errorHandler = new ProgressiveErrorHandler();<\/p>\n
async function loadUserProfile() {
\n return errorHandler.handleRequest(
\n async () => {
\n const response = await fetch('\/api\/user\/profile');
\n if (!response.ok) {
\n throw {
\n code: response.status >= 500 ? 'SERVER_ERROR' : 'CLIENT_ERROR',
\n status: response.status,
\n message: 'Failed to load profile'
\n };
\n }
\n return response.json();
\n },
\n {
\n userMessage: '\u52a0\u8f7d\u4e2a\u4eba\u8d44\u6599\u5931\u8d25',
\n fallbackAction: () => {
\n \/\/ \u663e\u793a\u7f13\u5b58\u7684\u7528\u6237\u6570\u636e
\n const cached = localStorage.getItem('cached_profile');
\n if (cached) {
\n return JSON.parse(cached);
\n }
\n }
\n }
\n );
\n}<\/p>\n
http<\/p>\n
# \u7f13\u5b58\u63a7\u5236\u5934\u793a\u4f8b
\nGET \/api\/products\/123 HTTP\/1.1<\/p>\n
HTTP\/1.1 200 OK
\nContent-Type: application\/json
\nCache-Control: public, max-age=3600, stale-while-revalidate=7200
\nETag: "abc123def456"
\nLast-Modified: Mon, 15 Jan 2024 10:00:00 GMT<\/p>\n
{
\n "id": "123",
\n "name": "Product Name",
\n "price": 99.99
\n}<\/p>\n
Service Worker\u4e2d\u7684\u7f13\u5b58\u7b56\u7565<\/p>\n
javascript<\/p>\n
\/\/ service-worker.js
\nconst CACHE_NAME = 'app-v1';
\nconst STATIC_CACHE = 'static-v1';<\/p>\n
\/\/ \u5b89\u88c5\u65f6\u7f13\u5b58\u9759\u6001\u8d44\u6e90
\nself.addEventListener('install', event => {
\n event.waitUntil(
\n caches.open(STATIC_CACHE).then(cache => {
\n return cache.addAll([
\n '\/',
\n '\/index.html',
\n '\/styles\/main.css',
\n '\/scripts\/app.js',
\n '\/offline.html'
\n ]);
\n })
\n );
\n});<\/p>\n
\/\/ \u62e6\u622a\u8bf7\u6c42
\nself.addEventListener('fetch', event => {
\n \/\/ API\u8bf7\u6c42 – \u7f51\u7edc\u4f18\u5148，\u5931\u8d25\u65f6\u4f7f\u7528\u7f13\u5b58
\n if (event.request.url.includes('\/api\/')) {
\n event.respondWith(
\n fetch(event.request)
\n .then(response => {
\n \/\/ \u7f13\u5b58\u6210\u529f\u7684\u54cd\u5e94
\n if (response.status === 200) {
\n const clonedResponse = response.clone();
\n caches.open(CACHE_NAME).then(cache => {
\n cache.put(event.request, clonedResponse);
\n });
\n }
\n return response;
\n })
\n .catch(() => {
\n \/\/ \u7f51\u7edc\u5931\u8d25，\u5c1d\u8bd5\u4ece\u7f13\u5b58\u83b7\u53d6
\n return caches.match(event.request).then(cachedResponse => {
\n if (cachedResponse) {
\n \/\/ \u6dfb\u52a0\u7f13\u5b58\u6807\u8bc6\u5934
\n const headers = new Headers(cachedResponse.headers);
\n headers.set('X-Cache', 'HIT');<\/p>\n
return new Response(cachedResponse.body, {
\n status: cachedResponse.status,
\n statusText: cachedResponse.statusText,
\n headers
\n });
\n }<\/p>\n
\/\/ \u8fde\u7f13\u5b58\u4e5f\u6ca1\u6709，\u8fd4\u56de\u79bb\u7ebf\u9875\u9762
\n return caches.match('\/offline.html');
\n });
\n })
\n );
\n } else {
\n \/\/ \u9759\u6001\u8d44\u6e90 – \u7f13\u5b58\u4f18\u5148
\n event.respondWith(
\n caches.match(event.request).then(cachedResponse => {
\n if (cachedResponse) {
\n \/\/ \u6dfb\u52a0\u7f13\u5b58\u6807\u8bc6
\n const headers = new Headers(cachedResponse.headers);
\n headers.set('X-Cache', 'HIT');<\/p>\n
return new Response(cachedResponse.body, {
\n status: cachedResponse.status,
\n statusText: cachedResponse.statusText,
\n headers
\n });
\n }<\/p>\n
return fetch(event.request).then(response => {
\n \/\/ \u53ea\u7f13\u5b58\u6210\u529f\u7684\u54cd\u5e94
\n if (response.status === 200) {
\n const clonedResponse = response.clone();
\n caches.open(STATIC_CACHE).then(cache => {
\n cache.put(event.request, clonedResponse);
\n });
\n }
\n return response;
\n });
\n })
\n );
\n }
\n});<\/p>\n
\/\/ \u6fc0\u6d3b\u65f6\u6e05\u7406\u65e7\u7f13\u5b58
\nself.addEventListener('activate', event => {
\n event.waitUntil(
\n caches.keys().then(cacheNames => {
\n return Promise.all(
\n cacheNames.map(cacheName => {
\n if (cacheName !== CACHE_NAME && cacheName !== STATIC_CACHE) {
\n return caches.delete(cacheName);
\n }
\n })
\n );
\n })
\n );
\n});<\/p>\n
html<\/p>\n
<!– \u6587\u6863\u5934\u90e8\u6dfb\u52a0\u9884\u52a0\u8f7d\u63d0\u793a –>
\n<head>
\n <!– \u9884\u52a0\u8f7d\u5173\u952eCSS –>
\n <link rel="preload" href="\/styles\/critical.css" as="style"><\/p>\n
<!– \u9884\u52a0\u8f7d\u5173\u952e\u5b57\u4f53 –>
\n <link rel="preload" href="\/fonts\/iconfont.woff2" as="font" type="font\/woff2" crossorigin><\/p>\n
<!– \u9884\u8fde\u63a5API\u57df\u540d –>
\n <link rel="preconnect" href="https:\/\/api.example.com">
\n <link rel="dns-prefetch" href="https:\/\/api.example.com"><\/p>\n
<!– \u9884\u52a0\u8f7d\u91cd\u8981API\u7aef\u70b9 –>
\n <link rel="prefetch" href="\/api\/user\/profile" as="fetch" crossorigin><\/p>\n
<!– \u72b6\u6001\u7801\u76f8\u5173\u7684\u5907\u7528\u8d44\u6e90 –>
\n <noscript>
\n <!– \u65e0JavaScript\u65f6\u7684\u964d\u7ea7\u5904\u7406 –>
\n <meta http-equiv="refresh" content="0;url=\/noscript.html">
\n <\/noscript>
\n<\/head><\/p>\n
javascript<\/p>\n
\/\/ \u670d\u52a1\u7aefCSRF\u9632\u62a4\u4e2d\u95f4\u4ef6
\nconst csrfProtection = (req, res, next) => {
\n \/\/ \u6392\u9664\u67d0\u4e9b\u8def\u7531（\u5982API\u6587\u6863）
\n if (req.path.startsWith('\/api-docs')) {
\n return next();
\n }<\/p>\n
\/\/ \u5b89\u5168\u65b9\u6cd5\u4e0d\u9700\u8981CSRF\u4fdd\u62a4
\n const safeMethods = ['GET', 'HEAD', 'OPTIONS'];
\n if (safeMethods.includes(req.method)) {
\n return next();
\n }<\/p>\n
\/\/ \u9a8c\u8bc1CSRF\u4ee4\u724c
\n const csrfToken = req.headers['x-csrf-token'] || req.body._csrf;
\n const sessionToken = req.session.csrfToken;<\/p>\n
if (!csrfToken || csrfToken !== sessionToken) {
\n \/\/ \u8bb0\u5f55\u5b89\u5168\u4e8b\u4ef6
\n logSecurityEvent({
\n type: 'CSRF_ATTEMPT',
\n ip: req.ip,
\n userAgent: req.get('User-Agent'),
\n path: req.path,
\n timestamp: new Date()
\n });<\/p>\n
\/\/ \u8fd4\u56de403\u72b6\u6001\u7801
\n return res.status(403).json({
\n error: {
\n code: 'CSRF_TOKEN_INVALID',
\n message: 'Invalid or missing CSRF token',
\n documentation: 'https:\/\/api.example.com\/docs\/security#csrf-protection'
\n }
\n });
\n }<\/p>\n
\/\/ \u4ee4\u724c\u9a8c\u8bc1\u6210\u529f，\u751f\u6210\u65b0\u4ee4\u724c（\u53cc\u63d0\u4ea4cookie\u6a21\u5f0f）
\n const newToken = generateCsrfToken();
\n req.session.csrfToken = newToken;
\n res.cookie('XSRF-TOKEN', newToken, {
\n httpOnly: false, \/\/ \u9700\u8981\u5ba2\u6237\u7aefJavaScript\u8bbf\u95ee
\n secure: process.env.NODE_ENV === 'production',
\n sameSite: 'strict'
\n });<\/p>\n
next();
\n};<\/p>\n
\/\/ \u5ba2\u6237\u7aef\u81ea\u52a8\u53d1\u9001CSRF\u4ee4\u724c
\naxios.interceptors.request.use(config => {
\n const token = getCsrfToken(); \/\/ \u4ececookie\u6216meta\u6807\u7b7e\u83b7\u53d6<\/p>\n
if (token && !config.headers['X-CSRF-Token']) {
\n config.headers['X-CSRF-Token'] = token;
\n }<\/p>\n
return config;
\n});<\/p>\n
javascript<\/p>\n
\/\/ Express\u4e2d\u95f4\u4ef6\u8bbe\u7f6eCSP
\napp.use((req, res, next) => {
\n const nonce = crypto.randomBytes(16).toString('base64');
\n res.locals.cspNonce = nonce;<\/p>\n
res.setHeader(
\n 'Content-Security-Policy',
\n `default-src 'self';
\n script-src 'self' 'nonce-${nonce}' https:\/\/analytics.example.com;
\n style-src 'self' 'unsafe-inline';
\n img-src 'self' data: https:\/\/cdn.example.com;
\n font-src 'self' https:\/\/fonts.googleapis.com;
\n connect-src 'self' https:\/\/api.example.com;
\n frame-ancestors 'none';
\n form-action 'self';
\n base-uri 'self';`
\n );<\/p>\n
next();
\n});<\/p>\n
\/\/ \u5728HTML\u6a21\u677f\u4e2d\u4f7f\u7528nonce
\napp.get('\/', (req, res) => {
\n res.render('index', {
\n nonce: res.locals.cspNonce
\n });
\n});<\/p>\n
html<\/p>\n
<!– \u6a21\u677f\u4e2d\u4f7f\u7528nonce –>
\n<!DOCTYPE html>
\n<html>
\n<head>
\n <!– \u5185\u8054\u6837\u5f0f\u4ecd\u7136\u5141\u8bb8 –>
\n <style>
\n .error { color: red; }
\n <\/style>
\n<\/head>
\n<body>
\n <!– \u4f7f\u7528nonce\u7684\u5185\u8054\u811a\u672c –>
\n <script nonce="{{nonce}}">
\n window.config = {
\n apiUrl: '{{apiUrl}}',
\n userId: '{{userId}}'
\n };
\n <\/script><\/p>\n
<!– \u5916\u90e8\u811a\u672c –>
\n <script src="\/app.js" nonce="{{nonce}}"><\/script><\/p>\n
<!– \u88abCSP\u963b\u6b62\u7684\u811a\u672c –>
\n <script>
\n \/\/ \u8fd9\u4e2a\u811a\u672c\u4f1a\u88abCSP\u963b\u6b62，\u56e0\u4e3a\u6ca1\u6709nonce
\n console.log('This will be blocked');
\n <\/script>
\n<\/body>
\n<\/html><\/p>\n
javascript<\/p>\n
\/\/ Winston\u65e5\u5fd7\u914d\u7f6e
\nconst winston = require('winston');
\nconst { combine, timestamp, json, errors } = winston.format;<\/p>\n
const logger = winston.createLogger({
\n level: process.env.LOG_LEVEL || 'info',
\n format: combine(
\n timestamp(),
\n errors({ stack: true }),
\n json()
\n ),
\n transports: [
\n \/\/ \u63a7\u5236\u53f0\u8f93\u51fa（\u5f00\u53d1\u73af\u5883）
\n new winston.transports.Console({
\n format: winston.format.simple()
\n }),<\/p>\n
\/\/ \u9519\u8bef\u65e5\u5fd7\u6587\u4ef6
\n new winston.transports.File({
\n filename: 'logs\/error.log',
\n level: 'error',
\n maxsize: 5242880, \/\/ 5MB
\n maxFiles: 5
\n }),<\/p>\n
\/\/ \u8bbf\u95ee\u65e5\u5fd7\u6587\u4ef6
\n new winston.transports.File({
\n filename: 'logs\/access.log',
\n level: 'info',
\n maxsize: 5242880,
\n maxFiles: 10
\n })
\n ]
\n});<\/p>\n
\/\/ Express\u8bbf\u95ee\u65e5\u5fd7\u4e2d\u95f4\u4ef6
\napp.use((req, res, next) => {
\n const startTime = Date.now();<\/p>\n
\/\/ \u6355\u83b7\u54cd\u5e94\u5b8c\u6210\u4e8b\u4ef6
\n res.on('finish', () => {
\n const duration = Date.now() – startTime;<\/p>\n
logger.info('HTTP Request', {
\n timestamp: new Date().toISOString(),
\n method: req.method,
\n url: req.originalUrl,
\n statusCode: res.statusCode,
\n statusMessage: res.statusMessage,
\n duration,
\n userAgent: req.get('User-Agent'),
\n ip: req.ip,
\n userId: req.user?.id || 'anonymous',
\n requestId: req.id,
\n \/\/ \u7279\u5b9a\u72b6\u6001\u7801\u7684\u989d\u5916\u4fe1\u606f
\n …(res.statusCode >= 400 && {
\n errorDetails: {
\n message: res.locals.error?.message,
\n stack: process.env.NODE_ENV === 'development'
\n ? res.locals.error?.stack
\n : undefined
\n }
\n }),
\n …(res.statusCode === 429 && {
\n rateLimit: {
\n limit: req.rateLimit?.limit,
\n remaining: req.rateLimit?.remaining,
\n resetTime: req.rateLimit?.resetTime
\n }
\n })
\n });
\n });<\/p>\n
next();
\n});<\/p>\n
\/\/ \u9519\u8bef\u5904\u7406\u4e2d\u95f4\u4ef6
\napp.use((error, req, res, next) => {
\n \/\/ \u8bb0\u5f55\u9519\u8bef
\n logger.error('Application Error', {
\n timestamp: new Date().toISOString(),
\n requestId: req.id,
\n url: req.originalUrl,
\n method: req.method,
\n userId: req.user?.id,
\n error: {
\n name: error.name,
\n message: error.message,
\n stack: error.stack,
\n code: error.code,
\n statusCode: error.statusCode
\n }
\n });<\/p>\n
\/\/ \u6839\u636e\u73af\u5883\u8fd4\u56de\u9519\u8bef
\n const isProduction = process.env.NODE_ENV === 'production';<\/p>\n
res.status(error.statusCode || 500).json({
\n error: {
\n code: error.code || 'INTERNAL_ERROR',
\n message: isProduction ? 'Internal server error' : error.message,
\n …(!isProduction && { stack: error.stack }),
\n requestId: req.id,
\n timestamp: new Date().toISOString()
\n }
\n });
\n});<\/p>\n
javascript<\/p>\n
\/\/ WebSocket\u5b9e\u65f6\u76d1\u63a7
\nconst WebSocket = require('ws');
\nconst wss = new WebSocket.Server({ port: 8080 });<\/p>\n
\/\/ \u72b6\u6001\u7801\u7edf\u8ba1
\nconst statusStats = {
\n '1xx': 0, '2xx': 0, '3xx': 0, '4xx': 0, '5xx': 0,
\n details: {}
\n};<\/p>\n
\/\/ \u5b9e\u65f6\u9519\u8bef\u961f\u5217
\nconst recentErrors = [];<\/p>\n
wss.on('connection', (ws) => {
\n \/\/ \u53d1\u9001\u5f53\u524d\u72b6\u6001
\n ws.send(JSON.stringify({
\n type: 'INITIAL_STATS',
\n data: statusStats
\n }));<\/p>\n
\/\/ \u53d1\u9001\u6700\u8fd1\u9519\u8bef
\n ws.send(JSON.stringify({
\n type: 'RECENT_ERRORS',
\n data: recentErrors.slice(-50) \/\/ \u6700\u8fd150\u4e2a\u9519\u8bef
\n }));
\n});<\/p>\n
\/\/ \u66f4\u65b0\u7edf\u8ba1\u4fe1\u606f
\nfunction updateStats(statusCode) {
\n const statusClass = `${Math.floor(statusCode \/ 100)}xx`;
\n statusStats[statusClass]++;<\/p>\n
if (!statusStats.details[statusCode]) {
\n statusStats.details[statusCode] = 0;
\n }
\n statusStats.details[statusCode]++;<\/p>\n
\/\/ \u5e7f\u64ad\u66f4\u65b0
\n broadcast({
\n type: 'STATS_UPDATE',
\n data: {
\n statusClass,
\n statusCode,
\n counts: statusStats
\n }
\n });
\n}<\/p>\n
\/\/ \u6dfb\u52a0\u9519\u8bef\u5230\u961f\u5217
\nfunction addError(error) {
\n recentErrors.push({
\n …error,
\n timestamp: new Date().toISOString()
\n });<\/p>\n
\/\/ \u4fdd\u6301\u961f\u5217\u5927\u5c0f
\n if (recentErrors.length > 1000) {
\n recentErrors.shift();
\n }<\/p>\n
\/\/ \u5e7f\u64ad\u65b0\u9519\u8bef
\n broadcast({
\n type: 'NEW_ERROR',
\n data: error
\n });
\n}<\/p>\n
\/\/ \u5e7f\u64ad\u6d88\u606f\u7ed9\u6240\u6709\u5ba2\u6237\u7aef
\nfunction broadcast(message) {
\n wss.clients.forEach(client => {
\n if (client.readyState === WebSocket.OPEN) {
\n client.send(JSON.stringify(message));
\n }
\n });
\n}<\/p>\n
\/\/ \u6bcf\u5c0f\u65f6\u91cd\u7f6e\u8ba1\u6570\u5668
\nsetInterval(() => {
\n statusStats['1xx'] = 0;
\n statusStats['2xx'] = 0;
\n statusStats['3xx'] = 0;
\n statusStats['4xx'] = 0;
\n statusStats['5xx'] = 0;
\n statusStats.details = {};<\/p>\n
broadcast({
\n type: 'STATS_RESET',
\n data: { timestamp: new Date().toISOString() }
\n });
\n}, 60 * 60 * 1000);<\/p>\n
javascript<\/p>\n
\/\/ \u79bb\u7ebf\u68c0\u6d4b\u4e0e\u670d\u52a1\u72b6\u6001\u7ba1\u7406
\nclass NetworkStatus {
\n constructor() {
\n this.isOnline = navigator.onLine;
\n this.isServerReachable = true;
\n this.lastCheck = null;
\n this.listeners = [];<\/p>\n
this.init();
\n }<\/p>\n
init() {
\n \/\/ \u76d1\u542c\u7f51\u7edc\u72b6\u6001\u53d8\u5316
\n window.addEventListener('online', () => this.handleOnline());
\n window.addEventListener('offline', () => this.handleOffline());<\/p>\n
\/\/ \u5b9a\u671f\u68c0\u67e5\u670d\u52a1\u5668\u53ef\u7528\u6027
\n setInterval(() => this.checkServerHealth(), 30000);
\n }<\/p>\n
async checkServerHealth() {
\n try {
\n const controller = new AbortController();
\n const timeoutId = setTimeout(() => controller.abort(), 5000);<\/p>\n
const response = await fetch('\/health', {
\n method: 'HEAD',
\n signal: controller.signal,
\n cache: 'no-store'
\n });<\/p>\n
clearTimeout(timeoutId);<\/p>\n
this.isServerReachable = response.ok;
\n this.lastCheck = new Date();<\/p>\n
this.notifyListeners();
\n } catch (error) {
\n this.isServerReachable = false;
\n this.lastCheck = new Date();
\n this.notifyListeners();
\n }
\n }<\/p>\n
handleOnline() {
\n this.isOnline = true;
\n this.notifyListeners();<\/p>\n
\/\/ \u5728\u7ebf\u65f6\u7acb\u5373\u68c0\u67e5\u670d\u52a1\u5668
\n this.checkServerHealth();<\/p>\n
\/\/ \u540c\u6b65\u79bb\u7ebf\u671f\u95f4\u7684\u64cd\u4f5c
\n this.syncOfflineActions();
\n }<\/p>\n
handleOffline() {
\n this.isOnline = false;
\n this.notifyListeners();<\/p>\n
\/\/ \u663e\u793a\u79bb\u7ebf\u63d0\u793a
\n this.showOfflineNotification();
\n }<\/p>\n
async syncOfflineActions() {
\n const offlineActions = this.getOfflineActions();<\/p>\n
for (const action of offlineActions) {
\n try {
\n await this.retryAction(action);
\n this.removeOfflineAction(action.id);
\n } catch (error) {
\n console.error('Failed to sync action:', action, error);
\n }
\n }
\n }<\/p>\n
getOfflineActions() {
\n const actions = localStorage.getItem('offline_actions');
\n return actions ? JSON.parse(actions) : [];
\n }<\/p>\n
saveOfflineAction(action) {
\n const actions = this.getOfflineActions();
\n actions.push({
\n …action,
\n id: Date.now().toString(),
\n timestamp: new Date().toISOString()
\n });
\n localStorage.setItem('offline_actions', JSON.stringify(actions));
\n }<\/p>\n
removeOfflineAction(id) {
\n const actions = this.getOfflineActions();
\n const filtered = actions.filter(a => a.id !== id);
\n localStorage.setItem('offline_actions', JSON.stringify(filtered));
\n }<\/p>\n
async retryAction(action) {
\n \/\/ \u6839\u636eaction\u7c7b\u578b\u91cd\u8bd5\u8bf7\u6c42
\n const { type, data, url, method } = action;<\/p>\n
const response = await fetch(url, {
\n method,
\n headers: {
\n 'Content-Type': 'application\/json',
\n 'X-Offline-Retry': 'true',
\n 'X-Original-Timestamp': data.timestamp
\n },
\n body: JSON.stringify(data)
\n });<\/p>\n
if (!response.ok) {
\n throw new Error(`Retry failed: ${response.status}`);
\n }<\/p>\n
return response.json();
\n }<\/p>\n
addListener(callback) {
\n this.listeners.push(callback);
\n }<\/p>\n
removeListener(callback) {
\n this.listeners = this.listeners.filter(l => l !== callback);
\n }<\/p>\n
notifyListeners() {
\n const status = this.getStatus();
\n this.listeners.forEach(callback => callback(status));
\n }<\/p>\n
getStatus() {
\n return {
\n isOnline: this.isOnline,
\n isServerReachable: this.isServerReachable,
\n lastCheck: this.lastCheck,
\n canPerformAction: this.isOnline && this.isServerReachable,
\n isOffline: !this.isOnline,
\n isUnreachable: this.isOnline && !this.isServerReachable
\n };
\n }<\/p>\n
showOfflineNotification() {
\n \/\/ \u663e\u793a\u79bb\u7ebf\u901a\u77e5
\n if ('Notification' in window && Notification.permission === 'granted') {
\n new Notification('\u5e94\u7528\u5df2\u79bb\u7ebf', {
\n body: '\u60a8\u5f53\u524d\u5904\u4e8e\u79bb\u7ebf\u72b6\u6001，\u67d0\u4e9b\u529f\u80fd\u53ef\u80fd\u53d7\u9650',
\n icon: '\/icons\/offline.png',
\n tag: 'network-status'
\n });
\n }<\/p>\n
\/\/ \u66f4\u65b0UI\u72b6\u6001
\n document.dispatchEvent(new CustomEvent('networkStatusChange', {
\n detail: this.getStatus()
\n }));
\n }
\n}<\/p>\n
\/\/ \u4f7f\u7528\u793a\u4f8b
\nconst networkStatus = new NetworkStatus();<\/p>\n
\/\/ \u5728\u9700\u8981\u7f51\u7edc\u8bf7\u6c42\u7684\u5730\u65b9
\nasync function submitForm(data) {
\n const status = networkStatus.getStatus();<\/p>\n
if (!status.canPerformAction) {
\n \/\/ \u4fdd\u5b58\u5230\u79bb\u7ebf\u961f\u5217
\n networkStatus.saveOfflineAction({
\n type: 'form_submission',
\n url: '\/api\/submit',
\n method: 'POST',
\n data
\n });<\/p>\n
\/\/ \u663e\u793a\u79bb\u7ebf\u63d0\u793a
\n return {
\n success: false,
\n offline: true,
\n message: '\u5f53\u524d\u79bb\u7ebf，\u6570\u636e\u5df2\u4fdd\u5b58，\u5c06\u5728\u6062\u590d\u7f51\u7edc\u540e\u63d0\u4ea4'
\n };
\n }<\/p>\n
try {
\n const response = await fetch('\/api\/submit', {
\n method: 'POST',
\n headers: {
\n 'Content-Type': 'application\/json'
\n },
\n body: JSON.stringify(data)
\n });<\/p>\n
if (!response.ok) {
\n throw new Error(`Submission failed: ${response.status}`);
\n }<\/p>\n
return response.json();
\n } catch (error) {
\n if (!navigator.onLine) {
\n \/\/ \u7f51\u7edc\u9519\u8bef，\u4fdd\u5b58\u5230\u79bb\u7ebf\u961f\u5217
\n networkStatus.saveOfflineAction({
\n type: 'form_submission',
\n url: '\/api\/submit',
\n method: 'POST',
\n data
\n });<\/p>\n
return {
\n success: false,
\n offline: true,
\n message: '\u7f51\u7edc\u8fde\u63a5\u5931\u8d25，\u6570\u636e\u5df2\u4fdd\u5b58\u5230\u672c\u5730'
\n };
\n }<\/p>\n
throw error;
\n }
\n}<\/p>\n
javascript<\/p>\n
\/\/ Jest\u72b6\u6001\u7801\u6d4b\u8bd5\u793a\u4f8b
\ndescribe('API Status Codes', () => {
\n describe('GET \/api\/users', () => {
\n test('should return 200 with user list for authenticated admin', async () => {
\n const response = await request(app)
\n .get('\/api\/users')
\n .set('Authorization', `Bearer ${adminToken}`);<\/p>\n
expect(response.status).toBe(200);
\n expect(response.body).toHaveProperty('data');
\n expect(Array.isArray(response.body.data)).toBe(true);
\n });<\/p>\n
test('should return 401 for unauthenticated requests', async () => {
\n const response = await request(app)
\n .get('\/api\/users');<\/p>\n
expect(response.status).toBe(401);
\n expect(response.body.error.code).toBe('UNAUTHORIZED');
\n });<\/p>\n
test('should return 403 for non-admin users', async () => {
\n const response = await request(app)
\n .get('\/api\/users')
\n .set('Authorization', `Bearer ${userToken}`);<\/p>\n
expect(response.status).toBe(403);
\n expect(response.body.error.code).toBe('INSUFFICIENT_PERMISSIONS');
\n });
\n });<\/p>\n
describe('POST \/api\/users', () => {
\n test('should return 201 on successful creation', async () => {
\n const userData = {
\n name: 'Test User',
\n email: 'test@example.com',
\n password: 'securepassword123'
\n };<\/p>\n
const response = await request(app)
\n .post('\/api\/users')
\n .send(userData);<\/p>\n
expect(response.status).toBe(201);
\n expect(response.headers.location).toMatch(\/\\\\\/api\\\\\/users\\\\\/\\\\w+\/);
\n expect(response.body).toHaveProperty('id');
\n expect(response.body.email).toBe(userData.email);
\n });<\/p>\n
test('should return 400 for invalid email', async () => {
\n const userData = {
\n name: 'Test User',
\n email: 'invalid-email',
\n password: 'password123'
\n };<\/p>\n
const response = await request(app)
\n .post('\/api\/users')
\n .send(userData);<\/p>\n
expect(response.status).toBe(400);
\n expect(response.body.error.code).toBe('VALIDATION_ERROR');
\n expect(response.body.error.details[0].field).toBe('email');
\n });<\/p>\n
test('should return 409 for duplicate email', async () => {
\n \/\/ \u5148\u521b\u5efa\u4e00\u4e2a\u7528\u6237
\n await request(app)
\n .post('\/api\/users')
\n .send({
\n name: 'Existing User',
\n email: 'duplicate@example.com',
\n password: 'password123'
\n });<\/p>\n
\/\/ \u5c1d\u8bd5\u7528\u76f8\u540c\u90ae\u7bb1\u521b\u5efa
\n const response = await request(app)
\n .post('\/api\/users')
\n .send({
\n name: 'New User',
\n email: 'duplicate@example.com',
\n password: 'newpassword123'
\n });<\/p>\n
expect(response.status).toBe(409);
\n expect(response.body.error.code).toBe('DUPLICATE_EMAIL');
\n });
\n });<\/p>\n
describe('Error handling', () => {
\n test('should return 500 for unhandled exceptions', async () => {
\n \/\/ \u6a21\u62df\u6570\u636e\u5e93\u9519\u8bef
\n jest.spyOn(UserModel, 'findAll').mockImplementation(() => {
\n throw new Error('Database connection failed');
\n });<\/p>\n
const response = await request(app)
\n .get('\/api\/users')
\n .set('Authorization', `Bearer ${adminToken}`);<\/p>\n
expect(response.status).toBe(500);
\n expect(response.body.error.code).toBe('INTERNAL_SERVER_ERROR');<\/p>\n
\/\/ \u9a8c\u8bc1\u9519\u8bef\u88ab\u8bb0\u5f55
\n expect(logger.error).toHaveBeenCalled();
\n });<\/p>\n
test('should return 503 during maintenance', async () => {
\n \/\/ \u542f\u7528\u7ef4\u62a4\u6a21\u5f0f
\n process.env.MAINTENANCE_MODE = 'true';<\/p>\n
const response = await request(app)
\n .get('\/api\/users')
\n .set('Authorization', `Bearer ${adminToken}`);<\/p>\n
expect(response.status).toBe(503);
\n expect(response.headers['retry-after']).toBeDefined();
\n expect(response.body.error.code).toBe('MAINTENANCE_MODE');<\/p>\n
\/\/ \u6e05\u7406
\n delete process.env.MAINTENANCE_MODE;
\n });
\n });
\n});<\/p>\n
\/\/ E2E\u6d4b\u8bd5 – Cypress
\ndescribe('Status Code E2E Tests', () => {
\n beforeEach(() => {
\n cy.intercept('GET', '\/api\/user\/profile').as('getProfile');
\n });<\/p>\n
it('should handle 401 gracefully', () => {
\n \/\/ \u6a21\u62df401\u54cd\u5e94
\n cy.intercept('GET', '\/api\/user\/profile', {
\n statusCode: 401,
\n body: {
\n error: {
\n code: 'UNAUTHORIZED',
\n message: 'Authentication required'
\n }
\n }
\n }).as('unauthorized');<\/p>\n
cy.visit('\/profile');
\n cy.wait('@unauthorized');<\/p>\n
\/\/ \u9a8c\u8bc1\u88ab\u91cd\u5b9a\u5411\u5230\u767b\u5f55\u9875
\n cy.url().should('include', '\/login');
\n cy.get('.error-message').should('contain', '\u8bf7\u91cd\u65b0\u767b\u5f55');
\n });<\/p>\n
it('should handle 404 gracefully', () => {
\n cy.visit('\/nonexistent-page');<\/p>\n
\/\/ \u9a8c\u8bc1\u663e\u793a404\u9875\u9762
\n cy.get('h1').should('contain', '404');
\n cy.get('a').contains('\u8fd4\u56de\u9996\u9875').should('be.visible');
\n });<\/p>\n
it('should retry on 503', () => {
\n let requestCount = 0;<\/p>\n
cy.intercept('GET', '\/api\/data', (req) => {
\n requestCount++;<\/p>\n
if (requestCount === 1) {
\n req.reply({
\n statusCode: 503,
\n headers: {
\n 'retry-after': '1'
\n }
\n });
\n } else {
\n req.reply({
\n statusCode: 200,
\n body: { data: 'success' }
\n });
\n }
\n }).as('getData');<\/p>\n
cy.visit('\/dashboard');
\n cy.wait('@getData');<\/p>\n
\/\/ \u9a8c\u8bc1\u6700\u7ec8\u6210\u529f
\n cy.get('.data-content').should('contain', 'success');
\n });
\n});<\/p>\n
yaml<\/p>\n
# Prometheus\u89c4\u5219\u914d\u7f6e
\ngroups:
\n – name: http_status_alerts
\n rules:
\n # \u9ad8\u9519\u8bef\u7387\u544a\u8b66
\n – alert: HighErrorRate
\n expr: |
\n rate(http_requests_total{status=~"5.."}[5m]) \/
\n rate(http_requests_total[5m]) > 0.05
\n for: 5m
\n labels:
\n severity: critical
\n annotations:
\n summary: "High 5xx error rate detected"
\n description: |
\n Error rate is {{ $value }}% for endpoint {{ $labels.endpoint }}.
\n This exceeds the 5% threshold.<\/p>\n
# 4xx\u9519\u8bef\u7387\u589e\u52a0
\n – alert: HighClientErrorRate
\n expr: |
\n rate(http_requests_total{status=~"4.."}[5m]) \/
\n rate(http_requests_total[5m]) > 0.10
\n for: 10m
\n labels:
\n severity: warning
\n annotations:
\n summary: "High 4xx error rate detected"
\n description: |
\n Client error rate is {{ $value }}% for endpoint {{ $labels.endpoint }}.
\n This may indicate issues with client requests.<\/p>\n
# \u7279\u5b9a\u7aef\u70b9\u4e0d\u53ef\u7528
\n – alert: EndpointDown
\n expr: |
\n sum(rate(http_requests_total{endpoint="\/api\/health"}[5m])) == 0
\n for: 2m
\n labels:
\n severity: critical
\n annotations:
\n summary: "Health endpoint is down"
\n description: "The health endpoint has not received any requests in the last 2 minutes."<\/p>\n
# \u54cd\u5e94\u65f6\u95f4\u589e\u52a0\u4e0e\u72b6\u6001\u7801\u5173\u8054
\n – alert: SlowResponsesWithErrors
\n expr: |
\n histogram_quantile(0.95,
\n rate(http_request_duration_seconds_bucket{status=~"5.."}[5m])
\n ) > 2
\n for: 5m
\n labels:
\n severity: warning
\n annotations:
\n summary: "Slow responses with server errors"
\n description: |
\n 95th percentile response time for error responses is {{ $value }}s.
\n Slow responses with errors may indicate deeper issues.<\/p>\n
javascript<\/p>\n
\/\/ OpenTelemetry\u8ffd\u8e2a\u914d\u7f6e
\nconst { NodeTracerProvider } = require('@opentelemetry\/node');
\nconst { SimpleSpanProcessor } = require('@opentelemetry\/tracing');
\nconst { JaegerExporter } = require('@opentelemetry\/exporter-jaeger');
\nconst { ZipkinExporter } = require('@opentelemetry\/exporter-zipkin');<\/p>\n
const tracerProvider = new NodeTracerProvider();
\ntracerProvider.register();<\/p>\n
\/\/ Jaeger\u5bfc\u51fa\u5668
\nconst jaegerExporter = new JaegerExporter({
\n serviceName: 'api-service',
\n tags: [
\n { key: 'environment', value: process.env.NODE_ENV }
\n ]
\n});<\/p>\n
\/\/ \u6dfb\u52a0\u8de8\u5ea6\u5904\u7406\u5668
\ntracerProvider.addSpanProcessor(
\n new SimpleSpanProcessor(jaegerExporter)
\n);<\/p>\n
\/\/ Express\u4e2d\u95f4\u4ef6
\nconst { expressMiddleware } = require('@opentelemetry\/express');<\/p>\n
app.use(expressMiddleware('api-service'));<\/p>\n
\/\/ \u81ea\u5b9a\u4e49\u8de8\u5ea6\u5c5e\u6027
\napp.use((req, res, next) => {
\n const span = tracerProvider.getTracer('api').getCurrentSpan();<\/p>\n
if (span) {
\n \/\/ \u6dfb\u52a0\u8bf7\u6c42\u4fe1\u606f
\n span.setAttribute('http.method', req.method);
\n span.setAttribute('http.url', req.url);
\n span.setAttribute('http.user_agent', req.get('User-Agent'));<\/p>\n
\/\/ \u54cd\u5e94\u5b8c\u6210\u540e\u6dfb\u52a0\u72b6\u6001\u7801
\n const originalEnd = res.end;
\n res.end = function(…args) {
\n span.setAttribute('http.status_code', res.statusCode);
\n span.setAttribute('http.status_text', res.statusMessage);<\/p>\n
\/\/ \u9519\u8bef\u76f8\u5173\u5c5e\u6027
\n if (res.statusCode >= 400) {
\n span.setAttribute('error', true);
\n span.setAttribute('error.type', `HTTP_${res.statusCode}`);<\/p>\n
if (res.locals.error) {
\n span.setAttribute('error.message', res.locals.error.message);
\n span.setAttribute('error.stack', res.locals.error.stack);
\n }
\n }<\/p>\n
originalEnd.apply(this, args);
\n };
\n }<\/p>\n
next();
\n});<\/p>\n
\/\/ \u4e1a\u52a1\u903b\u8f91\u4e2d\u7684\u8ffd\u8e2a
\nasync function processOrder(orderId) {
\n const tracer = tracerProvider.getTracer('order-service');
\n const span = tracer.startSpan('processOrder', {
\n attributes: {
\n 'order.id': orderId,
\n 'component': 'order-processor'
\n }
\n });<\/p>\n
try {
\n const order = await fetchOrder(orderId);
\n span.addEvent('order_fetched');<\/p>\n
if (!order) {
\n span.setAttribute('error', true);
\n span.setAttribute('error.type', 'ORDER_NOT_FOUND');
\n throw new Error('Order not found');
\n }<\/p>\n
const result = await validateOrder(order);
\n span.addEvent('order_validated');<\/p>\n
return result;
\n } catch (error) {
\n \/\/ \u8bb0\u5f55\u9519\u8bef
\n span.recordException(error);
\n span.setStatus({
\n code: 2, \/\/ ERROR
\n message: error.message
\n });<\/p>\n
throw error;
\n } finally {
\n span.end();
\n }
\n}<\/p>\n
javascript<\/p>\n
\/\/ \u9519\u8bef\u6d88\u606f\u56fd\u9645\u5316
\nclass LocalizedError extends Error {
\n constructor(messageKey, params = {}, statusCode = 500) {
\n super(messageKey);
\n this.name = 'LocalizedError';
\n this.messageKey = messageKey;
\n this.params = params;
\n this.statusCode = statusCode;
\n this.timestamp = new Date();
\n }<\/p>\n
getLocalizedMessage(locale = 'zh-CN') {
\n const messages = {
\n 'zh-CN': {
\n 'USER_NOT_FOUND': '\u7528\u6237\u4e0d\u5b58\u5728',
\n 'INVALID_CREDENTIALS': '\u7528\u6237\u540d\u6216\u5bc6\u7801\u9519\u8bef',
\n 'EMAIL_ALREADY_EXISTS': '\u90ae\u7bb1\u5df2\u88ab\u6ce8\u518c',
\n 'PERMISSION_DENIED': '\u6743\u9650\u4e0d\u8db3',
\n 'NETWORK_ERROR': '\u7f51\u7edc\u8fde\u63a5\u5931\u8d25，\u8bf7\u68c0\u67e5\u7f51\u7edc\u8bbe\u7f6e',
\n 'SERVER_ERROR': '\u670d\u52a1\u5668\u9519\u8bef，\u8bf7\u7a0d\u540e\u91cd\u8bd5',
\n 'VALIDATION_ERROR': '\u8f93\u5165\u9a8c\u8bc1\u5931\u8d25',
\n 'RATE_LIMITED': '\u8bf7\u6c42\u8fc7\u4e8e\u9891\u7e41，\u8bf7\u7a0d\u540e\u91cd\u8bd5',
\n 'MAINTENANCE_MODE': '\u7cfb\u7edf\u7ef4\u62a4\u4e2d，\u8bf7\u7a0d\u540e\u8bbf\u95ee'
\n },
\n 'en-US': {
\n 'USER_NOT_FOUND': 'User not found',
\n 'INVALID_CREDENTIALS': 'Invalid username or password',
\n 'EMAIL_ALREADY_EXISTS': 'Email already exists',
\n 'PERMISSION_DENIED': 'Permission denied',
\n 'NETWORK_ERROR': 'Network connection failed',
\n 'SERVER_ERROR': 'Server error, please try again later',
\n 'VALIDATION_ERROR': 'Validation failed',
\n 'RATE_LIMITED': 'Too many requests, please try again later',
\n 'MAINTENANCE_MODE': 'System under maintenance'
\n },
\n 'ja-JP': {
\n 'USER_NOT_FOUND': '\u30e6\u30fc\u30b6\u30fc\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093',
\n 'INVALID_CREDENTIALS': '\u30e6\u30fc\u30b6\u30fc\u540d\u307e\u305f\u306f\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u9593\u9055\u3063\u3066\u3044\u307e\u3059',
\n 'EMAIL_ALREADY_EXISTS': '\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u306f\u65e2\u306b\u767b\u9332\u3055\u308c\u3066\u3044\u307e\u3059',
\n 'PERMISSION_DENIED': '\u6a29\u9650\u304c\u4e0d\u8db3\u3057\u3066\u3044\u307e\u3059',
\n 'NETWORK_ERROR': '\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u63a5\u7d9a\u306b\u5931\u6557\u3057\u307e\u3057\u305f',
\n 'SERVER_ERROR': '\u30b5\u30fc\u30d0\u30fc\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f',
\n 'VALIDATION_ERROR': '\u5165\u529b\u691c\u8a3c\u306b\u5931\u6557\u3057\u307e\u3057\u305f',
\n 'RATE_LIMITED': '\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u591a\u3059\u304e\u307e\u3059\u3002\u5f8c\u3067\u3082\u3046\u4e00\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044',
\n 'MAINTENANCE_MODE': '\u30b7\u30b9\u30c6\u30e0\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u4e2d\u3067\u3059'
\n }
\n };<\/p>\n
const localeMessages = messages[locale] || messages['en-US'];
\n let message = localeMessages[this.messageKey] || this.messageKey;<\/p>\n
\/\/ \u66ff\u6362\u53c2\u6570
\n Object.keys(this.params).forEach(key => {
\n message = message.replace(`{${key}}`, this.params[key]);
\n });<\/p>\n
return message;
\n }
\n}<\/p>\n
\/\/ \u4f7f\u7528\u793a\u4f8b
\napp.get('\/api\/users\/:id', async (req, res, next) => {
\n try {
\n const user = await User.findById(req.params.id);<\/p>\n
if (!user) {
\n throw new LocalizedError('USER_NOT_FOUND',
\n { userId: req.params.id },
\n 404
\n );
\n }<\/p>\n
res.json(user);
\n } catch (error) {
\n next(error);
\n }
\n});<\/p>\n
\/\/ \u9519\u8bef\u5904\u7406\u4e2d\u95f4\u4ef6
\napp.use((error, req, res, next) => {
\n \/\/ \u83b7\u53d6\u5ba2\u6237\u7aef\u9996\u9009\u8bed\u8a00
\n const acceptLanguage = req.get('Accept-Language');
\n const locale = acceptLanguage?.split(',')[0] || 'zh-CN';<\/p>\n
if (error instanceof LocalizedError) {
\n return res.status(error.statusCode).json({
\n error: {
\n code: error.messageKey,
\n message: error.getLocalizedMessage(locale),
\n params: error.params,
\n timestamp: error.timestamp.toISOString(),
\n documentation: `https:\/\/api.example.com\/docs\/errors\/${error.messageKey}`
\n }
\n });
\n }<\/p>\n
\/\/ \u5904\u7406\u5176\u4ed6\u9519\u8bef
\n const isProduction = process.env.NODE_ENV === 'production';<\/p>\n
res.status(error.statusCode || 500).json({
\n error: {
\n code: 'INTERNAL_ERROR',
\n message: isProduction
\n ? new LocalizedError('SERVER_ERROR').getLocalizedMessage(locale)
\n : error.message,
\n …(!isProduction && { stack: error.stack }),
\n timestamp: new Date().toISOString()
\n }
\n });
\n});<\/p>\n
\u8bed\u4e49\u6b63\u786e\u6027<\/p>\n
\u4e3a\u6bcf\u79cd\u60c5\u51b5\u9009\u62e9\u6700\u51c6\u786e\u7684\u72b6\u6001\u7801<\/p>\n<\/li>\n
\u907f\u514d\u6ee5\u7528200 OK\u8868\u793a\u6240\u6709\u60c5\u51b5<\/p>\n<\/li>\n
\u4f7f\u7528422\u4ee3\u66ff400\u8fdb\u884c\u8f93\u5165\u9a8c\u8bc1\u9519\u8bef<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u7528\u6237\u4f53\u9a8c<\/p>\n
\u63d0\u4f9b\u7528\u6237\u53cb\u597d\u7684\u9519\u8bef\u9875\u9762<\/p>\n<\/li>\n
\u5305\u542b\u6709\u7528\u7684\u64cd\u4f5c\u5efa\u8bae<\/p>\n<\/li>\n
\u652f\u6301\u591a\u8bed\u8a00\u9519\u8bef\u6d88\u606f<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u5b89\u5168\u6027<\/p>\n
\u907f\u514d\u5728\u9519\u8bef\u54cd\u5e94\u4e2d\u6cc4\u9732\u654f\u611f\u4fe1\u606f<\/p>\n<\/li>\n
\u5b9e\u65bd\u9002\u5f53\u7684\u5b89\u5168\u5934<\/p>\n<\/li>\n
\u9632\u6b62\u901a\u8fc7\u9519\u8bef\u4fe1\u606f\u8fdb\u884c\u4fe1\u606f\u6536\u96c6<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u53ef\u89c2\u6d4b\u6027<\/p>\n
\u8bb0\u5f55\u7ed3\u6784\u5316\u7684\u9519\u8bef\u65e5\u5fd7<\/p>\n<\/li>\n
\u76d1\u63a7\u72b6\u6001\u7801\u5206\u5e03<\/p>\n<\/li>\n
\u8bbe\u7f6e\u57fa\u4e8e\u72b6\u6001\u7801\u7684\u544a\u8b66<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u6027\u80fd<\/p>\n
\u5229\u7528\u7f13\u5b58\u76f8\u5173\u72b6\u6001\u7801（304）<\/p>\n<\/li>\n
\u5b9e\u73b0\u9002\u5f53\u7684\u91cd\u8bd5\u673a\u5236<\/p>\n<\/li>\n
\u76d1\u63a7\u6162\u901f\u54cd\u5e94\u4e0e\u9519\u8bef\u7684\u5173\u7cfb<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u517c\u5bb9\u6027<\/p>\n
\u8003\u8651\u65e7\u5ba2\u6237\u7aef\u517c\u5bb9\u6027<\/p>\n<\/li>\n
\u63d0\u4f9b\u9002\u5f53\u7684\u964d\u7ea7\u65b9\u6848<\/p>\n<\/li>\n
\u652f\u6301\u6e10\u8fdb\u5f0f\u589e\u5f3a<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u6d4b\u8bd5<\/p>\n
\u4e3a\u6240\u6709\u72b6\u6001\u7801\u7f16\u5199\u6d4b\u8bd5<\/p>\n<\/li>\n
\u5305\u62ec\u9519\u8bef\u573a\u666f\u6d4b\u8bd5<\/p>\n<\/li>\n
\u5b9e\u65bd\u7aef\u5230\u7aef\u9519\u8bef\u5904\u7406\u6d4b\u8bd5<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
text<\/p>\n
\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 \u6536\u5230\u8bf7\u6c42 \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
\n \u2502
\n \u25bc
\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 \u9a8c\u8bc1\u8bf7\u6c42 \u2502
\n\u2502 – \u8ba4\u8bc1 \u2502
\n\u2502 – \u6388\u6743 \u2502
\n\u2502 – \u8f93\u5165\u9a8c\u8bc1 \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
\n \u2502
\n \u250c\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2510
\n \u2502 \u2502
\n \u25bc \u25bc
\n 401\/403 400\/422
\n \u2502 \u2502
\n \u2502 \u2502
\n \u25bc \u25bc
\n \u8fd4\u56de\u9519\u8bef \u8fd4\u56de\u9519\u8bef
\n \u2502 \u2502
\n \u2502 \u2502
\n \u2514\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2518
\n \u2502
\n \u25bc
\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 \u5904\u7406\u4e1a\u52a1\u903b\u8f91 \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
\n \u2502
\n \u250c\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2510
\n \u2502 \u2502
\n \u25bc \u25bc
\n 404 409
\n \u2502 \u2502
\n \u2502 \u2502
\n \u25bc \u25bc
\n \u8fd4\u56de\u9519\u8bef \u8fd4\u56de\u9519\u8bef
\n \u2502 \u2502
\n \u2502 \u2502
\n \u2514\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2518
\n \u2502
\n \u25bc
\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 \u6267\u884c\u64cd\u4f5c \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
\n \u2502
\n \u250c\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2510
\n \u2502 \u2502
\n \u25bc \u25bc
\n 201 200
\n \u2502 \u2502
\n \u2502 \u2502
\n \u25bc \u25bc
\n \u521b\u5efa\u6210\u529f \u64cd\u4f5c\u6210\u529f
\n \u2502 \u2502
\n \u2502 \u2502
\n \u2514\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2518
\n \u2502
\n \u25bc
\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 \u5f02\u5e38\u5904\u7406 \u2502
\n\u2502 – \u8bb0\u5f55\u9519\u8bef \u2502
\n\u2502 – \u8fd4\u56de500 \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
\n \u2502
\n \u25bc
\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 \u76d1\u63a7\u4e0e\u544a\u8b66 \u2502
\n\u2502 – \u66f4\u65b0\u6307\u6807 \u2502
\n\u2502 – \u89e6\u53d1\u544a\u8b66 \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n
\u79fb\u52a8\u5e94\u7528\u9762\u4e34\u7740\u72ec\u7279\u7684\u7f51\u7edc\u73af\u5883\u6311\u6218：<\/p>\n
\u7f51\u7edc\u4e0d\u7a33\u5b9a\u6027<\/p>\n
\u79fb\u52a8\u7f51\u7edc\u5207\u6362（4G\/5G\/Wi-Fi）<\/p>\n<\/li>\n
\u4fe1\u53f7\u5f3a\u5f31\u53d8\u5316<\/p>\n<\/li>\n
\u9891\u7e41\u7684\u65ad\u7ebf\u91cd\u8fde<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u8d44\u6e90\u9650\u5236<\/p>\n
\u7535\u6c60\u7535\u91cf\u6709\u9650<\/p>\n<\/li>\n
\u5185\u5b58\u548c\u5b58\u50a8\u9650\u5236<\/p>\n<\/li>\n
\u6570\u636e\u6d41\u91cf\u6210\u672c<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u7528\u6237\u4f53\u9a8c\u671f\u671b<\/p>\n
\u5feb\u901f\u54cd\u5e94\u9700\u6c42<\/p>\n<\/li>\n
\u79bb\u7ebf\u529f\u80fd\u652f\u6301<\/p>\n<\/li>\n
\u65e0\u7f1d\u7684\u7528\u6237\u4f53\u9a8c<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
swift<\/p>\n
\/\/ iOS\u7f51\u7edc\u5c42\u8bbe\u8ba1
\nclass NetworkManager {
\n \/\/ \u79fb\u52a8\u7f51\u7edc\u7279\u6709\u7684\u72b6\u6001\u7801\u5904\u7406
\n enum MobileError: Error {
\n case networkUnavailable
\n case poorConnection
\n case rateLimited(retryAfter: TimeInterval)
\n case requestTimeout
\n case serverUnavailable
\n case dataLimitExceeded
\n }<\/p>\n
\/\/ \u7f51\u7edc\u72b6\u6001\u76d1\u6d4b
\n private let monitor = NWPathMonitor()
\n private var currentNetworkType: NetworkType = .unknown<\/p>\n
func setupNetworkMonitoring() {
\n monitor.pathUpdateHandler = { [weak self] path in
\n if path.status == .satisfied {
\n if path.isExpensive {
\n self?.currentNetworkType = .cellular
\n self?.applyCellularNetworkPolicies()
\n } else {
\n self?.currentNetworkType = .wifi
\n }
\n } else {
\n self?.currentNetworkType = .disconnected
\n }
\n }
\n monitor.start(queue: DispatchQueue.global())
\n }<\/p>\n
private func applyCellularNetworkPolicies() {
\n \/\/ \u8702\u7a9d\u7f51\u7edc\u4e0b\u7684\u7b56\u7565
\n \/\/ 1. \u964d\u4f4e\u56fe\u7247\u8d28\u91cf
\n \/\/ 2. \u51cf\u5c11\u9884\u52a0\u8f7d
\n \/\/ 3. \u538b\u7f29\u6570\u636e
\n \/\/ 4. \u9650\u5236\u5927\u6587\u4ef6\u4e0b\u8f7d
\n }
\n}<\/p>\n
kotlin<\/p>\n
\/\/ Android\u91cd\u8bd5\u7b56\u7565\u5b9e\u73b0
\nclass SmartRetryInterceptor : Interceptor {
\n private val maxRetries = 3
\n private val retryDelayBase = 1000L \/\/ 1\u79d2<\/p>\n
override fun intercept(chain: Interceptor.Chain): Response {
\n val request = chain.request()
\n var response: Response? = null
\n var lastException: IOException? = null<\/p>\n
for (attempt in 1..maxRetries) {
\n try {
\n response = chain.proceed(request)<\/p>\n
\/\/ \u6839\u636e\u72b6\u6001\u7801\u51b3\u5b9a\u662f\u5426\u91cd\u8bd5
\n when (response.code) {
\n in 500..599 -> {
\n \/\/ \u670d\u52a1\u5668\u9519\u8bef，\u9700\u8981\u91cd\u8bd5
\n if (attempt < maxRetries) {
\n response.close()
\n delay(calculateBackoff(attempt))
\n continue
\n }
\n }
\n 408 -> { \/\/ \u8bf7\u6c42\u8d85\u65f6
\n if (attempt < maxRetries) {
\n response.close()
\n delay(calculateBackoff(attempt))
\n continue
\n }
\n }
\n 429 -> { \/\/ \u8bf7\u6c42\u8fc7\u591a
\n val retryAfter = response.headers["Retry-After"]?.toLongOrNull()
\n if (retryAfter != null) {
\n response.close()
\n delay(retryAfter * 1000)
\n continue
\n }
\n }
\n 503 -> { \/\/ \u670d\u52a1\u4e0d\u53ef\u7528
\n val retryAfter = response.headers["Retry-After"]?.toLongOrNull()
\n if (retryAfter != null && attempt < maxRetries) {
\n response.close()
\n delay(retryAfter * 1000)
\n continue
\n }
\n }
\n }<\/p>\n
return response<\/p>\n
} catch (e: IOException) {
\n lastException = e<\/p>\n
\/\/ \u7f51\u7edc\u5f02\u5e38，\u6839\u636e\u7f51\u7edc\u7c7b\u578b\u51b3\u5b9a\u662f\u5426\u91cd\u8bd5
\n if (isNetworkErrorRecoverable(e) && attempt < maxRetries) {
\n delay(calculateBackoff(attempt))
\n continue
\n }
\n break
\n }
\n }<\/p>\n
throw lastException ?: IOException("Request failed after $maxRetries attempts")
\n }<\/p>\n
private fun calculateBackoff(attempt: Int): Long {
\n \/\/ \u6307\u6570\u9000\u907f\u7b97\u6cd5
\n return retryDelayBase * (2.0.pow(attempt – 1).toLong())
\n }<\/p>\n
private fun isNetworkErrorRecoverable(e: IOException): Boolean {
\n return when {
\n e is SocketTimeoutException -> true
\n e is ConnectException -> true
\n e.message?.contains("ETIMEDOUT") == true -> true
\n e.message?.contains("ENETUNREACH") == true -> false \/\/ \u7f51\u7edc\u4e0d\u53ef\u8fbe，\u4e0d\u91cd\u8bd5
\n else -> true
\n }
\n }<\/p>\n
private fun delay(millis: Long) {
\n try {
\n Thread.sleep(millis)
\n } catch (e: InterruptedException) {
\n Thread.currentThread().interrupt()
\n }
\n }
\n}<\/p>\n
dart<\/p>\n
\/\/ Flutter\u79bb\u7ebf\u4f18\u5148\u5b9e\u73b0
\nclass OfflineFirstRepository {
\n final LocalDataSource local;
\n final RemoteDataSource remote;
\n final Connectivity connectivity;<\/p>\n
OfflineFirstRepository({
\n required this.local,
\n required this.remote,
\n required this.connectivity,
\n });<\/p>\n
Future<Result<T>> fetchData<T>({
\n required String key,
\n required Future<T> Function() remoteFetch,
\n Duration cacheDuration = const Duration(hours: 1),
\n }) async {
\n \/\/ 1. \u9996\u5148\u5c1d\u8bd5\u4ece\u7f13\u5b58\u83b7\u53d6
\n final cached = await local.get<T>(key);
\n if (cached != null && !isCacheExpired(cached, cacheDuration)) {
\n return Result.success(cached.data, source: DataSource.cache);
\n }<\/p>\n
\/\/ 2. \u68c0\u67e5\u7f51\u7edc\u8fde\u63a5
\n final isConnected = await connectivity.checkConnection();<\/p>\n
if (!isConnected) {
\n \/\/ \u79bb\u7ebf\u72b6\u6001，\u8fd4\u56de\u7f13\u5b58\u6570\u636e\u6216\u9519\u8bef
\n if (cached != null) {
\n return Result.success(
\n cached.data,
\n source: DataSource.cache,
\n isStale: true,
\n );
\n } else {
\n return Result.error(
\n error: NetworkError.offline(),
\n source: DataSource.none,
\n );
\n }
\n }<\/p>\n
try {
\n \/\/ 3. \u7f51\u7edc\u53ef\u7528，\u4ece\u8fdc\u7a0b\u83b7\u53d6
\n final remoteData = await remoteFetch();<\/p>\n
\/\/ 4. \u66f4\u65b0\u7f13\u5b58
\n await local.save(
\n key: key,
\n data: remoteData,
\n timestamp: DateTime.now(),
\n );<\/p>\n
return Result.success(remoteData, source: DataSource.remote);<\/p>\n
} catch (error) {
\n \/\/ 5. \u7f51\u7edc\u8bf7\u6c42\u5931\u8d25，\u56de\u9000\u5230\u7f13\u5b58
\n if (cached != null) {
\n return Result.success(
\n cached.data,
\n source: DataSource.cache,
\n isStale: true,
\n error: error,
\n );
\n } else {
\n return Result.error(
\n error: error,
\n source: DataSource.none,
\n );
\n }
\n }
\n }<\/p>\n
Future<Result<T>> postData<T>({
\n required String endpoint,
\n required dynamic data,
\n required T Function(dynamic) fromJson,
\n }) async {
\n final isConnected = await connectivity.checkConnection();<\/p>\n
if (!isConnected) {
\n \/\/ \u79bb\u7ebf\u72b6\u6001，\u4fdd\u5b58\u5230\u672c\u5730\u961f\u5217
\n final operation = OfflineOperation(
\n id: Uuid().v4(),
\n type: OperationType.post,
\n endpoint: endpoint,
\n data: data,
\n createdAt: DateTime.now(),
\n status: OfflineStatus.pending,
\n );<\/p>\n
await local.saveOfflineOperation(operation);<\/p>\n
return Result.success(
\n fromJson(data), \/\/ \u4e50\u89c2\u66f4\u65b0
\n source: DataSource.local,
\n isOffline: true,
\n offlineOperationId: operation.id,
\n );
\n }<\/p>\n
try {
\n \/\/ \u5728\u7ebf\u72b6\u6001，\u76f4\u63a5\u53d1\u9001
\n final response = await remote.post(endpoint, data);<\/p>\n
if (response.statusCode == 201 || response.statusCode == 200) {
\n final result = fromJson(response.data);
\n return Result.success(result, source: DataSource.remote);
\n } else {
\n throw HttpException(response.statusCode, response.data);
\n }<\/p>\n
} catch (error) {
\n \/\/ \u7f51\u7edc\u9519\u8bef，\u4fdd\u5b58\u5230\u79bb\u7ebf\u961f\u5217
\n if (error is SocketException || error is TimeoutException) {
\n final operation = OfflineOperation(
\n id: Uuid().v4(),
\n type: OperationType.post,
\n endpoint: endpoint,
\n data: data,
\n createdAt: DateTime.now(),
\n status: OfflineStatus.failed,
\n lastError: error.toString(),
\n );<\/p>\n
await local.saveOfflineOperation(operation);<\/p>\n
return Result.success(
\n fromJson(data), \/\/ \u4e50\u89c2\u66f4\u65b0
\n source: DataSource.local,
\n isOffline: true,
\n offlineOperationId: operation.id,
\n error: error,
\n );
\n }<\/p>\n
rethrow;
\n }
\n }<\/p>\n
Future<void> syncOfflineOperations() async {
\n final operations = await local.getPendingOperations();<\/p>\n
for (final operation in operations) {
\n try {
\n dynamic response;<\/p>\n
switch (operation.type) {
\n case OperationType.post:
\n response = await remote.post(operation.endpoint, operation.data);
\n break;
\n case OperationType.put:
\n response = await remote.put(operation.endpoint, operation.data);
\n break;
\n case OperationType.delete:
\n response = await remote.delete(operation.endpoint);
\n break;
\n }<\/p>\n
\/\/ \u540c\u6b65\u6210\u529f，\u6807\u8bb0\u4e3a\u5df2\u5b8c\u6210
\n await local.updateOperationStatus(
\n operation.id,
\n OfflineStatus.completed,
\n );<\/p>\n
} catch (error) {
\n \/\/ \u540c\u6b65\u5931\u8d25，\u66f4\u65b0\u9519\u8bef\u4fe1\u606f
\n await local.updateOperationError(
\n operation.id,
\n error.toString(),
\n );<\/p>\n
\/\/ \u6839\u636e\u9519\u8bef\u7c7b\u578b\u51b3\u5b9a\u662f\u5426\u7ee7\u7eed\u91cd\u8bd5
\n if (error is HttpException && error.statusCode >= 500) {
\n \/\/ \u670d\u52a1\u5668\u9519\u8bef，\u7a0d\u540e\u91cd\u8bd5
\n continue;
\n } else if (error is SocketException) {
\n \/\/ \u7f51\u7edc\u9519\u8bef，\u505c\u6b62\u540c\u6b65
\n break;
\n }
\n }
\n }
\n }
\n}<\/p>\n
swift<\/p>\n
\/\/ iOS\u9519\u8bef\u63d0\u793a\u7ec4\u4ef6
\nclass ErrorToastView: UIView {
\n private let titleLabel = UILabel()
\n private let messageLabel = UILabel()
\n private let iconImageView = UIImageView()
\n private let actionButton = UIButton()
\n private var actionHandler: (() -> Void)?<\/p>\n
enum ErrorType {
\n case networkError
\n case serverError
\n case clientError(Int)
\n case offline
\n case timeout
\n }<\/p>\n
static func show(
\n for error: Error,
\n in viewController: UIViewController,
\n autoDismiss: Bool = true
\n ) {
\n let errorView = ErrorToastView()
\n errorView.configure(with: error)<\/p>\n
\/\/ \u6dfb\u52a0\u5230\u89c6\u56fe
\n viewController.view.addSubview(errorView)<\/p>\n
\/\/ \u52a8\u753b\u663e\u793a
\n UIView.animate(withDuration: 0.3) {
\n errorView.alpha = 1
\n errorView.transform = .identity
\n }<\/p>\n
if autoDismiss {
\n DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
\n errorView.dismiss()
\n }
\n }
\n }<\/p>\n
private func configure(with error: Error) {
\n var title = "\u9519\u8bef"
\n var message = error.localizedDescription
\n var iconName = "exclamationmark.circle"
\n var actionTitle: String? = nil<\/p>\n
if let httpError = error as? HTTPError {
\n switch httpError.statusCode {
\n case 400:
\n title = "\u8bf7\u6c42\u9519\u8bef"
\n message = "\u8bf7\u68c0\u67e5\u8f93\u5165\u5185\u5bb9"
\n iconName = "pencil.circle"<\/p>\n
case 401:
\n title = "\u767b\u5f55\u8fc7\u671f"
\n message = "\u8bf7\u91cd\u65b0\u767b\u5f55"
\n iconName = "person.crop.circle.badge.exclamationmark"
\n actionTitle = "\u91cd\u65b0\u767b\u5f55"
\n actionHandler = { [weak self] in
\n self?.navigateToLogin()
\n }<\/p>\n
case 403:
\n title = "\u6743\u9650\u4e0d\u8db3"
\n message = "\u60a8\u6ca1\u6709\u6743\u9650\u6267\u884c\u6b64\u64cd\u4f5c"
\n iconName = "lock.circle"<\/p>\n
case 404:
\n title = "\u5185\u5bb9\u4e0d\u5b58\u5728"
\n message = "\u60a8\u8bbf\u95ee\u7684\u5185\u5bb9\u53ef\u80fd\u5df2\u88ab\u5220\u9664"
\n iconName = "questionmark.circle"<\/p>\n
case 408:
\n title = "\u8bf7\u6c42\u8d85\u65f6"
\n message = "\u7f51\u7edc\u8fde\u63a5\u8f83\u6162，\u8bf7\u7a0d\u540e\u91cd\u8bd5"
\n iconName = "clock.badge.exclamationmark"
\n actionTitle = "\u91cd\u8bd5"
\n actionHandler = { [weak self] in
\n self?.retryLastRequest()
\n }<\/p>\n
case 429:
\n title = "\u8bf7\u6c42\u8fc7\u4e8e\u9891\u7e41"
\n message = "\u8bf7\u7a0d\u540e\u518d\u8bd5"
\n iconName = "hand.raised.circle"<\/p>\n
case 500..<600:
\n title = "\u670d\u52a1\u5668\u9519\u8bef"
\n message = "\u670d\u52a1\u5668\u6682\u65f6\u4e0d\u53ef\u7528，\u8bf7\u7a0d\u540e\u91cd\u8bd5"
\n iconName = "server.rack"
\n actionTitle = "\u91cd\u8bd5"
\n actionHandler = { [weak self] in
\n self?.retryLastRequest()
\n }<\/p>\n
default:
\n break
\n }<\/p>\n
} else if let networkError = error as? NetworkError {
\n switch networkError {
\n case .noConnection:
\n title = "\u7f51\u7edc\u8fde\u63a5\u5931\u8d25"
\n message = "\u8bf7\u68c0\u67e5\u7f51\u7edc\u8bbe\u7f6e"
\n iconName = "wifi.exclamationmark"
\n actionTitle = "\u8bbe\u7f6e"
\n actionHandler = { [weak self] in
\n self?.openNetworkSettings()
\n }<\/p>\n
case .timeout:
\n title = "\u8fde\u63a5\u8d85\u65f6"
\n message = "\u7f51\u7edc\u54cd\u5e94\u7f13\u6162，\u8bf7\u68c0\u67e5\u7f51\u7edc"
\n iconName = "clock.badge.exclamationmark"<\/p>\n
case .cellularDataRestricted:
\n title = "\u8702\u7a9d\u6570\u636e\u9650\u5236"
\n message = "\u5f53\u524d\u8bbe\u7f6e\u9650\u5236\u4e86\u8702\u7a9d\u6570\u636e\u4f7f\u7528"
\n iconName = "cellularbars"
\n actionTitle = "\u8bbe\u7f6e"
\n actionHandler = { [weak self] in
\n self?.openAppSettings()
\n }
\n }
\n }<\/p>\n
\/\/ \u914d\u7f6eUI
\n titleLabel.text = title
\n messageLabel.text = message
\n iconImageView.image = UIImage(systemName: iconName)<\/p>\n
if let actionTitle = actionTitle {
\n actionButton.setTitle(actionTitle, for: .normal)
\n actionButton.isHidden = false
\n } else {
\n actionButton.isHidden = true
\n }
\n }<\/p>\n
private func navigateToLogin() {
\n \/\/ \u5bfc\u822a\u5230\u767b\u5f55\u9875\u9762
\n dismiss()
\n }<\/p>\n
private func retryLastRequest() {
\n \/\/ \u91cd\u8bd5\u6700\u540e\u4e00\u6b21\u8bf7\u6c42
\n dismiss()
\n }<\/p>\n
private func openNetworkSettings() {
\n if let url = URL(string: "App-Prefs:root=WIFI") {
\n UIApplication.shared.open(url)
\n }
\n dismiss()
\n }<\/p>\n
private func dismiss() {
\n UIView.animate(withDuration: 0.3, animations: {
\n self.alpha = 0
\n self.transform = CGAffineTransform(translationX: 0, y: -20)
\n }) { _ in
\n self.removeFromSuperview()
\n }
\n }
\n}<\/p>\n
kotlin<\/p>\n
\/\/ Android Compose\u72b6\u6001\u7ba1\u7406
\n@Composable
\nfun DataScreen(
\n viewModel: DataViewModel = viewModel()
\n) {
\n val uiState by viewModel.uiState.collectAsState()<\/p>\n
Box(modifier = Modifier.fillMaxSize()) {
\n when (val state = uiState) {
\n is DataUiState.Loading -> {
\n LoadingView()
\n }<\/p>\n
is DataUiState.Success -> {
\n DataListView(data = state.data)
\n }<\/p>\n
is DataUiState.Error -> {
\n when (state.error) {
\n is HttpException -> {
\n when (state.error.code()) {
\n 401 -> {
\n AuthErrorView(
\n message = "\u767b\u5f55\u5df2\u8fc7\u671f",
\n onRetry = { viewModel.retry() },
\n onLogin = { viewModel.navigateToLogin() }
\n )
\n }
\n 403 -> {
\n PermissionErrorView(
\n message = "\u6743\u9650\u4e0d\u8db3",
\n onRequestPermission = { viewModel.requestPermission() }
\n )
\n }
\n 404 -> {
\n NotFoundView(
\n message = "\u5185\u5bb9\u4e0d\u5b58\u5728",
\n onGoBack = { viewModel.navigateBack() }
\n )
\n }
\n 408, 504 -> {
\n TimeoutErrorView(
\n message = "\u8bf7\u6c42\u8d85\u65f6",
\n onRetry = { viewModel.retry() }
\n )
\n }
\n 429 -> {
\n RateLimitView(
\n message = "\u8bf7\u6c42\u8fc7\u4e8e\u9891\u7e41",
\n retryAfter = state.error.getRetryAfter(),
\n onRetry = { viewModel.retry() }
\n )
\n }
\n in 500..599 -> {
\n ServerErrorView(
\n message = "\u670d\u52a1\u5668\u9519\u8bef",
\n onRetry = { viewModel.retry() },
\n onRefresh = { viewModel.refresh() }
\n )
\n }
\n else -> {
\n GenericErrorView(
\n error = state.error,
\n onRetry = { viewModel.retry() }
\n )
\n }
\n }
\n }<\/p>\n
is IOException -> {
\n NetworkErrorView(
\n message = "\u7f51\u7edc\u8fde\u63a5\u5931\u8d25",
\n onRetry = { viewModel.retry() },
\n onCheckNetwork = { viewModel.openNetworkSettings() }
\n )
\n }<\/p>\n
else -> {
\n GenericErrorView(
\n error = state.error,
\n onRetry = { viewModel.retry() }
\n )
\n }
\n }
\n }<\/p>\n
is DataUiState.Offline -> {
\n OfflineView(
\n data = state.cachedData,
\n isStale = state.isStale,
\n onRefresh = { viewModel.refresh() }
\n )
\n }
\n }<\/p>\n
\/\/ \u5168\u5c40\u7f51\u7edc\u72b6\u6001\u6307\u793a\u5668
\n NetworkStatusIndicator(
\n isOnline = viewModel.isOnline,
\n isCellular = viewModel.isCellular
\n )
\n }
\n}<\/p>\n
\/\/ \u7f51\u7edc\u72b6\u6001\u6307\u793a\u5668\u7ec4\u4ef6
\n@Composable
\nfun NetworkStatusIndicator(
\n isOnline: Boolean,
\n isCellular: Boolean
\n) {
\n AnimatedVisibility(
\n visible = !isOnline,
\n enter = slideInVertically(initialOffsetY = { -it }),
\n exit = slideOutVertically(targetOffsetY = { -it })
\n ) {
\n Surface(
\n modifier = Modifier.fillMaxWidth(),
\n color = MaterialTheme.colors.error.copy(alpha = 0.9f)
\n ) {
\n Row(
\n modifier = Modifier
\n .fillMaxWidth()
\n .padding(12.dp),
\n verticalAlignment = Alignment.CenterVertically
\n ) {
\n Icon(
\n imageVector = Icons.Default.CloudOff,
\n contentDescription = "\u79bb\u7ebf",
\n tint = Color.White
\n )<\/p>\n
Spacer(modifier = Modifier.width(8.dp))<\/p>\n
Text(
\n text = if (isCellular) {
\n "\u5f53\u524d\u4f7f\u7528\u8702\u7a9d\u6570\u636e，\u5efa\u8bae\u8fde\u63a5Wi-Fi"
\n } else {
\n "\u7f51\u7edc\u8fde\u63a5\u5df2\u65ad\u5f00"
\n },
\n color = Color.White,
\n fontSize = 14.sp
\n )
\n }
\n }
\n }
\n}<\/p>\n
typescript<\/p>\n
\/\/ React Native\u7f13\u5b58\u7ba1\u7406\u5668
\nclass CacheManager {
\n private cache: AsyncStorage;
\n private maxAge: number;
\n private networkFirstFor: number[]; \/\/ \u8fd9\u4e9b\u72b6\u6001\u7801\u4f18\u5148\u4f7f\u7528\u7f51\u7edc<\/p>\n
constructor() {
\n this.cache = AsyncStorage;
\n this.maxAge = 5 * 60 * 1000; \/\/ 5\u5206\u949f
\n this.networkFirstFor = [401, 403, 404, 422];
\n }<\/p>\n
async get<T>(
\n key: string,
\n fetcher: () => Promise<T>,
\n options: CacheOptions = {}
\n ): Promise<CacheResult<T>> {
\n const {
\n forceNetwork = false,
\n maxAge = this.maxAge,
\n staleWhileRevalidate = true
\n } = options;<\/p>\n
\/\/ 1. \u68c0\u67e5\u7f13\u5b58
\n const cached = await this.getFromCache<T>(key);
\n const isCacheValid = cached && !this.isExpired(cached.timestamp, maxAge);<\/p>\n
\/\/ 2. \u5982\u679c\u5f3a\u5236\u4f7f\u7528\u7f51\u7edc\u6216\u7f13\u5b58\u65e0\u6548，\u76f4\u63a5\u83b7\u53d6\u7f51\u7edc\u6570\u636e
\n if (forceNetwork || !isCacheValid) {
\n return this.fetchAndCache(key, fetcher);
\n }<\/p>\n
\/\/ 3. \u5982\u679c\u7f13\u5b58\u6709\u6548，\u7acb\u5373\u8fd4\u56de\u7f13\u5b58\u6570\u636e
\n const result: CacheResult<T> = {
\n data: cached.data,
\n source: 'cache',
\n timestamp: cached.timestamp
\n };<\/p>\n
\/\/ 4. \u5982\u679c\u9700\u8981，\u5728\u540e\u53f0\u66f4\u65b0\u7f13\u5b58
\n if (staleWhileRevalidate && !this.isExpired(cached.timestamp, maxAge * 2)) {
\n this.backgroundRefresh(key, fetcher);
\n }<\/p>\n
return result;
\n }<\/p>\n
private async fetchAndCache<T>(
\n key: string,
\n fetcher: () => Promise<T>
\n ): Promise<CacheResult<T>> {
\n try {
\n const data = await fetcher();
\n const timestamp = Date.now();<\/p>\n
\/\/ \u4fdd\u5b58\u5230\u7f13\u5b58
\n await this.cache.setItem(
\n key,
\n JSON.stringify({ data, timestamp })
\n );<\/p>\n
return {
\n data,
\n source: 'network',
\n timestamp
\n };<\/p>\n
} catch (error) {
\n \/\/ \u7f51\u7edc\u5931\u8d25，\u5c1d\u8bd5\u8fd4\u56de\u7f13\u5b58
\n const cached = await this.getFromCache<T>(key);<\/p>\n
if (cached) {
\n return {
\n data: cached.data,
\n source: 'cache',
\n timestamp: cached.timestamp,
\n isStale: true,
\n error
\n };
\n }<\/p>\n
throw error;
\n }
\n }<\/p>\n
private async backgroundRefresh(key: string, fetcher: () => Promise<T>) {
\n \/\/ \u4f7f\u7528\u4f4e\u4f18\u5148\u7ea7\u8fdb\u884c\u540e\u53f0\u5237\u65b0
\n InteractionManager.runAfterInteractions(async () => {
\n try {
\n const data = await fetcher();
\n const timestamp = Date.now();<\/p>\n
await this.cache.setItem(
\n key,
\n JSON.stringify({ data, timestamp })
\n );<\/p>\n
\/\/ \u901a\u77e5\u6570\u636e\u5df2\u66f4\u65b0
\n DeviceEventEmitter.emit('cache_updated', { key });<\/p>\n
} catch (error) {
\n console.warn(`Background refresh failed for ${key}:`, error);
\n }
\n });
\n }<\/p>\n
\/\/ \u57fa\u4e8e\u72b6\u6001\u7801\u7684\u7f13\u5b58\u6e05\u7406\u7b56\u7565
\n async handleResponseError(
\n key: string,
\n statusCode: number,
\n error: any
\n ): Promise<void> {
\n switch (statusCode) {
\n case 401: \/\/ \u8ba4\u8bc1\u5931\u8d25
\n case 403: \/\/ \u6743\u9650\u53d8\u66f4
\n \/\/ \u6e05\u9664\u7528\u6237\u76f8\u5173\u7f13\u5b58
\n await this.clearUserRelatedCache();
\n break;<\/p>\n
case 404: \/\/ \u8d44\u6e90\u4e0d\u5b58\u5728
\n \/\/ \u6e05\u9664\u8be5\u8d44\u6e90\u7684\u7f13\u5b58
\n await this.cache.removeItem(key);
\n break;<\/p>\n
case 410: \/\/ \u8d44\u6e90\u5df2\u5220\u9664
\n \/\/ \u6e05\u9664\u7f13\u5b58\u5e76\u6807\u8bb0\u4e3a\u5df2\u5220\u9664
\n await this.cache.setItem(
\n `${key}_deleted`,
\n JSON.stringify({ deletedAt: Date.now() })
\n );
\n await this.cache.removeItem(key);
\n break;<\/p>\n
case 422: \/\/ \u9a8c\u8bc1\u9519\u8bef
\n \/\/ \u4fdd\u7559\u7f13\u5b58，\u4f46\u6807\u8bb0\u4e3a\u53ef\u80fd\u8fc7\u65f6
\n await this.cache.setItem(
\n `${key}_stale`,
\n JSON.stringify({ lastError: error, timestamp: Date.now() })
\n );
\n break;
\n }
\n }
\n}<\/p>\n
swift<\/p>\n
\/\/ iOS\u56fe\u7247\u52a0\u8f7d\u5668
\nclass SmartImageLoader {
\n private let memoryCache = NSCache<NSString, UIImage>()
\n private let diskCache = URLCache.shared
\n private let session: URLSession
\n private let maxConcurrentDownloads = 3<\/p>\n
\/\/ \u7f51\u7edc\u72b6\u51b5\u611f\u77e5\u7684\u56fe\u7247\u8d28\u91cf
\n func optimalImageURL(for originalURL: URL, networkType: NetworkType) -> URL {
\n var components = URLComponents(url: originalURL, resolvingAgainstBaseURL: false)<\/p>\n
switch networkType {
\n case .wifi:
\n \/\/ Wi-Fi\u4e0b\u4f7f\u7528\u9ad8\u8d28\u91cf\u56fe\u7247
\n components?.queryItems = [
\n URLQueryItem(name: "quality", value: "high"),
\n URLQueryItem(name: "width", value: "1080")
\n ]<\/p>\n
case .cellular:
\n \/\/ \u8702\u7a9d\u7f51\u7edc\u4e0b\u4f7f\u7528\u4e2d\u7b49\u8d28\u91cf
\n components?.queryItems = [
\n URLQueryItem(name: "quality", value: "medium"),
\n URLQueryItem(name: "width", value: "720")
\n ]<\/p>\n
case .slow:
\n \/\/ \u6162\u901f\u7f51\u7edc\u4f7f\u7528\u4f4e\u8d28\u91cf
\n components?.queryItems = [
\n URLQueryItem(name: "quality", value: "low"),
\n URLQueryItem(name: "width", value: "480")
\n ]<\/p>\n
case .disconnected:
\n \/\/ \u79bb\u7ebf\u72b6\u6001，\u8fd4\u56de\u5360\u4f4d\u56fe
\n return Bundle.main.url(forResource: "placeholder", withExtension: "png")!
\n }<\/p>\n
return components?.url ?? originalURL
\n }<\/p>\n
func loadImage(
\n from url: URL,
\n into imageView: UIImageView,
\n placeholder: UIImage? = nil
\n ) {
\n let cacheKey = url.absoluteString as NSString<\/p>\n
\/\/ 1. \u68c0\u67e5\u5185\u5b58\u7f13\u5b58
\n if let cachedImage = memoryCache.object(forKey: cacheKey) {
\n imageView.image = cachedImage
\n return
\n }<\/p>\n
\/\/ 2. \u8bbe\u7f6e\u5360\u4f4d\u56fe
\n imageView.image = placeholder<\/p>\n
\/\/ 3. \u68c0\u67e5\u7f51\u7edc\u72b6\u51b5
\n let networkType = NetworkMonitor.shared.currentType
\n let optimalURL = optimalImageURL(for: url, networkType: networkType)<\/p>\n
\/\/ 4. \u5982\u679c\u662f\u79bb\u7ebf\u72b6\u6001\u4e14\u6ca1\u6709\u7f13\u5b58，\u76f4\u63a5\u8fd4\u56de
\n if networkType == .disconnected {
\n \/\/ \u5c1d\u8bd5\u4ece\u78c1\u76d8\u52a0\u8f7d\u4e0a\u6b21\u7f13\u5b58\u7684\u56fe\u7247
\n if let diskCached = loadFromDiskCache(url: url) {
\n imageView.image = diskCached
\n }
\n return
\n }<\/p>\n
\/\/ 5. \u5f02\u6b65\u52a0\u8f7d\u56fe\u7247
\n DispatchQueue.global(qos: .userInitiated).async {
\n let task = self.session.dataTask(with: optimalURL) { [weak self] data, response, error in
\n guard let self = self else { return }<\/p>\n
DispatchQueue.main.async {
\n if let error = error {
\n self.handleImageLoadError(
\n error: error,
\n url: url,
\n imageView: imageView,
\n placeholder: placeholder
\n )
\n return
\n }<\/p>\n
guard let data = data,
\n let image = UIImage(data: data),
\n let response = response else {
\n return
\n }<\/p>\n
\/\/ \u6839\u636e\u72b6\u6001\u7801\u5904\u7406
\n if let httpResponse = response as? HTTPURLResponse {
\n switch httpResponse.statusCode {
\n case 200:
\n \/\/ \u6210\u529f，\u66f4\u65b0UI\u5e76\u7f13\u5b58
\n imageView.image = image
\n self.cacheImage(image, for: cacheKey)<\/p>\n
case 304:
\n \/\/ \u672a\u4fee\u6539，\u4f7f\u7528\u7f13\u5b58
\n if let cached = self.memoryCache.object(forKey: cacheKey) {
\n imageView.image = cached
\n }<\/p>\n
case 404, 410:
\n \/\/ \u56fe\u7247\u4e0d\u5b58\u5728\u6216\u5df2\u5220\u9664
\n imageView.image = UIImage(named: "image_not_found")<\/p>\n
default:
\n \/\/ \u5176\u4ed6\u9519\u8bef
\n imageView.image = placeholder
\n }
\n }
\n }
\n }<\/p>\n
task.resume()
\n }
\n }<\/p>\n
private func handleImageLoadError(
\n error: Error,
\n url: URL,
\n imageView: UIImageView,
\n placeholder: UIImage?
\n ) {
\n if let urlError = error as? URLError {
\n switch urlError.code {
\n case .timedOut:
\n \/\/ \u8d85\u65f6，\u5c1d\u8bd5\u4f7f\u7528\u4f4e\u8d28\u91cf\u7248\u672c
\n if let lowQualityURL = getLowQualityVersion(of: url) {
\n loadImage(from: lowQualityURL, into: imageView, placeholder: placeholder)
\n }<\/p>\n
case .notConnectedToInternet:
\n \/\/ \u65e0\u7f51\u7edc，\u5c1d\u8bd5\u4ece\u78c1\u76d8\u52a0\u8f7d
\n if let diskCached = loadFromDiskCache(url: url) {
\n imageView.image = diskCached
\n } else {
\n imageView.image = placeholder
\n }<\/p>\n
case .cancelled:
\n \/\/ \u8bf7\u6c42\u88ab\u53d6\u6d88，\u5ffd\u7565
\n break<\/p>\n
default:
\n imageView.image = placeholder
\n }
\n } else {
\n imageView.image = placeholder
\n }
\n }
\n}<\/p>\n
java<\/p>\n
\/\/ Android\u5b89\u5168\u9519\u8bef\u5904\u7406
\npublic class SecureErrorHandler {
\n private static final String TAG = "SecureErrorHandler";<\/p>\n
public static void handleException(Context context, Exception exception) {
\n \/\/ \u8bb0\u5f55\u9519\u8bef\u4f46\u4e0d\u6cc4\u9732\u654f\u611f\u4fe1\u606f
\n if (exception instanceof HttpException) {
\n HttpException httpException = (HttpException) exception;<\/p>\n
logSafeError("HTTP Error", httpException.code());<\/p>\n
\/\/ \u6839\u636e\u72b6\u6001\u7801\u663e\u793a\u7528\u6237\u53cb\u597d\u7684\u6d88\u606f
\n String userMessage = getSafeUserMessage(context, httpException.code());<\/p>\n
\/\/ \u663e\u793a\u7ed9\u7528\u6237
\n showUserFriendlyError(context, userMessage);<\/p>\n
} else if (exception instanceof SSLException) {
\n \/\/ SSL\u9519\u8bef，\u53ef\u80fd\u662f\u4e2d\u95f4\u4eba\u653b\u51fb
\n logSafeError("SSL Error", "SSL handshake failed");<\/p>\n
\/\/ \u63d0\u793a\u7528\u6237\u68c0\u67e5\u7f51\u7edc\u5b89\u5168\u6027
\n showSecurityWarning(context);<\/p>\n
} else if (exception instanceof UnknownHostException) {
\n \/\/ DNS\u89e3\u6790\u5931\u8d25
\n logSafeError("Network Error", "Cannot resolve host");<\/p>\n
showUserFriendlyError(
\n context,
\n context.getString(R.string.network_unavailable)
\n );<\/p>\n
} else {
\n \/\/ \u901a\u7528\u9519\u8bef\u5904\u7406
\n logSafeError("Unknown Error", "An unexpected error occurred");<\/p>\n
showUserFriendlyError(
\n context,
\n context.getString(R.string.generic_error)
\n );
\n }
\n }<\/p>\n
private static void logSafeError(String type, Object details) {
\n \/\/ \u5b89\u5168\u7684\u65e5\u5fd7\u8bb0\u5f55，\u907f\u514d\u6cc4\u9732\u654f\u611f\u4fe1\u606f
\n Map<String, Object> safeDetails = new HashMap<>();
\n safeDetails.put("type", type);
\n safeDetails.put("details", details);
\n safeDetails.put("timestamp", System.currentTimeMillis());
\n safeDetails.put("app_version", BuildConfig.VERSION_NAME);<\/p>\n
\/\/ \u79fb\u9664\u53ef\u80fd\u7684\u654f\u611f\u4fe1\u606f
\n if (details instanceof String) {
\n String detailString = (String) details;
\n detailString = sanitizeString(detailString);
\n safeDetails.put("details", detailString);
\n }<\/p>\n
Log.e(TAG, safeDetails.toString());<\/p>\n
\/\/ \u53d1\u9001\u5230\u5b89\u5168\u7684\u9519\u8bef\u6536\u96c6\u670d\u52a1
\n sendToErrorReporting(safeDetails);
\n }<\/p>\n
private static String sanitizeString(String input) {
\n \/\/ \u79fb\u9664\u53ef\u80fd\u654f\u611f\u7684\u4fe1\u606f
\n return input
\n .replaceAll("(?i)password=[^&]*", "password=***")
\n .replaceAll("(?i)token=[^&]*", "token=***")
\n .replaceAll("(?i)api_key=[^&]*", "api_key=***")
\n .replaceAll("\\\\\\\\d{4}-\\\\\\\\d{4}-\\\\\\\\d{4}-\\\\\\\\d{4}", "****-****-****-****") \/\/ \u4fe1\u7528\u5361
\n .replaceAll("\\\\\\\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\\\\\\\.[A-Z|a-z]{2,}\\\\\\\\b", "***@***.***"); \/\/ \u90ae\u7bb1
\n }<\/p>\n
private static String getSafeUserMessage(Context context, int statusCode) {
\n \/\/ \u8fd4\u56de\u7528\u6237\u53cb\u597d\u7684\u9519\u8bef\u6d88\u606f，\u4e0d\u5305\u542b\u6280\u672f\u7ec6\u8282
\n switch (statusCode) {
\n case 400:
\n return context.getString(R.string.error_bad_request);
\n case 401:
\n case 403:
\n return context.getString(R.string.error_authentication);
\n case 404:
\n return context.getString(R.string.error_not_found);
\n case 408:
\n case 504:
\n return context.getString(R.string.error_timeout);
\n case 429:
\n return context.getString(R.string.error_too_many_requests);
\n case 500:
\n case 502:
\n case 503:
\n return context.getString(R.string.error_server);
\n default:
\n return context.getString(R.string.error_generic);
\n }
\n }<\/p>\n
private static void showUserFriendlyError(Context context, String message) {
\n \/\/ \u5728\u4e3b\u7ebf\u7a0b\u663e\u793a\u9519\u8bef
\n new Handler(Looper.getMainLooper()).post(() -> {
\n Toast.makeText(context, message, Toast.LENGTH_LONG).show();
\n });
\n }<\/p>\n
private static void showSecurityWarning(Context context) {
\n \/\/ \u663e\u793a\u5b89\u5168\u8b66\u544a\u5bf9\u8bdd\u6846
\n new Handler(Looper.getMainLooper()).post(() -> {
\n new AlertDialog.Builder(context)
\n .setTitle(R.string.security_warning_title)
\n .setMessage(R.string.security_warning_message)
\n .setPositiveButton(R.string.ok, null)
\n .show();
\n });
\n }
\n}<\/p>\n
javascript<\/p>\n
\/\/ React Native\u7f51\u7edc\u8c03\u8bd5\u5668
\nclass NetworkDebugger {
\n constructor() {
\n this.requests = [];
\n this.maxRequests = 1000;<\/p>\n
\/\/ \u62e6\u622a\u6240\u6709fetch\u8bf7\u6c42
\n this.originalFetch = global.fetch;
\n this.setupInterceptor();
\n }<\/p>\n
setupInterceptor() {
\n global.fetch = async (url, options = {}) => {
\n const startTime = Date.now();
\n const requestId = uuid.v4();<\/p>\n
const requestInfo = {
\n id: requestId,
\n url,
\n method: options.method || 'GET',
\n headers: options.headers || {},
\n body: options.body,
\n startTime,
\n status: 'pending'
\n };<\/p>\n
this.addRequest(requestInfo);<\/p>\n
try {
\n const response = await this.originalFetch(url, options);
\n const endTime = Date.now();<\/p>\n
const responseInfo = {
\n …requestInfo,
\n endTime,
\n duration: endTime – startTime,
\n statusCode: response.status,
\n statusText: response.statusText,
\n headers: Object.fromEntries(response.headers.entries()),
\n status: 'completed'
\n };<\/p>\n
\/\/ \u514b\u9686\u54cd\u5e94\u4ee5\u4fbf\u8bfb\u53d6body
\n const clonedResponse = response.clone();<\/p>\n
\/\/ \u5c1d\u8bd5\u8bfb\u53d6\u54cd\u5e94\u4f53
\n try {
\n const body = await clonedResponse.text();
\n responseInfo.body = this.sanitizeBody(body);
\n } catch (error) {
\n responseInfo.bodyError = 'Unable to read response body';
\n }<\/p>\n
this.updateRequest(requestId, responseInfo);<\/p>\n
\/\/ \u89e6\u53d1\u4e8b\u4ef6
\n this.emit('request_completed', responseInfo);<\/p>\n
return response;<\/p>\n
} catch (error) {
\n const endTime = Date.now();<\/p>\n
const errorInfo = {
\n …requestInfo,
\n endTime,
\n duration: endTime – startTime,
\n error: error.message,
\n status: 'failed'
\n };<\/p>\n
this.updateRequest(requestId, errorInfo);<\/p>\n
\/\/ \u89e6\u53d1\u4e8b\u4ef6
\n this.emit('request_failed', errorInfo);<\/p>\n
throw error;
\n }
\n };
\n }<\/p>\n
addRequest(request) {
\n this.requests.unshift(request);<\/p>\n
\/\/ \u9650\u5236\u8bf7\u6c42\u6570\u91cf
\n if (this.requests.length > this.maxRequests) {
\n this.requests = this.requests.slice(0, this.maxRequests);
\n }<\/p>\n
\/\/ \u5b58\u50a8\u5230AsyncStorage\u4ee5\u4fbf\u79bb\u7ebf\u67e5\u770b
\n AsyncStorage.setItem(
\n 'network_debug_logs',
\n JSON.stringify(this.requests.slice(0, 100))
\n );
\n }<\/p>\n
updateRequest(id, updates) {
\n const index = this.requests.findIndex(req => req.id === id);
\n if (index !== -1) {
\n this.requests[index] = { …this.requests[index], …updates };
\n }
\n }<\/p>\n
sanitizeBody(body) {
\n \/\/ \u79fb\u9664\u654f\u611f\u4fe1\u606f
\n try {
\n const parsed = JSON.parse(body);
\n return this.sanitizeObject(parsed);
\n } catch {
\n \/\/ \u5982\u679c\u4e0d\u662fJSON，\u8fd4\u56de\u539f\u5b57\u7b26\u4e32
\n return body.replace(\/password=[^&]*\/gi, 'password=***')
\n .replace(\/token=[^&]*\/gi, 'token=***');
\n }
\n }<\/p>\n
sanitizeObject(obj) {
\n const sensitiveKeys = ['password', 'token', 'secret', 'key', 'auth'];<\/p>\n
if (Array.isArray(obj)) {
\n return obj.map(item => this.sanitizeObject(item));
\n }<\/p>\n
if (obj !== null && typeof obj === 'object') {
\n const sanitized = {};<\/p>\n
for (const [key, value] of Object.entries(obj)) {
\n if (sensitiveKeys.some(sensitive =>
\n key.toLowerCase().includes(sensitive))) {
\n sanitized[key] = '***';
\n } else if (typeof value === 'object') {
\n sanitized[key] = this.sanitizeObject(value);
\n } else {
\n sanitized[key] = value;
\n }
\n }<\/p>\n
return sanitized;
\n }<\/p>\n
return obj;
\n }<\/p>\n
getStats() {
\n const stats = {
\n total: this.requests.length,
\n success: this.requests.filter(r => r.status === 'completed').length,
\n failed: this.requests.filter(r => r.status === 'failed').length,
\n pending: this.requests.filter(r => r.status === 'pending').length,<\/p>\n
statusCodes: {},
\n averageDuration: 0,
\n byEndpoint: {}
\n };<\/p>\n
\/\/ \u7edf\u8ba1\u72b6\u6001\u7801\u5206\u5e03
\n this.requests.forEach(request => {
\n if (request.statusCode) {
\n const code = request.statusCode;
\n stats.statusCodes[code] = (stats.statusCodes[code] || 0) + 1;
\n }<\/p>\n
\/\/ \u7edf\u8ba1\u63a5\u53e3\u8017\u65f6
\n if (request.duration) {
\n stats.totalDuration = (stats.totalDuration || 0) + request.duration;
\n }<\/p>\n
\/\/ \u6309\u7aef\u70b9\u7edf\u8ba1
\n if (request.url) {
\n const endpoint = this.extractEndpoint(request.url);
\n if (!stats.byEndpoint[endpoint]) {
\n stats.byEndpoint[endpoint] = {
\n count: 0,
\n success: 0,
\n failed: 0,
\n totalDuration: 0
\n };
\n }<\/p>\n
stats.byEndpoint[endpoint].count++;
\n if (request.status === 'completed') {
\n stats.byEndpoint[endpoint].success++;
\n } else if (request.status === 'failed') {
\n stats.byEndpoint[endpoint].failed++;
\n }<\/p>\n
if (request.duration) {
\n stats.byEndpoint[endpoint].totalDuration += request.duration;
\n }
\n }
\n });<\/p>\n
if (stats.success > 0) {
\n stats.averageDuration = stats.totalDuration \/ stats.success;
\n }<\/p>\n
return stats;
\n }<\/p>\n
extractEndpoint(url) {
\n try {
\n const urlObj = new URL(url);
\n return urlObj.pathname;
\n } catch {
\n return url;
\n }
\n }<\/p>\n
\/\/ \u5bfc\u51fa\u4e3acURL\u547d\u4ee4，\u4fbf\u4e8e\u8c03\u8bd5
\n exportAsCurl(requestId) {
\n const request = this.requests.find(req => req.id === requestId);
\n if (!request) return '';<\/p>\n
let curl = `curl -X ${request.method} '${request.url}'`;<\/p>\n
\/\/ \u6dfb\u52a0headers
\n Object.entries(request.headers || {}).forEach(([key, value]) => {
\n curl += ` -H '${key}: ${value}'`;
\n });<\/p>\n
\/\/ \u6dfb\u52a0body
\n if (request.body) {
\n curl += ` -d '${request.body}'`;
\n }<\/p>\n
return curl;
\n }
\n}<\/p>\n
typescript<\/p>\n
\/\/ React Native\u7edf\u4e00\u7f51\u7edc\u5ba2\u6237\u7aef
\nclass RNHttpClient {
\n private baseURL: string;
\n private timeout: number;
\n private retryCount: number;
\n private interceptors: Interceptor[];<\/p>\n
constructor(config: HttpClientConfig) {
\n this.baseURL = config.baseURL;
\n this.timeout = config.timeout || 30000;
\n this.retryCount = config.retryCount || 3;
\n this.interceptors = config.interceptors || [];
\n }<\/p>\n
async request<T>(
\n endpoint: string,
\n options: RequestOptions = {}
\n ): Promise<ApiResponse<T>> {
\n const {
\n method = 'GET',
\n data,
\n headers = {},
\n retry = this.retryCount,
\n timeout = this.timeout,
\n responseType = 'json'
\n } = options;<\/p>\n
const url = `${this.baseURL}${endpoint}`;<\/p>\n
\/\/ \u6267\u884c\u8bf7\u6c42\u62e6\u622a\u5668
\n let requestConfig = { method, url, headers, data, timeout };
\n for (const interceptor of this.interceptors) {
\n if (interceptor.request) {
\n requestConfig = await interceptor.request(requestConfig);
\n }
\n }<\/p>\n
const controller = new AbortController();
\n const timeoutId = setTimeout(() => controller.abort(), timeout);<\/p>\n
try {
\n const fetchOptions: RequestInit = {
\n method: requestConfig.method,
\n headers: {
\n 'Content-Type': 'application\/json',
\n …requestConfig.headers,
\n },
\n signal: controller.signal,
\n };<\/p>\n
if (data && method !== 'GET' && method !== 'HEAD') {
\n fetchOptions.body = JSON.stringify(data);
\n }<\/p>\n
const response = await fetch(requestConfig.url, fetchOptions);
\n clearTimeout(timeoutId);<\/p>\n
\/\/ \u6267\u884c\u54cd\u5e94\u62e6\u622a\u5668
\n let processedResponse = response;
\n for (const interceptor of this.interceptors) {
\n if (interceptor.response) {
\n processedResponse = await interceptor.response(processedResponse);
\n }
\n }<\/p>\n
\/\/ \u5904\u7406\u54cd\u5e94
\n const result = await this.handleResponse<T>(
\n processedResponse,
\n responseType
\n );<\/p>\n
\/\/ \u68c0\u67e5\u662f\u5426\u9700\u8981\u91cd\u8bd5
\n if (this.shouldRetry(result.status, retry)) {
\n return this.retryRequest(endpoint, options, retry – 1);
\n }<\/p>\n
return result;<\/p>\n
} catch (error) {
\n clearTimeout(timeoutId);<\/p>\n
\/\/ \u7f51\u7edc\u9519\u8bef，\u6839\u636e\u9519\u8bef\u7c7b\u578b\u51b3\u5b9a\u662f\u5426\u91cd\u8bd5
\n if (this.isNetworkErrorRetryable(error) && retry > 0) {
\n return this.retryRequest(endpoint, options, retry – 1);
\n }<\/p>\n
throw this.normalizeError(error);
\n }
\n }<\/p>\n
private async handleResponse<T>(
\n response: Response,
\n responseType: ResponseType
\n ): Promise<ApiResponse<T>> {
\n const status = response.status;
\n const headers = Object.fromEntries(response.headers.entries());<\/p>\n
let data: any;
\n let error: any;<\/p>\n
try {
\n if (status >= 200 && status < 300) {
\n \/\/ \u6210\u529f\u54cd\u5e94
\n switch (responseType) {
\n case 'json':
\n data = await response.json();
\n break;
\n case 'text':
\n data = await response.text();
\n break;
\n case 'blob':
\n data = await response.blob();
\n break;
\n case 'arraybuffer':
\n data = await response.arrayBuffer();
\n break;
\n default:
\n data = await response.json();
\n }
\n } else {
\n \/\/ \u9519\u8bef\u54cd\u5e94
\n error = await this.parseError(response);
\n }
\n } catch (parseError) {
\n error = {
\n code: 'PARSE_ERROR',
\n message: 'Failed to parse response',
\n originalError: parseError,
\n };
\n }<\/p>\n
return {
\n status,
\n headers,
\n data,
\n error,
\n ok: status >= 200 && status < 300,
\n };
\n }<\/p>\n
private async parseError(response: Response): Promise<ApiError> {
\n try {
\n const errorData = await response.json();<\/p>\n
\/\/ \u6807\u51c6\u5316\u9519\u8bef\u683c\u5f0f
\n return {
\n code: errorData.code || `HTTP_${response.status}`,
\n message: errorData.message || response.statusText,
\n details: errorData.details,
\n status: response.status,
\n timestamp: new Date().toISOString(),
\n };
\n } catch {
\n \/\/ \u5982\u679c\u65e0\u6cd5\u89e3\u6790\u4e3aJSON，\u8fd4\u56de\u901a\u7528\u9519\u8bef
\n return {
\n code: `HTTP_${response.status}`,
\n message: response.statusText,
\n status: response.status,
\n timestamp: new Date().toISOString(),
\n };
\n }
\n }<\/p>\n
private shouldRetry(status: number, retryCount: number): boolean {
\n if (retryCount <= 0) return false;<\/p>\n
\/\/ \u4ee5\u4e0b\u72b6\u6001\u7801\u9700\u8981\u91cd\u8bd5
\n const retryStatusCodes = [408, 429, 500, 502, 503, 504];<\/p>\n
\/\/ \u5982\u679c\u662f5xx\u9519\u8bef\u6216\u8005\u7279\u5b9a4xx\u9519\u8bef，\u4e14\u8fd8\u6709\u91cd\u8bd5\u6b21\u6570，\u5219\u91cd\u8bd5
\n return retryStatusCodes.includes(status);
\n }<\/p>\n
private isNetworkErrorRetryable(error: any): boolean {
\n \/\/ \u7f51\u7edc\u9519\u8bef\u901a\u5e38\u53ef\u4ee5\u91cd\u8bd5
\n const retryableErrors = [
\n 'AbortError', \/\/ \u8d85\u65f6
\n 'TypeError', \/\/ \u7f51\u7edc\u9519\u8bef
\n 'Network request failed',
\n ];<\/p>\n
return (
\n error.name === 'AbortError' ||
\n retryableErrors.some(msg => error.message?.includes(msg))
\n );
\n }<\/p>\n
private async retryRequest<T>(
\n endpoint: string,
\n options: RequestOptions,
\n retryCount: number
\n ): Promise<ApiResponse<T>> {
\n \/\/ \u6307\u6570\u9000\u907f
\n const delay = Math.pow(2, this.retryCount – retryCount) * 1000;<\/p>\n
await new Promise(resolve => setTimeout(resolve, delay));<\/p>\n
return this.request(endpoint, { …options, retry: retryCount });
\n }<\/p>\n
private normalizeError(error: any): ApiError {
\n if (error.name === 'AbortError') {
\n return {
\n code: 'TIMEOUT',
\n message: 'Request timeout',
\n originalError: error,
\n };
\n }<\/p>\n
if (error.message?.includes('Network request failed')) {
\n return {
\n code: 'NETWORK_ERROR',
\n message: 'Network connection failed',
\n originalError: error,
\n };
\n }<\/p>\n
return {
\n code: 'UNKNOWN_ERROR',
\n message: error.message || 'An unknown error occurred',
\n originalError: error,
\n };
\n }<\/p>\n
\/\/ \u6dfb\u52a0\u62e6\u622a\u5668
\n use(interceptor: Interceptor): void {
\n this.interceptors.push(interceptor);
\n }<\/p>\n
\/\/ \u79fb\u9664\u62e6\u622a\u5668
\n eject(interceptor: Interceptor): void {
\n const index = this.interceptors.indexOf(interceptor);
\n if (index !== -1) {
\n this.interceptors.splice(index, 1);
\n }
\n }
\n}<\/p>\n
\/\/ \u4f7f\u7528\u793a\u4f8b
\nconst httpClient = new RNHttpClient({
\n baseURL: 'https:\/\/api.example.com',
\n timeout: 30000,
\n retryCount: 3,
\n});<\/p>\n
\/\/ \u6dfb\u52a0\u8ba4\u8bc1\u62e6\u622a\u5668
\nhttpClient.use({
\n request: async (config) => {
\n const token = await AsyncStorage.getItem('access_token');
\n if (token) {
\n config.headers.Authorization = `Bearer ${token}`;
\n }
\n return config;
\n },<\/p>\n
response: async (response) => {
\n \/\/ \u68c0\u67e5token\u662f\u5426\u8fc7\u671f
\n if (response.status === 401) {
\n \/\/ \u5c1d\u8bd5\u5237\u65b0token
\n const newToken = await refreshToken();
\n if (newToken) {
\n \/\/ \u66f4\u65b0\u5b58\u50a8
\n await AsyncStorage.setItem('access_token', newToken);
\n \/\/ \u53ef\u4ee5\u5728\u8fd9\u91cc\u91cd\u65b0\u53d1\u9001\u539f\u59cb\u8bf7\u6c42
\n }
\n }
\n return response;
\n },
\n});<\/p>\n
\/\/ \u6dfb\u52a0\u65e5\u5fd7\u62e6\u622a\u5668
\nhttpClient.use({
\n request: async (config) => {
\n console.log('Request:', {
\n url: config.url,
\n method: config.method,
\n headers: config.headers,
\n });
\n return config;
\n },<\/p>\n
response: async (response) => {
\n console.log('Response:', {
\n status: response.status,
\n statusText: response.statusText,
\n headers: Object.fromEntries(response.headers.entries()),
\n });
\n return response;
\n },
\n});<\/p>\n
typescript<\/p>\n
\/\/ React Native\u7f51\u7edc\u6d4b\u8bd5\u5de5\u5177
\ndescribe('Network Handling', () => {
\n let httpClient: RNHttpClient;<\/p>\n
beforeEach(() => {
\n httpClient = new RNHttpClient({
\n baseURL: 'https:\/\/api.example.com',
\n });
\n });<\/p>\n
test('should handle 401 Unauthorized gracefully', async () => {
\n \/\/ \u6a21\u62df401\u54cd\u5e94
\n fetchMock.mockResponseOnce('', { status: 401 });<\/p>\n
const response = await httpClient.request('\/protected');<\/p>\n
expect(response.status).toBe(401);
\n expect(response.error?.code).toBe('HTTP_401');
\n expect(response.ok).toBe(false);
\n });<\/p>\n
test('should retry on 500 error', async () => {
\n \/\/ \u6a21\u62df\u7b2c\u4e00\u6b21500，\u7b2c\u4e8c\u6b21\u6210\u529f
\n fetchMock
\n .mockResponseOnce('', { status: 500 })
\n .mockResponseOnce(JSON.stringify({ success: true }));<\/p>\n
const response = await httpClient.request('\/unstable', { retry: 2 });<\/p>\n
expect(response.status).toBe(200);
\n expect(response.data).toEqual({ success: true });
\n expect(fetchMock).toHaveBeenCalledTimes(2);
\n });<\/p>\n
test('should handle offline mode', async () => {
\n \/\/ \u6a21\u62df\u7f51\u7edc\u9519\u8bef
\n fetchMock.mockReject(new Error('Network request failed'));<\/p>\n
await expect(httpClient.request('\/data')).rejects.toMatchObject({
\n code: 'NETWORK_ERROR',
\n });
\n });<\/p>\n
test('should timeout after specified time', async () => {
\n \/\/ \u6a21\u62df\u957f\u65f6\u95f4\u8bf7\u6c42
\n fetchMock.mockResponse(async () => {
\n await new Promise(resolve => setTimeout(resolve, 40000));
\n return { body: 'OK' };
\n });<\/p>\n
const response = httpClient.request('\/slow', { timeout: 1000 });<\/p>\n
await expect(response).rejects.toMatchObject({
\n code: 'TIMEOUT',
\n });
\n });
\n});<\/p>\n
\/\/ \u7f51\u7edc\u72b6\u6001\u5207\u6362\u6d4b\u8bd5
\ndescribe('Network State Changes', () => {
\n test('should adapt to cellular network', async () => {
\n const imageLoader = new SmartImageLoader();<\/p>\n
\/\/ \u6a21\u62df\u5207\u6362\u5230\u8702\u7a9d\u7f51\u7edc
\n NetworkMonitor.setNetworkType('cellular');<\/p>\n
const url = new URL('https:\/\/example.com\/image.jpg');
\n const optimalURL = imageLoader.optimalImageURL(url, 'cellular');<\/p>\n
expect(optimalURL.searchParams.get('quality')).toBe('medium');
\n expect(optimalURL.searchParams.get('width')).toBe('720');
\n });<\/p>\n
test('should use cached data when offline', async () => {
\n const repository = new OfflineFirstRepository();<\/p>\n
\/\/ \u9884\u52a0\u8f7d\u7f13\u5b58
\n await repository.local.save({
\n key: 'test-data',
\n data: { cached: true },
\n timestamp: Date.now(),
\n });<\/p>\n
\/\/ \u6a21\u62df\u79bb\u7ebf\u72b6\u6001
\n NetworkMonitor.setConnected(false);<\/p>\n
const result = await repository.fetchData({
\n key: 'test-data',
\n remoteFetch: () => Promise.resolve({ fresh: true }),
\n });<\/p>\n
expect(result.source).toBe('cache');
\n expect(result.data).toEqual({ cached: true });
\n expect(result.isStale).toBe(true);
\n });
\n});<\/p>\n
\/\/ \u6027\u80fd\u6d4b\u8bd5
\ndescribe('Network Performance', () => {
\n test('should not exceed maximum concurrent requests', async () => {
\n const loader = new SmartImageLoader();<\/p>\n
\/\/ \u540c\u65f6\u53d1\u8d77\u591a\u4e2a\u8bf7\u6c42
\n const promises = Array(10)
\n .fill(0)
\n .map((_, i) =>
\n loader.loadImage(
\n new URL(`https:\/\/example.com\/image${i}.jpg`),
\n new UIImageView()
\n )
\n );<\/p>\n
\/\/ \u68c0\u67e5\u5e76\u53d1\u6570
\n expect(loader.activeRequests).toBeLessThanOrEqual(loader.maxConcurrentDownloads);<\/p>\n
await Promise.all(promises);
\n });<\/p>\n
test('should cache images appropriately', async () => {
\n const loader = new SmartImageLoader();
\n const imageView = new UIImageView();
\n const url = new URL('https:\/\/example.com\/test.jpg');<\/p>\n
\/\/ \u7b2c\u4e00\u6b21\u52a0\u8f7d
\n await loader.loadImage(url, imageView);
\n expect(loader.memoryCache.object(forKey: url.absoluteString)).toBeDefined();<\/p>\n
\/\/ \u7b2c\u4e8c\u6b21\u5e94\u8be5\u4ece\u7f13\u5b58\u52a0\u8f7d
\n const startTime = Date.now();
\n await loader.loadImage(url, imageView);
\n const endTime = Date.now();<\/p>\n
\/\/ \u7f13\u5b58\u52a0\u8f7d\u5e94\u8be5\u5f88\u5feb
\n expect(endTime – startTime).toBeLessThan(10);
\n });
\n});<\/p>\n
\u4f18\u96c5\u964d\u7ea7<\/p>\n
\u4f18\u5148\u63d0\u4f9b\u529f\u80fd，\u5373\u4f7f\u6570\u636e\u4e0d\u662f\u6700\u65b0\u7684<\/p>\n<\/li>\n
\u7f13\u5b58\u4e0a\u6b21\u6210\u529f\u7684\u7ed3\u679c<\/p>\n<\/li>\n
\u63d0\u4f9b\u79bb\u7ebf\u6a21\u5f0f<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u667a\u80fd\u91cd\u8bd5<\/p>\n
\u6307\u6570\u9000\u907f\u7b97\u6cd5<\/p>\n<\/li>\n
\u6839\u636e\u72b6\u6001\u7801\u51b3\u5b9a\u662f\u5426\u91cd\u8bd5<\/p>\n<\/li>\n
\u8003\u8651\u7f51\u7edc\u7c7b\u578b\u8c03\u6574\u91cd\u8bd5\u7b56\u7565<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u7528\u6237\u4f53\u9a8c\u4f18\u5148<\/p>\n
\u5feb\u901f\u54cd\u5e94\u7528\u6237\u64cd\u4f5c<\/p>\n<\/li>\n
\u63d0\u4f9b\u6709\u610f\u4e49\u7684\u9519\u8bef\u63d0\u793a<\/p>\n<\/li>\n
\u907f\u514d\u963b\u585eUI<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u7f51\u7edc\u4f18\u5316<\/p>\n
\u538b\u7f29\u8bf7\u6c42\u548c\u54cd\u5e94<\/p>\n<\/li>\n
\u6279\u91cf\u5904\u7406\u8bf7\u6c42<\/p>\n<\/li>\n
\u9884\u52a0\u8f7d\u91cd\u8981\u6570\u636e<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u7f13\u5b58\u7b56\u7565<\/p>\n
\u5185\u5b58\u7f13\u5b58 + \u78c1\u76d8\u7f13\u5b58<\/p>\n<\/li>\n
\u57fa\u4e8eTTL\u7684\u8fc7\u671f\u7b56\u7565<\/p>\n<\/li>\n
\u79bb\u7ebf\u961f\u5217\u7ba1\u7406<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u9519\u8bef\u5904\u7406<\/p>\n
\u533a\u5206\u53ef\u6062\u590d\u548c\u4e0d\u53ef\u6062\u590d\u9519\u8bef<\/p>\n<\/li>\n
\u5b89\u5168\u7684\u9519\u8bef\u65e5\u5fd7\u8bb0\u5f55<\/p>\n<\/li>\n
\u7528\u6237\u53cb\u597d\u7684\u9519\u8bef\u6d88\u606f<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
yaml<\/p>\n
\u79fb\u52a8\u5e94\u7528\u7f51\u7edc\u6027\u80fd\u6307\u6807:
\n – \u8bf7\u6c42\u6210\u529f\u7387: > 99%
\n – \u5e73\u5747\u54cd\u5e94\u65f6\u95f4: < 2\u79d2
\n – \u9519\u8bef\u7387: < 1%
\n – \u7f13\u5b58\u547d\u4e2d\u7387: > 60%
\n – \u79bb\u7ebf\u529f\u80fd\u53ef\u7528\u6027: 100%<\/p>\n
\u72b6\u6001\u7801\u5206\u5e03\u76d1\u63a7:
\n – 2xx: > 95%
\n – 4xx: < 3%
\n – 5xx: < 2%<\/p>\n
\u7528\u6237\u4f53\u9a8c\u6307\u6807:
\n – \u9996\u6b21\u52a0\u8f7d\u65f6\u95f4: < 3\u79d2
\n – \u4ea4\u4e92\u54cd\u5e94\u65f6\u95f4: < 100\u6beb\u79d2
\n – \u79bb\u7ebf\u64cd\u4f5c\u6210\u529f\u7387: > 90%<\/p>\n
typescript<\/p>\n
\/\/ 5G\u7f51\u7edc\u611f\u77e5\u7684\u4f18\u5316\u7b56\u7565
\nclass FiveGNetworkOptimizer {
\n private networkInfo: NetworkInformation;<\/p>\n
constructor() {
\n if ('connection' in navigator) {
\n this.networkInfo = (navigator as any).connection;
\n this.setupNetworkMonitoring();
\n }
\n }<\/p>\n
private setupNetworkMonitoring() {
\n this.networkInfo.addEventListener('change', () => {
\n this.adaptToNetworkType();
\n });
\n }<\/p>\n
private adaptToNetworkType() {
\n const { effectiveType, downlink, rtt } = this.networkInfo;<\/p>\n
if (effectiveType === '5g' && downlink > 100) {
\n \/\/ 5G\u9ad8\u901f\u7f51\u7edc
\n this.enableHighQualityStreaming();
\n this.prefetchMoreContent();
\n this.useLessCompression();
\n } else if (effectiveType === '4g') {
\n \/\/ 4G\u7f51\u7edc
\n this.useBalancedStrategy();
\n } else {
\n \/\/ \u6162\u901f\u7f51\u7edc
\n this.useConservativeStrategy();
\n }
\n }<\/p>\n
private enableHighQualityStreaming() {
\n \/\/ \u542f\u7528\u9ad8\u6e05\u89c6\u9891
\n \/\/ \u63d0\u9ad8\u56fe\u7247\u8d28\u91cf
\n \/\/ \u51cf\u5c11\u538b\u7f29\u7387
\n }<\/p>\n
private prefetchMoreContent() {
\n \/\/ \u9884\u52a0\u8f7d\u66f4\u591a\u5185\u5bb9
\n \/\/ \u63d0\u524d\u83b7\u53d6\u4e0b\u4e00\u9875\u6570\u636e
\n \/\/ \u7f13\u5b58\u76f8\u5173\u8d44\u6e90
\n }<\/p>\n
private useLessCompression() {
\n \/\/ \u4f7f\u7528\u539f\u59cb\u8d28\u91cf\u56fe\u7247
\n \/\/ \u51cf\u5c11\u6570\u636e\u538b\u7f29
\n \/\/ \u4f7f\u7528\u66f4\u9ad8\u6548\u4f46\u4e0d\u4e00\u5b9a\u9ad8\u538b\u7f29\u7684\u683c\u5f0f
\n }
\n}<\/p>\n
\u968f\u7740\u8fb9\u7f18\u8ba1\u7b97\u7684\u53d1\u5c55，\u79fb\u52a8\u5e94\u7528\u53ef\u4ee5：<\/p>\n
\u66f4\u4f4e\u7684\u5ef6\u8fdf：\u901a\u8fc7\u8fb9\u7f18\u8282\u70b9\u51cf\u5c11\u7f51\u7edc\u5ef6\u8fdf<\/p>\n<\/li>\n
\u66f4\u597d\u7684\u79bb\u7ebf\u4f53\u9a8c：\u8fb9\u7f18\u7f13\u5b58\u63d0\u4f9b\u66f4\u4e30\u5bcc\u7684\u79bb\u7ebf\u5185\u5bb9<\/p>\n<\/li>\n
\u667a\u80fd\u8def\u7531：\u6839\u636e\u7528\u6237\u4f4d\u7f6e\u9009\u62e9\u6700\u4f18\u670d\u52a1\u8282\u70b9<\/p>\n<\/li>\n
\u5b9e\u65f6\u540c\u6b65：\u8fb9\u7f18\u8282\u70b9\u95f4\u7684\u6570\u636e\u540c\u6b65\u66f4\u5feb\u901f<\/p>\n<\/li>\n
typescript<\/p>\n
\/\/ \u8fb9\u7f18\u8ba1\u7b97\u611f\u77e5\u7684\u8bf7\u6c42\u8def\u7531
\nclass EdgeAwareHttpClient extends RNHttpClient {
\n private edgeNodes: EdgeNode[];
\n private userLocation: Location | null;<\/p>\n
async getOptimalEndpoint(service: string): Promise<string> {
\n if (!this.userLocation) {
\n return `${this.baseURL}\/${service}`;
\n }<\/p>\n
\/\/ \u627e\u5230\u6700\u8fd1\u7684\u8fb9\u7f18\u8282\u70b9
\n const nearestNode = this.findNearestEdgeNode(this.userLocation);<\/p>\n
if (nearestNode) {
\n \/\/ \u68c0\u67e5\u8fb9\u7f18\u8282\u70b9\u5065\u5eb7\u72b6\u6001
\n const isHealthy = await this.checkNodeHealth(nearestNode);<\/p>\n
if (isHealthy) {
\n return `${nearestNode.url}\/${service}`;
\n }
\n }<\/p>\n
\/\/ \u56de\u9000\u5230\u4e3b\u8282\u70b9
\n return `${this.baseURL}\/${service}`;
\n }<\/p>\n
private findNearestEdgeNode(location: Location): EdgeNode | null {
\n let nearest: EdgeNode | null = null;
\n let minDistance = Infinity;<\/p>\n
for (const node of this.edgeNodes) {
\n const distance = this.calculateDistance(location, node.location);
\n if (distance < minDistance) {
\n minDistance = distance;
\n nearest = node;
\n }
\n }<\/p>\n
return nearest;
\n }<\/p>\n
private async checkNodeHealth(node: EdgeNode): Promise<boolean> {
\n try {
\n const response = await fetch(`${node.url}\/health`, {
\n timeout: 5000,
\n });<\/p>\n
return response.ok && response.status === 200;
\n } catch {
\n return false;
\n }
\n }<\/p>\n
async request<T>(
\n endpoint: string,
\n options: RequestOptions = {}
\n ): Promise<ApiResponse<T>> {
\n \/\/ \u83b7\u53d6\u6700\u4f18\u7aef\u70b9
\n const optimalEndpoint = await this.getOptimalEndpoint(endpoint);<\/p>\n
\/\/ \u4f7f\u7528\u7236\u7c7b\u65b9\u6cd5\u53d1\u9001\u8bf7\u6c42
\n return super.request(optimalEndpoint, options);
\n }
\n}<\/p>\n","protected":false},"excerpt":{"rendered":"
\u7b2c30\u7ae0：RESTful API\u8bbe\u8ba1\u4e2d\u7684\u72b6\u6001\u7801\u4f7f\u752830.1 RESTful\u67b6\u6784\u4e0e\u72b6\u6001\u7801\u7684\u54f2\u5b66RESTful API\u8bbe\u8ba1\u4e2d，HTTP\u72b6\u6001\u7801\u4e0d\u4ec5\u662f\u6280\u672f\u5b9e\u73b0\u7ec6\u8282，\u66f4\u662fAPI\u5951\u7ea6\u7684\u91cd\u8981\u7ec4\u6210\u90e8\u5206\u3002\u5b83\u4eec\u6784\u6210\u4e86\u5ba2\u6237\u7aef\u4e0e\u670d\u52a1\u5668\u4e4b\u95f4\u901a\u4fe1\u7684\u8bed\u4e49\u6846\u67b6，\u4f7f\u5f97API\u80fd\u591f\u81ea\u6211\u63cf\u8ff0\u5176\u5904\u7406\u7ed3\u679c\u300230.1.1 Richardson\u6210\u719f\u5ea6\u6a21\u578b\u4e0e\u72b6\u6001\u7801Richardson\u6210\u719f\u5ea6\u6a21\u578b\u5c06RESTful\u670d\u52a1\u5206\u4e3a\u56db\u4e2a\u7b49\u7ea7：Level 0：<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[151,43,191],"topic":[],"class_list":["post-86703","post","type-post","status-publish","format-standard","hentry","category-server","tag-http","tag-43","tag-191"],"yoast_head":"\n