前端怎么调用后端接口

前端调用后端接口的方式有很多种，最常见的方式是通过 AJAX 或 Fetch API 发送 HTTP 请求。以下是一些基本的步骤：

1. 在前端代码中发送 HTTP 请求，使用 XMLHttpRequest 对象或 Fetch API。
2. 后端接收到请求后，根据请求的 URL 地址和参数进行处理，并返回数据。
3. 前端接收到后端返回的数据后，可以对数据进行解析和处理。

具体来说，可以按照以下步骤进行：

1. 在前端代码中定义一个函数，用于发送 HTTP 请求。例如，使用 Fetch API：

function fetchData() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      // 处理返回的数据
    })
    .catch(error => {
      console.error(error)
    })
}

2. 后端接收到请求后，根据请求的 URL 地址和参数进行处理，并返回数据。例如，在 Node.js 中可以使用 Express 框架：

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

app.get('/api/data', (req, res) => {
  // 处理请求并返回数据
  res.json({ message: 'Hello, World!' })
})

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

3. 前端接收到后端返回的数据后，可以对数据进行解析和处理。在上面的例子中，我们使用了 Fetch API 的 Promise 对象来处理返回的数据。可以在 Promise 的 then() 方法中对数据进行处理。例如，将数据渲染到页面上：

function fetchData() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      const message = data.message
      document.getElementById('message').textContent = message
    })
    .catch(error => {
      console.error(error)
    })
}

这样，就完成了前端调用后端接口的基本步骤。当然，在实际开发中还需要考虑请求的安全性、请求参数的处理等问题。