一篇带你搞懂：GET和POST请求获取数据

嘿写bug呢
2,515 阅读9分钟

一篇带你搞懂：GET和POST请求获取数据

当我们使用GET或POST请求从服务器获取数据时，通常需要对获得的数据进行处理和展示。在本篇文章中，我们将讨论在项目中如何使用GET和POST请求获取数据，并介绍如何在获取数据之后对其进行处理和展示。

前置条件

在开始使用GET和POST请求之前，请确保您已经了解了RESTful API的基本原则，包括HTTP请求方法，请求URL，请求标头和请求主体的作用。另外，我们将使用Axios来发送请求，因此您需要了解如何使用Axios发送GET和POST请求。

GET请求示例

在这个示例中，我们将使用GET请求从服务器获取数据，并将其显示在页面上。我们将假设我们正在构建一个名为“用户列表”的Web应用程序，该应用程序将使用从服务器获取的数据来显示用户列表。

第一步：使用Axios发送GET请求

我们将使用Axios发送GET请求来获取用户列表。以下是示例代码：

javascriptCopy code
import axios from 'axios';

axios.get('/users')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在这个示例中，我们向服务器发送一个GET请求，请求的URL是/users。Axios返回一个Promise对象，我们可以使用.then()和.catch()方法来处理响应和错误。

第二步：处理响应数据

在我们成功地获取了响应数据之后，我们需要将其解析并显示在页面上。以下是一个简单的例子，展示了如何处理响应数据并将其显示在列表中：

javascriptCopy code
import axios from 'axios';

axios.get('/users')
  .then(function (response) {
    const users = response.data;

    const userList = document.querySelector('#user-list');
    users.forEach(user => {
      const li = document.createElement('li');
      li.textContent = user.name;
      userList.appendChild(li);
    });
  })
  .catch(function (error) {
    console.log(error);
  });

在这个示例中，我们首先在页面中找到了一个id为user-list的元素，然后遍历了我们获取到的用户列表，并将每个用户的名称添加到一个新的列表项中。最后，我们将每个新的列表项添加到user-list元素中。

POST请求示例

在这个示例中，我们将使用POST请求将新用户添加到服务器，并更新用户列表。我们将假设我们正在构建一个名为“添加用户”的Web应用程序，该应用程序将允许用户添加新用户，并更新用户列表。

第一步：使用Axios发送POST请求

我们将使用Axios发送POST请求来将新用户添加到服务器。以下是示例代码：

javascriptCopy code
import axios from 'axios';

const user = {
  name: 'John',
  age: 30,
  email: 'john@example.com'
};

axios.post('/users', user)
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在这个示例中，我们向服务器发送一个POST请求4. 处理数据

接下来，我们需要对接口返回的数据进行处理。这里我们可以采用一些流行的 JavaScript 库，比如 Lodash，来帮助我们进行数据处理和转换。下面是一个简单的例子：

javascriptCopy code
import _ from 'lodash'

// 请求接口数据
async function fetchData() {
  const { data } = await axios.get('/api/data')
  const transformedData = _.map(data, item => ({
    id: item.id,
    name: item.name,
    age: item.age,
    gender: item.gender === 'M' ? 'Male' : 'Female',
    birthYear: new Date(item.birthdate).getFullYear(),
  }))
  return transformedData
}

// 使用转换后的数据
async function main() {
  const data = await fetchData()
  console.log(data)
}

在这个例子中，我们使用了 Lodash 库的 map() 函数来对返回的数据进行转换，把 gender 的值由 M 和 F 转换为 Male 和 Female，并且把 birthdate 字段转换为出生年份。

  1. 显示数据

最后，我们需要将处理过的数据显示在页面上。这里我们可以使用 Vue、React 或者其他前端框架来构建我们的页面。下面是一个使用 Vue.js 的例子：

