Cómo Leer Una API en Laravel 11

4 minuto(s)

En esta página:

En ocasiones necesitamos leer una API con ciertos datos en el framework Laravel.

Hacer esto es fácil, solo debes seguir las indicaciones que daré a continuación.

En este tutorial te enseñaré a Cómo Leer Una API en Laravel 11, vamos con ello.

Leyendo una API de manera correcta con el framework Laravel — El framework Laravel cuenta con métodos propios para leer una API sin problemas

Cómo Leer Una API en Laravel 11

Vamos a realizar una serie de pasos manteniendo las buenas prácticas de Laravel Framework.

Creación de Proyecto con Laravel

Primero creamos un proyecto en Laravel de la forma habitual, no hay nada del otro mundo:


composer create-project laravel/laravel miapp

Creating a "laravel/laravel" project at "./miapp"
Installing laravel/laravel (v11.1.4)
  - Downloading laravel/laravel (v11.1.4)
  - Installing laravel/laravel (v11.1.4): Extracting archive
Created project in D:\contenidos\nc\tutoriales\blog\miapp
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
Lock file operations: 107 installs, 0 updates, 0 removals
  - Locking brick/math (0.12.1)
  - Locking carbonphp/carbon-doctrine-types (3.2.0)

...
... (Continua la creación del proyecto)
...

composer create-project laravel/laravel miapp

Creating a "laravel/laravel" project at "./miapp"

Installing laravel/laravel (v11.1.4)

- Downloading laravel/laravel (v11.1.4)

- Installing laravel/laravel (v11.1.4): Extracting archive

Created project in D:\contenidos\nc\tutoriales\blog\miapp

> @php -r "file_exists('.env') || copy('.env.example', '.env');"

Loading composer repositories with package information

Updating dependencies

Lock file operations: 107 installs, 0 updates, 0 removals

- Locking brick/math (0.12.1)

- Locking carbonphp/carbon-doctrine-types (3.2.0)

...

... (Continua la creación del proyecto)

...

Creación del Controlador para la API

Luego creamos un controlador, yo le daré el nombre APIController a mi controlador, tú le puedes poner el nombre que desees:


php artisan make:controller APIController

INFO  Controller [D:\contenidos\nc\tutoriales\blog\miapp\app\Http\Controllers\APIController.php] created successfully.

php artisan make:controller APIController

INFO Controller [D:\contenidos\nc\tutoriales\blog\miapp\app\Http\Controllers\APIController.php] created successfully.

Luego de ejecutar el comando anterior, Laravel me ha creado el archivo APIController.php en miapp > app > Http > Controllers > APIController.php:


/miapp
    ├── /app
        ├── /Http
            ├── /Controllers
                ├── APIController.php // Este archivo 
    ├── /bootstrap
    ├── /config
    ├── /database 
    ├── /public
    ├── /resources
    ├── /routes
    ├── /storage
    ├── /tests
    ├── /vendor
    ├── .editorconfig
    ├── .env
    ├── .env.example
    ├── .gitattributes
    ├── .gitignore
    ├── artisan
    ├── composer.json
    ├── composer.lock
    ├── package.json
    ├── phpunit.xml
    ├── README.md 
    ├── vite.config

/miapp

├── /app

├── /Http

├── /Controllers

├── APIController.php // Este archivo

├── /bootstrap

├── /config

├── /database

├── /public

├── /resources

├── /routes

├── /storage

├── /tests

├── /vendor

├── .editorconfig

├── .env

├── .env.example

├── .gitattributes

├── .gitignore

├── artisan

├── composer.json

├── composer.lock

├── package.json

├── phpunit.xml

├── README.md

├── vite.config

Abrimos el archivo APIController.php y agregamos el siguiente código (he colocado comentarios para explicar qué hacen las líneas más importantes del código):


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

// Cliente HTTP de Laravel 
use Illuminate\Support\Facades\Http;

