axios前后端交互怎么实现-开发者知识库平台

axios前后端交互怎么实现

axios

380

2024/1/18 10:45:01

栏目: 编程语言

要实现前后端交互，可以使用axios来发送HTTP请求和接收响应。

在前端，可以使用以下代码来发送请求：

import axios from 'axios';

axios.get('/api/data')  // 发送GET请求
  .then(response => {
    console.log(response.data);  // 处理响应数据
  })
  .catch(error => {
    console.error(error);  // 处理错误
  });

axios.post('/api/data', { name: 'John', age: 25 })  // 发送POST请求
  .then(response => {
    console.log(response.data);  // 处理响应数据
  })
  .catch(error => {
    console.error(error);  // 处理错误
  });

在后端，可以使用以下代码来处理请求并发送响应：

const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {   // 处理GET请求
  res.send({ message: 'Hello World!' });  // 发送响应数据
});

app.post('/api/data', (req, res) => {   // 处理POST请求
  const { name, age } = req.body;  // 获取请求体中的数据
  // 处理数据
  res.send({ message: `Hello ${name}, you are ${age} years old!` });  // 发送响应数据
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

以上代码使用了Express框架来创建一个简单的服务器。通过使用app.get和app.post方法来定义不同的路由，然后通过res.send方法发送响应数据。

在前端的axios请求中，请求的URL需要根据实际情况进行修改，以匹配后端服务器的路由设置。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

axios前后端交互怎么实现

最新知识库

相关标签