vueCopy code
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
          <th>Birth Year</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
          <td>{{ item.birthYear }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
import _ from 'lodash'

export default {
  data() {
    return {
      data: [],
    }
  },
  async mounted() {
    const { data } = await axios.get('/api/data')
    const transformedData = _.map(data, item => ({
      id: item.id,
      name: item.name,
      age: item.age,
      gender: item.gender === 'M' ? 'Male' : 'Female',
      birthYear: new Date(item.birthdate).getFullYear(),
    }))
    this.data = transformedData
  },
}
</script>

在这个例子中，我们首先通过 axios 库发送 GET 请求，然后在 mounted 钩子中将返回的数据转换成我们需要的格式，并且赋值给 Vue 实例的 data 属性。最后，我们使用 v-for 指令来遍历 data 数组，将数据渲染到表格中。

总结

本文中，我们通过一个简单的示例项目，讲解了如何通过 GET 和 POST 请求从后端接口获取数据，并且对数据进行处理和显示。希望通过这篇文章，您可以对前端如何调用接口有一个接下来我们来实现一个通过 POST 调用接口的功能。在这个功能中，我们会使用 axios 库来发送 POST 请求，并且在服务端接收请求后，返回一个 JSON 对象作为响应结果。

在我们的案例中，我们将实现一个用户注册功能。当用户在前端界面填写完自己的注册信息后，我们将通过 POST 请求将该信息发送到后端服务器上，并且在服务器上创建一个新的用户账号。如果创建成功，我们将返回一个包含用户信息的 JSON 对象，否则我们将返回一个包含错误信息的 JSON 对象。

首先，我们需要创建一个后端服务器来处理这个 POST 请求。在这里，我们将使用 Express.js 来实现服务器端的功能。你可以在命令行中输入以下命令来安装 Express.js：

Copy code
npm install express

在安装完成之后，我们可以创建一个新的 JavaScript 文件，将其命名为 server.js，并且编写如下代码：

javascriptCopy code
const express = require('express')
const bodyParser = require('body-parser')

const app = express()

app.use(bodyParser.json())

app.post('/api/register', (req, res) => {
  const { name, email, password } = req.body

  // 在这里添加代码来创建新用户账号

  res.json({
    success: true,
    message: 'User account created successfully',
    user: {
      name,
      email
    }
  })
})

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

在这段代码中，我们首先引入了 Express.js 库，并且创建了一个名为 app 的 Express 实例。我们还使用了 body-parser 中间件来解析请求的 JSON 数据。

接着，我们定义了一个名为 /api/register 的路由，并且指定了该路由可以处理 POST 请求。在处理 POST 请求时，我们从请求体中解析出了用户的姓名、电子邮件地址和密码，并且在此基础上创建了一个新的用户账号。在创建成功后，我们将返回一个包含用户信息的 JSON 对象作为响应结果。

最后，我们通过 app.listen 函数来启动服务器，并且将其绑定到了 3000 端口上。

接下来，我们需要在前端界面中编写代码来调用这个后端接口。我们将使用 Vue.js 框架来编写前端代码，并且使用 axios 库来发送 POST 请求。你可以在命令行中输入以下命令来安装 Vue.js 和 axios 库：

Copy code
npm install vue axios

在安装完成之后，我们可以创建一个新的 Vue.js 项目，并且编写如下代码：

htmlCopy code
<template>
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="name">
    <label for="email">Email:</label>
    <input type="email" id="email" v-model="email">
    <label for="password">Password:</label>
    <input type="password" id="password" v-model="password">
    <button @

当我们成功拿到API返回的数据后，我们需要将其展示在页面上。在这个案例中，我们将会展示这些电影数据到一个电影列表中。

首先，我们需要在HTML页面中定义一个展示电影列表的容器。我们可以使用一个无序列表（<ul>）和列表项（<li>）来展示每一个电影信息。我们还可以使用CSS来美化电影列表的样式。

htmlCopy code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Movie List</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Movie List</h1>
    <ul id="movie-list"></ul>

    <script src="app.js"></script>
  </body>
</html>

接下来，我们可以使用JavaScript动态地向电影列表中添加每一个电影信息。我们可以使用document.createElement()方法创建HTML元素，并使用document.createTextNode()方法创建文本节点来添加电影信息到列表项中。最后，我们将每个列表项添加到电影列表中。

javascriptCopy code
const movieList = document.querySelector("#movie-list");

function addMovie(movie) {
  const li = document.createElement("li");
  const title = document.createTextNode(movie.title);
  const year = document.createTextNode(movie.year);
  const director = document.createTextNode(movie.director);

  li.appendChild(title);
  li.appendChild(year);
  li.appendChild(director);

  movieList.appendChild(li);
}

现在，我们可以在获取到电影数据后，将它们添加到电影列表中。我们需要在getMovies()函数中添加一个回调函数，在成功获取到电影数据后，调用addMovie()函数将其添加到电影列表中。

javascriptCopy code
function getMovies() {
  axios.get("https://my-movie-api.com/movies").then((response) => {
    const movies = response.data;
    movies.forEach((movie) => {
      addMovie(movie);
    });
  });
}

如果我们需要更新电影数据，我们可以使用axios.put()方法来更新电影数据。这里我们仅以修改电影的年份为例进行演示。

javascriptCopy code
function updateMovie(movieId, updatedYear) {
  axios.put(`https://my-movie-api.com/movies/${movieId}`, {
    year: updatedYear,
  }).then(() => {
    // 更新成功后执行的操作
  });
}

如果我们需要新增电影数据，我们可以使用axios.post()方法来新增电影数据。

javascriptCopy code
function addNewMovie(title, year, director) {
  axios.post("https://my-movie-api.com/movies", {
    title: title,
    year: year,
    director: director,
  }).then(() => {
    // 新增成功后执行的操作
  });
}

如果我们需要删除电影数据，我们可以使用axios.delete()方法来删除电影数据。

javascriptCopy code
function deleteMovie(movieId) {
  axios.delete(`https://my-movie-api.com/movies/${movieId}`).then(() => {
    // 删除成功后执行的操作
  });
}

4. 数据渲染

当我们成功地通过接口获取到数据之后，我们需要将其渲染到页面上。在前端开发中，渲染数据通常使用模板引擎来完成。

以Handlebars为例，我们可以定义一个模板，类似于下面的这样：

handlebarsCopy code
<div>
  <h2>{{title}}</h2>
  <p>{{content}}</p>
</div>

然后通过调用模板引擎的渲染方法，将数据和模板进行结合，生成最终的HTML代码：

javascriptCopy code
const source = `
  <div>
    <h2>{{title}}</h2>
    <p>{{content}}</p>
  </div>
`
const template = Handlebars.compile(source)
const data = {
  title: '文章标题',
  content: '文章内容'
}
const html = template(data)
document.body.innerHTML = html

这样就可以将数据渲染到页面上了。

5. 错误处理

在实际开发中，调用接口时可能会出现各种各样的错误，比如网络错误、服务器错误、权限不足等等。为了保证应用程序的稳定性和可靠性，我们需要对这些错误进行适当的处理。

通常情况下，我们会使用try...catch语句来捕获错误，并将错误信息输出到控制台或者展示给用户。

javascriptCopy code
try {
  const response = await axios.get('/api/posts')
  const data = response.data
  // 渲染数据到页面上
} catch (error) {
  console.error(error)
  // 展示错误信息给用户
}

除了使用try...catch语句外，我们还可以使用axios提供的拦截器来处理错误。拦截器可以在请求和响应被处理前对它们进行拦截，从而可以进行一些通用的处理逻辑，比如添加认证信息、展示Loading动画、错误处理等。

javascriptCopy code
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    console.error(error)
    // 展示错误信息给用户
    return Promise.reject(error)
  }
)

结语

通过本文的介绍，我们了解了通过GET和POST两种HTTP方法调用接口的方式，并学习了如何在项目中使用axios库进行HTTP请求。同时，我们还探讨了在获取数据后需要进行的一系列操作，包括数据过滤、排序、分页、渲染和错误处理等。

虽然本文只涉及到了HTTP请求的基础内容，但是在实际开发中，HTTP请求是我们必不可少的工具之一。掌握HTTP请求的基本技能，对于成为一名合格的前端工程师来说，是非常重要的一步。

avatar
文章
阅读
粉丝