Axios GET 请求：从入门到实践

news2024/9/20 14:38:19

在进行网络请求时，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 请求代码示例：

// 引入 axios const 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 和 category const 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); });

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