axios前后端交互怎么实现

要实现前后端交互，可以使用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需要根据实际情况进行修改，以匹配后端服务器的路由设置。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！