axios前后端交互怎么实现

avatar
作者
筋斗云
阅读量:9

要实现前后端交互,可以使用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.getapp.post方法来定义不同的路由,然后通过res.send方法发送响应数据。

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

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!