【WEB开发】Flask的request对象获取HTTP请求的数据

Flask 中的 request 对象提供了多种方法,用于获取 HTTP 请求中的数据。以下是常用的 request 方法及其功能、示例代码,以及与之对应的前端 fetch 请求示例。


1. request.get_data()

  • 功能: 获取 HTTP 请求体的原始数据(bytes 类型),无视请求头内容。
  • 适用场景: 用于接收非标准格式(如二进制文件或自定义协议)的请求数据。

Flask 后端:

python 复制代码
@app.route('/upload', methods=['POST'])
def upload():
    raw_data = request.get_data()  # 获取原始二进制数据
    with open('uploaded_file.bin', 'wb') as f:
        f.write(raw_data)  # 保存到文件
    return 'Data received!'

前端 fetch 示例:

javascript 复制代码
const binaryData = new Uint8Array([0x01, 0x02, 0x03]); // 模拟二进制数据
fetch('/upload', {
    method: 'POST',
    body: binaryData,
});

2. request.get_json()

  • 功能: 解析 JSON 数据并返回字典对象。
  • 适用场景: 客户端发送 application/json

式的数据请求。

Flask 后端:

python 复制代码
@app.route('/json', methods=['POST'])
def process_json():
    json_data = request.get_json()  # 自动解析 JSON 数据为 Python 字典
    name = json_data.get('name', 'Unknown')
    age = json_data.get('age', 0)
    return f"Received name: {name}, age: {age}"

前端 fetch 示例:

javascript 复制代码
fetch('/json', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({ name: 'Alice', age: 30 }),
});

3. request.form

  • 功能: 获取 application/x-www-form-urlencodedmultipart/form-data 格式的表单数据。
  • 适用场景: 表单提交或模拟表单方式传递数据。

Flask 后端:

python 复制代码
@app.route('/form', methods=['POST'])
def process_form():
    name = request.form.get('name')  # 获取表单字段
    age = request.form.get('age')
    return f"Form data - Name: {name}, Age: {age}"

前端 fetch 示例:

javascript 复制代码
const formData = new URLSearchParams();
formData.append('name', 'Bob');
formData.append('age', '25');

fetch('/form', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: formData,
});

4. request.args

  • 功能: 获取 URL 查询字符串参数。
  • 适用场景: 处理 GET 请求的查询参数。

Flask 后端:

python 复制代码
@app.route('/query', methods=['GET'])
def process_query():
    name = request.args.get('name', 'Guest')  # 从查询参数获取数据
    age = request.args.get('age', 'unknown')
    return f"Query data - Name: {name}, Age: {age}"

前端 fetch 示例:

javascript 复制代码
fetch('/query?name=Eve&age=22', {
    method: 'GET',
});

5. request.files

  • 功能: 获取上传的文件对象。
  • 适用场景: 文件上传处理。

Flask 后端:

python 复制代码
@app.route('/upload_file', methods=['POST'])
def upload_file():
    file = request.files['file']  # 获取文件对象
    file.save(f"./uploads/{file.filename}")  # 保存到本地
    return f"File {file.filename} uploaded successfully!"

前端 fetch 示例:

javascript 复制代码
const fileInput = document.querySelector('input[type="file"]');
const formData = new FormData();
formData.append('file', fileInput.files[0]);

fetch('/upload_file', {
    method: 'POST',
    body: formData,
});

6. request.json

  • 功能: 获取 JSON 数据的快捷方式,相当于 request.get_json()

Flask 后端:

python 复制代码
@app.route('/json_short', methods=['POST'])
def json_short():
    json_data = request.json
    return f"Received: {json_data}"

7. request.values

  • 功能: 同时获取表单数据(form)和查询参数(args),优先返回表单数据。
  • 适用场景: 混合数据传递。

Flask 后端:

python 复制代码
@app.route('/values', methods=['GET', 'POST'])
def process_values():
    value = request.values.get('key', 'default')
    return f"Value: {value}"

前端 fetch 示例:

javascript 复制代码
fetch('/values?key=queryValue', {
    method: 'POST',
    body: new URLSearchParams({ key: 'formValue' }),
});

8. request.headers

  • 功能: 获取请求头的键值对。
  • 适用场景: 检查客户端传递的自定义头部。

Flask 后端:

python 复制代码
@app.route('/headers', methods=['GET'])
def process_headers():
    user_agent = request.headers.get('User-Agent', 'Unknown')
    return f"User-Agent: {user_agent}"

前端 fetch 示例:

javascript 复制代码
fetch('/headers', {
    method: 'GET',
    headers: {
        'Custom-Header': 'HeaderValue',
    },
});

9. request.cookies

  • 功能: 获取客户端发送的 Cookie 数据。
  • 适用场景: 处理用户会话或持久化信息。

Flask 后端:

python 复制代码
@app.route('/cookies', methods=['GET'])
def process_cookies():
    session_id = request.cookies.get('session_id', 'No Session')
    return f"Session ID: {session_id}"

前端 fetch 示例:

javascript 复制代码
document.cookie = "session_id=12345";
fetch('/cookies', {
    method: 'GET',
    credentials: 'include', // 包含 Cookies
});

10. request.stream

  • 功能: 逐步读取请求体数据(io.BytesIO 对象)。
  • 适用场景: 处理大文件或流式数据。

Flask 后端:

python 复制代码
@app.route('/stream', methods=['POST'])
def process_stream():
    raw_data = b""
    for chunk in request.stream:
        raw_data += chunk
    return f"Received {len(raw_data)} bytes"

前端 fetch 示例:

javascript 复制代码
const data = new Uint8Array(1024 * 1024); // 模拟 1MB 数据
fetch('/stream', {
    method: 'POST',
    body: data,
});

总结表:

方法 功能 常见 fetch Headers 和 Body
get_data() 获取原始请求体(bytes body: binaryData
get_json() 获取 JSON 数据并解析为字典 headers: {'Content-Type': 'application/json'}, body: JSON
form 获取表单数据 headers: {'Content-Type': 'application/x-www-form-urlencoded'}
args 获取查询字符串参数 URL?key=value
files 获取上传文件对象 body: formData
json 获取 JSON 数据 get_json()
values 获取表单和查询参数的组合 混合 GET/POST 请求
headers 获取请求头 headers: {'Custom-Header': 'value'}
cookies 获取客户端 Cookie credentials: 'include'
stream 流式读取请求体 body: largeData
相关推荐
前端一课几秒前
分享:基于Next.js的企业级提示词AI平台
前端
小高0072 分钟前
🔥「从零到一」我用 Node BFF 手撸一个 Vue3 SSR 项目(附源码)
前端·javascript·vue.js
SailingCoder4 分钟前
AI 流式对话该怎么做?SSE、fetch、axios 一次讲清楚
前端·javascript·人工智能·ai·node.js
hxjhnct8 分钟前
Vue 实现多行文本“展开收起”
前端·javascript·vue.js
橙子的AI笔记10 分钟前
2025年全球最受欢迎的JS鉴权框架Better Auth,3分钟带你学会
前端·ai编程
百锦再10 分钟前
Vue大屏开发全流程及技术细节详解
前端·javascript·vue.js·微信小程序·小程序·架构·ecmascript
独自破碎E14 分钟前
你知道Spring Boot配置文件的加载优先级吗?
前端·spring boot·后端
一树山茶16 分钟前
Vue变化响应
前端
黑土豆19 分钟前
一次真实的流式踩坑:fetchEventSource vs fetch流读取的本质区别
前端·javascript·ai编程