提升你的前端技能：掌握 Axios 的 GET 请求

作者：Apifox

2023-08-02
广东
本文字数：2367 字
阅读完需：约 8 分钟

在进行网络请求时，axios 是一个非常常用的请求库。本文将介绍如何使用 axios 发起 GET 请求，并详细列出传参的几种写法。同时会提供一个实践案例，其中包含基本路由与请求处理的过程，并确保在 IDE 编辑器中可以顺利运行。

什么是 axios 的 GET 请求？

在开始之前，让我们简要了解一下 axios 是什么以及什么是 GET 请求。

Axios 简介

Axios 是一个流行的基于 Promise 的 HTTP 客户端，可以用于在浏览器和 Node.js 环境中发起 HTTP 请求。它具有易用性、强大的功能和广泛的社区支持，使其成为前端开发中首选的网络请求工具之一。

GET 请求概念

GET 请求是一种向服务器请求数据的方法。当你需要从服务器获取数据时，可以使用 GET 请求。GET 请求通常会附带一些参数，用于指定请求的条件或过滤结果。

Axios 的 GET 请求传参写法

接下来，我们将详细介绍如何使用 axios 进行 GET 请求，并列出几种传参的写法：

1. 基本的 GET 请求

以下是一个基本的 GET 请求代码示例：

// 引入 axiosconst axios = require('axios');
// 发起 GET 请求axios.get('https://api.example.com/data')  .then(response => {    // 请求成功处理    console.log(response.data);  })  .catch(error => {    // 请求失败处理    console.error(error);  });

复制代码

2. 带参数的 GET 请求（直接拼接在 URL 上）

可以通过在 URL 上拼接参数来传递 GET 请求参数：

const axios = require('axios');
// 假设有两个参数：id 和 categoryconst id = 123;const category = 'electronics';
// 使用模板字符串将参数拼接在 URL 上axios.get(`https://api.example.com/data?id=${id}&category=${category}`)  .then(response => {    console.log(response.data);  })  .catch(error => {    console.error(error);  });

复制代码

3. 带参数的 GET 请求（使用 params 对象）

axios 还提供了 params 对象选项，用于在 GET 请求中传递参数：

const axios = require('axios');
// 定义 params 对象const params = {  id: 123,  category: 'electronics'};
// 将 params 对象传递给 GET 请求axios.get('https://api.example.com/data', { params })  .then(response => {    console.log(response.data);  })  .catch(error => {    console.error(error);  });

复制代码

4. RESTful 风格的 GET 请求

如果使用 RESTful 风格的 API，通常会将参数直接作为 URL 的一部分：

const axios = require('axios');
// 假设需要获取 id 为 123 的商品信息const productId = 123;
// 使用 RESTful 风格传递参数axios.get(`https://api.example.com/products/${productId}`)  .then(response => {    console.log(response.data);  })  .catch(error => {    console.error(error);  });

复制代码

实践案例

使用 Express.js 模拟服务器

为了演示 axios 的 GET 请求实例，我们将创建一个简单的 Node.js 服务器，并使用 Express.js 框架处理请求。确保在运行之前，你已经在项目中安装了 axios 和 Express.js。

首先，在项目目录中创建一个 server.js 文件，并添加以下代码：

const express = require('express');const app = express();const port = 3000;
app.get('/data', (req, res) => {  // 假设这是一个模拟的数据  const data = {    id: req.query.id,    category: req.query.category,    message: 'Data retrieved successfully!'  };
  res.json(data);});
app.listen(port, () => {  console.log(`Server is running on http://localhost:${port}`);});

复制代码

接下来，在终端中运行以下命令启动服务器：

node server.js

复制代码

注：如果报错，请确保是否安装了 express，安装命令为npm install express

现在，你的服务器应该在 http://localhost:3000 上运行，并且可以处理 GET 请求。

最后，我们将在客户端使用 axios 发起 GET 请求。在项目目录中创建一个名为 client.js 的文件，并添加以下代码：

const axios = require('axios');
// 假设有两个参数：id 和 category  const id = 123;  const category = 'electronics';
axios.get('<http://localhost:3000/data>', { params: { id, category } })  .then(response => {  console.log(response.data);  })  .catch(error => {  console.error(error);  });

复制代码

在终端中运行以下命令来运行客户端代码：

node client.js

复制代码

如果一切顺利，你应该能够在控制台中看到从服务器获取的数据。

除此之外，我们还有更简便的方法，我们可以通过 Apifox 来模拟 Mock 数据，然后在 client.js 文件发起请求。

如何调试

Apifox 中集成了 API Mock，我们可以通过“云端 Mock” 来模拟请求。

首先在项目里开启云端 Mock，在“启用按钮”下方有一条服务 URL，这就是等会儿要请求的地址：

然后新建一条接口，并在 “高级 Mock” 里设置期望条件以及响应数据：

最后在client.js文件改写请求路径后，发起请求即可：

提示与注意事项

使用 axios.get() 方法发起 GET 请求时，如果涉及到敏感信息（如用户凭据），建议使用 HTTPS 协议来保护数据安全。
在实际开发中，建议将服务器地址、API 端点等配置参数提取到配置文件或环境变量中，以便于维护和部署。

总结

本文介绍了如何使用 axios 进行 GET 请求，并展示了四种不同的传参写法。我们还通过一个实践案例演示了如何在 Node.js 环境中使用 Express.js 创建简单的服务器，并与客户端进行数据交互。

通过本文，希望读者能够掌握 axios 发起 GET 请求的使用方法，并对传参写法有所了解。使用 axios，你可以轻松地与后端服务器进行数据交互，为前端开发带来更好的体验。

知识扩展：

参考链接

axios 官方文档：https://axios-http.com/docs/intro
Express.js 官方网站：https://expressjs.com/

发布于: 刚刚阅读数: 3

Apifox

关注

Apifox 2022-05-17 加入

Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化平台。Apifox = Postman + Swagger + Mock + JMeter

发布

暂无评论

创作场景

提升你的前端技能：掌握 Axios 的 GET 请求

什么是 axios 的 GET 请求？

Axios 简介

GET 请求概念

Axios 的 GET 请求传参写法

1. 基本的 GET 请求

2. 带参数的 GET 请求（直接拼接在 URL 上）

3. 带参数的 GET 请求（使用 params 对象）

4. RESTful 风格的 GET 请求

实践案例

使用 Express.js 模拟服务器

如何调试

提示与注意事项

总结

Apifox

评论