如何将信息从 JavaScript 发送到烧瓶路由 - TypeScript

在前端开发中，经常需要将信息从 JavaScript 应用程序发送到后端的 API。烧瓶（Flask）是一个流行的 Python Web 框架，提供了路由来处理来自前端的请求。对于 TypeScript 开发者来说，这意味着需要找到一种方法来将信息从 TypeScript/JavaScript 发送到 Flask 路由。本文将介绍如何通过使用 JavaScript 的 fetch 函数和 TypeScript 来实现这一过程。

1. 安装 Flask

首先，确保已在本地安装了 Flask。可以通过运行以下命令来安装 Flask：

pip install flask

2. 创建 Flask 应用

接下来，创建一个简单的 Flask 应用。在项目目录中创建一个名为 app.py 的文件，并添加以下代码：

from flask import Flask, request

app = Flask(__name__)

@app.route('/api', methods=['POST'])
def receive_data():
    data = request.json
    print(data)  # 将数据打印到终端
    return 'Data received'

if __name__ == '__main__':
    app.run(debug=True)

这个简单的 Flask 应用会创建一个 /api 路由，使用 POST 方法接收来自前端的数据，并将数据打印到终端。在实际应用中，可以根据需求来操作这些数据。

3. 使用 TypeScript 发送数据

在 TypeScript 中使用 fetch 函数发送数据到 Flask 路由。创建一个名为 index.ts 的文件，并添加以下代码：

const sendData = async () => {
  const data = { message: "Hello Flask!" };
  
  const response = await fetch('/api', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  
  if (response.ok) {
    console.log('Data sent successfully');
    const result = await response.text();
    console.log(result);
  } else {
    console.error('Failed to send data');
  }
};

sendData();

这段代码使用了 async/await 来发送数据到 /api 路由。它设置了请求的方法和头部，并将数据作为 JSON 发送。如果数据发送成功，将打印出 "Data sent successfully" 和来自服务器的响应。

确保在项目根目录中运行 TypeScript 编译器来编译 TypeScript 文件：

tsc index.ts

然后，你可以通过运行以下命令来启动 Flask 应用：

python app.py

打开浏览器控制台，你将看到 "Data sent successfully" 和从服务器返回的响应结果。

以 Markdown 形式提供的代码片段如下：

```typescript
const sendData = async () => {
  const data = { message: "Hello Flask!" };
  
  const response = await fetch('/api', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  
  if (response.ok) {
    console.log('Data sent successfully');
    const result = await response.text();
    console.log(result);
  } else {
    console.error('Failed to send data');
  }
};

sendData();