class APIController extends Controller
{
    public function index() {
        
        // URL de la API 
        $url = Http::get('https://dog.ceo/api/breeds/image/random');

        // Enviamos los datos a la vista
        return view('datos', compact('url'));

    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

// Cliente HTTP de Laravel

use Illuminate\Support\Facades\Http;

class APIController extends Controller

{

public function index() {

// URL de la API

$url = Http::get('https://dog.ceo/api/breeds/image/random');

// Enviamos los datos a la vista

return view('datos', compact('url'));

}

En el código anterior, sobre el final, estamos enviando los datos a la vista llamada datos.

Creación de la Vista HTML

Vamos a crear esta vista, le colocamos el nombre datos.blade.php, tú le puedes dar el nombre que desees:


/miapp
    ├── /app
    ├── /bootstrap
    ├── /config
    ├── /database 
    ├── /public
    ├── /resources
        ├── /css
        ├── /js
        ├── /views
            ├── datos.blade.php // Creamos y abrimos este archivo 
            ├── welcome.blade.php 
    ├── /routes
    ├── /storage
    ├── /tests
    ├── /vendor
    ├── .editorconfig
    ├── .env
    ├── .env.example
    ├── .gitattributes
    ├── .gitignore
    ├── artisan
    ├── composer.json
    ├── composer.lock
    ├── package.json
    ├── phpunit.xml
    ├── README.md 
    ├── vite.config

/miapp

├── /app

├── /bootstrap

├── /config

├── /database

├── /public

├── /resources

├── /css

├── /js

├── /views

├── datos.blade.php // Creamos y abrimos este archivo

├── welcome.blade.php

├── /routes

├── /storage

├── /tests

├── /vendor

├── .editorconfig

├── .env

├── .env.example

├── .gitattributes

├── .gitignore

├── artisan

├── composer.json

├── composer.lock

├── package.json

├── phpunit.xml

├── README.md

├── vite.config

Abrimos el archivo datos.blade.php y agregamos el código HTML de la vista.

Asimismo, dentro del archivo datos.blade.php llamamos a la variable $url:


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Cómo Leer Una API en Laravel 11</title>

    </head>
    <body>
        <div>
            
            <!-- Cargamos los datos de la API en la vista HTML -->
            {{ $url }}

        </div>
    </body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Cómo Leer Una API en Laravel 11</title>

</head>

<body>

<div>

</div>

</body>

</html>

Para este tutorial estoy usando la Dog API. Puedes obtener más información de la Dog API en su página web.

Creación de la Ruta Para Leer la API

Por último, definimos la ruta en el archivo de rutas web web.php

El archivo web.php se encuentra en miapp > routes > web.php:


/miapp
    ├── /app
    ├── /bootstrap
    ├── /config
    ├── /database 
    ├── /public
    ├── /resources        
    ├── /routes
        ├── console.php
        ├── web.php // Abre este archivo 
    ├── /storage
    ├── /tests
    ├── /vendor
    ├── .editorconfig
    ├── .env
    ├── .env.example
    ├── .gitattributes
    ├── .gitignore
    ├── artisan
    ├── composer.json
    ├── composer.lock
    ├── package.json
    ├── phpunit.xml
    ├── README.md 
    ├── vite.config

/miapp

├── /app

├── /bootstrap

├── /config

├── /database

├── /public

├── /resources

├── /routes

├── console.php

├── web.php // Abre este archivo

├── /storage

├── /tests

├── /vendor

├── .editorconfig

├── .env

├── .env.example

├── .gitattributes

├── .gitignore

├── artisan

├── composer.json

├── composer.lock

├── package.json

├── phpunit.xml

├── README.md

├── vite.config

Abrimos el archivo web.php y definimos la ruta /api (tú le puedes colocar el nombre que desees a tu ruta).

La ruta /api llamada al método index() del controlador APIController:


<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\APIController;

Route::get('/', function () {
    return view('welcome');
});

// Ruta de la API
Route::get('/api', [APIController::class, 'index']);

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\APIController;

Route::get('/', function () {

return view('welcome');

});

// Ruta de la API

Route::get('/api', [APIController::class, 'index']);

Leyendo la API en Laravel

Ejecutamos el servidor de Laravel:


php artisan serve

   INFO  Server running on [http://127.0.0.1:8000].

  Press Ctrl+C to stop the server

php artisan serve

INFO Server running on [http://127.0.0.1:8000].

Press Ctrl+C to stop the server

La API que estoy usando devuelve una imagen aleatoria de un bonito perro.

Entonces, si voy a la ruta http://127.0.0.1:8000/api, podemos ver que obtenemos los datos de la API sin problemas:

Datos de la API obtenidos correctamente — La API que estoy usando se llamada Dog API

Estilizando la Llamada de la API

Ahora haré que la imagen se vea de forma adecuada en la vista HTML.

Laravel cuenta con diferentes métodos y accesorios que nos permiten gestionar la respuesta de una API.

En la respuesta de la API tenemos la key message, esta tiene como valor la URL de una imagen de un bonito perro.

Podemos acceder al valor de la key message definiéndola al final de la url de la API en nuestro controlador APIController (APIController.php):


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

// Cliente HTTP de Laravel 
use Illuminate\Support\Facades\Http;

class APIController extends Controller
{
    public function index() {
        
        // URL de la API (Llamamos a la key 'message') 
        $url = Http::get('https://dog.ceo/api/breeds/image/random')['message'];

        // Enviamos los datos a la vista
        return view('datos', compact('url'));

    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

// Cliente HTTP de Laravel

use Illuminate\Support\Facades\Http;

class APIController extends Controller

{

public function index() {

// URL de la API (Llamamos a la key 'message')

$url = Http::get('https://dog.ceo/api/breeds/image/random')['message'];

// Enviamos los datos a la vista

return view('datos', compact('url'));

}

Y en nuestra vista (datos.blade.php) agregamos lo siguiente:


<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Cómo Leer Una API en Laravel 11</title>

    </head>
    <body>
        <div>
            
            <!-- Mostramos la imagen en la vista HTML -->
            <img src="{{ $url }}">

        </div>
    </body>
</html>