Solicitudes GET de Axios: de los primeros pasos a la práctica

Axios es una biblioteca de solicitudes muy utilizada cuando se realizan solicitudes de red . Este artículo presentará cómo usar axios para iniciar una solicitud GET y enumerará varias formas de escribir parámetros en detalle. Al mismo tiempo, proporcionará un caso práctico, que incluye el proceso de enrutamiento básico y procesamiento de solicitudes, y garantiza que pueda funcionar sin problemas en el editor IDE.

¿Qué es la solicitud GET de axios?

Antes de comenzar, comprendamos brevemente qué es axios y qué es una solicitud GET.

Introducción a Axios

Axios es un popular cliente HTTP basado en Promise que se puede usar para realizar solicitudes HTTP en navegadores y entornos Node.js. Su facilidad de uso, potentes funciones y amplio soporte de la comunidad lo convierten en una de las herramientas de solicitud web preferidas para el desarrollo front-end.

Concepto de solicitud GET

Una solicitud GET es un método para solicitar datos de un servidor. Cuando necesite obtener datos del servidor, puede usar la solicitud GET. Las solicitudes GET suelen venir con algunos parámetros para especificar las condiciones de la solicitud o filtrar los resultados.

Método de paso de parámetros de solicitud GET de Axios

A continuación, presentaremos en detalle cómo usar axios para realizar solicitudes GET y enumeraremos varias formas de escribir parámetros:

1. Solicitud GET básica

Aquí hay un ejemplo básico de código de solicitud 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. Solicitud GET con parámetros (empalmados directamente en la URL)

Los parámetros de solicitud GET se pueden pasar concatenando parámetros en la URL:

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. Solicitud GET con parámetros (usando el objeto params)

axios también proporciona params opciones de objeto para pasar parámetros en solicitudes 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. Solicitud GET de estilo RESTful

Si usa una API RESTful, es común pasar parámetros directamente como parte de la 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); });

Caso de práctica

Burlándose del servidor con Express.js

Para demostrar el ejemplo de solicitud GET de axios, crearemos un servidor Node.js simple y usaremos el marco Express.js para procesar la solicitud. Asegúrese de tener axios y Express.js instalados en su proyecto antes de ejecutarlo.

Primero, cree un archivo en el directorio del proyecto server.js y agregue el siguiente código:

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}`); });

A continuación, inicie el servidor ejecutando el siguiente comando en la Terminal:

node server.js

Nota: Si se informa un error, asegúrese de que esté instalado express, el comando de instalación esnpm install express

Su servidor ahora debería estar http://localhost:3000 ejecutándose y ser capaz de manejar solicitudes GET.

Finalmente, usaremos axios en el lado del cliente para realizar una solicitud GET. Cree un archivo llamado en el directorio de su proyecto client.js y agregue el siguiente código:

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); });

Ejecute el siguiente comando en una terminal para ejecutar el código del cliente:

node client.js

Si todo va bien, debería poder ver los datos obtenidos del servidor en la consola.

Además, tenemos un método más sencillo, podemos usar Apifox para simular datos simulados y luego client.js iniciar una solicitud en el archivo.

como depurar

API Mock está integrado en Apifox , y podemos simular solicitudes a través de " Cloud Mock" .

Primero, habilite Cloud Mock en el proyecto, y hay una URL de servicio debajo del "botón Habilitar", que es la dirección que se solicitará más adelante:

Luego cree una nueva interfaz y configure las condiciones esperadas y los datos de respuesta en el "Mock avanzado" :

Finalmente, client.jsdespués de que el archivo reescriba la ruta de la solicitud, simplemente inicie la solicitud:

Consejos y precauciones

Al usar axios.get() el método para iniciar una solicitud GET, si se trata de información confidencial (como las credenciales del usuario), se recomienda usar el protocolo HTTPS para proteger la seguridad de los datos.
En el desarrollo real, se recomienda extraer los parámetros de configuración, como las direcciones del servidor y los extremos de la API, en archivos de configuración o variables de entorno para facilitar el mantenimiento y la implementación.

Resumir

Este artículo presenta cómo usar axios para realizar solicitudes GET y muestra cuatro métodos diferentes para pasar parámetros. También demostramos cómo usar Express.js para crear un servidor simple en un entorno Node.js e interactuar con el cliente para obtener datos a través de un caso práctico.

A través de este artículo, espero que los lectores puedan dominar cómo usar axios para iniciar una solicitud GET y comprender el método de pasar parámetros. Con axios, puede interactuar fácilmente con el servidor back-end para obtener datos, brindando una mejor experiencia para el desarrollo front-end.

Expansión del conocimiento:

Link de referencia

Documentación oficial de Axios: Primeros pasos | Axios Docs
Sitio web oficial de Express.js: Express - Marco de aplicación web Node.js