使用Fetch进行HTTP请求的基本示例

服务器端代码

以下是一个简单的Express服务器配置，用于处理不同类型的HTTP请求：

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

// 处理静态资源
app.use(express.static('public'));

// 处理请求体参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 设置跨域访问
app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, mytoken");
  next();
});

// 定义路由
app.get('/fetch-data', (req, res) => {
  res.send('Hello Fetch!');
});

app.get('/axios-data', (req, res) => {
  res.send('Hello Axios!');
});

app.get('/books/:id', (req, res) => {
  res.send(`Restful形式的URL传递参数! ${req.params.id}`);
});

app.delete('/books/:id', (req, res) => {
  res.send(`DELETE请求传递参数! ${req.params.id}`);
});

app.post('/books', (req, res) => {
  res.send(`POST请求传递参数! ${req.body.uname}---${req.body.pwd}`);
});

app.put('/books/:id', (req, res) => {
  res.send(`PUT请求传递参数! ${req.params.id}---${req.body.uname}---${req.body.pwd}`);
});

app.get('/json', (req, res) => {
  res.json({ uname: 'lisi', age: 13, gender: 'male' });
});

// 启动监听
app.listen(3000, () => {
  console.log('Server is running on port 3000...');
});

1. Fetch的基本用法

下面是一个简单的HTML页面，演示了如何使用Fetch API发送GET请求并处理响应：

2. Fetch的请求参数

这里展示了如何通过Fetch发送带有参数的GET请求：

3. Fetch的POST请求传参

以下是通过Fetch发送POST请求并传递JSON数据的示例：

4. Fetch响应结果的数据形式

此部分展示了如何处理Fetch返回的JSON响应：