4 与 JavaScript 一起使用 API Rest 的方法是什么？如何使用 API Rest？一个例子

2025-06-07

4 Maneras de llamar 与 JavaScript 的 una API Rest

什么是 API Rest？

例子

什么是 API Rest？

第 4 版中关于 JavaScript 的 API Rest 的操作，可以与 API Rest 一样，与BBVAAPIMarket的定义进行比较，在 Esencia 中，API Rest 是允许其他应用程序通信的接口que hagamos una petición, puede ser para obtener datos, añadir datos, borrar…

例子

PokéApi是一个与玩家相关的 API，其变化规律与 « https://pokeapi.co/api/v2/pokemon/ditto»的变化规律相同。 Puedes probar esta ruta simplemente desde tu navegador。您可以使用 JSON 来获取 Pokemon 的所有数据。
Manera de llamar 与 JavaScript PokéApi 的 una API Rest

与 JavaScript Navegador 一起使用 API Rest 的 Primera manera de llamar

4 Maneras de llamar 与 JavaScript 的 una API Rest

现在，您可以使用 JavaScript 的 4 版 Maneras de llamar 和 una API Rest，所有这些都可以为您提供帮助。

1. XMLHttp请求（AJAX）

获取数据的首要形式是XMLHttpRequest，它是 Microsoft 和 Mozilla、Apple 和 Google 所采用的 JavaScript 对象。

这是W3C 的标准。 Seguro 具有 AJAX（异步 JavaScript 和 XML）程序的功能，它是一种与技术结合使用的程序形式，允许创建更多的恐龙页面，并在后端获取新的数据以完成完整的页面。

AJAX 令人难以置信，在今天的页面中，Webs 已经对后端进行了必要的重新设置，实际的页面是在 2005 年创建的。



// Creamos un nuevo XMLHttpRequest
var xhttp = new XMLHttpRequest();

// Esta es la función que se ejecutará al finalizar la llamada
xhttp.onreadystatechange = function() {
  // Si nada da error
  if (this.readyState == 4 && this.status == 200) {
    // La respuesta, aunque sea JSON, viene en formato texto, por lo que tendremos que hace run parse
    console.log(JSON.parse(this.responseText));
  }
};

// Endpoint de la API y método que se va a usar para llamar
xhttp.open("GET", "https://pokeapi.co/api/v2/pokemon", true);
xhttp.setRequestHeader("Content-type", "application/json");
// Si quisieramos mandar parámetros a nuestra API, podríamos hacerlo desde el método send()
xhttp.send(null);
Enter fullscreen mode Exit fullscreen mode

De esta manera obtenemos el siguiente resultado:

API Rest 的 JSON 结果

2. 获取

获取JavaScript 的新实现，不允许使用XMLHttpRequest来处理更多问题，但由于新的功能，Internet Explorer 中没有任何功能，但是，这对于现代项目的可移植性来说是一个问题。



fetch('https://pokeapi.co/api/v2/pokemon')
      .then(response => response.json())
      .then(json => console.log(json));
Enter fullscreen mode Exit fullscreen mode

与 XMLHttpRequest 前面的代码相比，我们获得了更好的结果，不需要在即时获取中导入，简单来说就是 llama😮。

3. Axios

快点，XMLHttpRequest可以获取 JavaScript 原生的内容，但Axios是一个外部库，它是我们的项目中最重要的。



<head>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

Una vez importada, podrás usarla en tu proyecto.



axios.get('https://pokeapi.co/api/v2/pokemon')
  .then(function (response) {
    // función que se ejecutará al recibir una respuesta
    console.log(response);
  })
  .catch(function (error) {
    // función para capturar el error
    console.log(error);
  })
  .then(function () {
    // función que siempre se ejecuta
  });
Enter fullscreen mode Exit fullscreen mode

¿Por qué se usa tanto Axios？想要获得完美的效果，我的项目中是否有一个更重要的图书馆？

首先，Fetch 是新的，没有任何新的实现项目，该项目使用旧的技术，并且受到限制，与 Axios 的关系非常好。

但是，出于这样的动机，Axios 允许您在退出时允许美洲驼超时。

Axios 自动解析 JSON 的另一个动机非常重要。



// axios
axios.get('https://pokeapi.co/api/v2/pokemon')
  .then(response => {
    console.log(response.data); // response.data ya es un JSON
  }, error => {
    console.log(error);
  });

// fetch()
fetch('https://pokeapi.co/api/v2/pokemon')
  .then(response => response.json())    // a fetch le llega una respuesta en string que tiene que ser parseada a JSON
  .then(data => {
    console.log(data) 
  })
  .catch(error => console.error(error));
Enter fullscreen mode Exit fullscreen mode

Axios 的主要功能是拦截器，允许拦截美洲驼和埃利亚斯，可以使用新的后端系统来保护美洲驼的安全系统，可以使用代币来拦截美洲驼，也可以使用代币来拦截美洲驼。与美国空军一样，皮卡洛也是如此。



axios.interceptors.request.use(config => {
  // Aquí podríamos hacer algo con la llamada antes de enviarla
  console.log('Se ha enviado algo');
  return config;
});

// llamada común
axios.get('https://pokeapi.co/api/v2/pokemon')
  .then(response => {
    console.log(response.data);
  });
Enter fullscreen mode Exit fullscreen mode

Creo 是我在 Axios 上的主要合作伙伴，我对它的库进行了小规模分析，并访问了他过去的项目。

4. jQuery.Ajax()

显然，这是美洲驼的主题，它是jQuery库重要的一个新项目。

jQuery 是一个非常多的库，但现在已经有很多记录了，但 StateOfJs 中没有任何关于 StackOverflow 的内容，请注意我们的库/框架，因为它是必需的。这是一个使用 jquery 的 una API Rest 的方法。



<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode 


$.ajax({
  type: 'GET',
  url: 'https://pokeapi.co/api/v2/pokemon',
  dataType: 'json',
  success: function(data) {
    console.log(data)
  }
});
Enter fullscreen mode Exit fullscreen mode

Realmente es un método bastante sencillo de utilizar.

实践中的理论探讨

您可以使用 PokéApi 的 API 来获取数据并获取 Pokedex 的信息。



<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="head">
      <h1>Pokedex</h1>
    </div>
    <div id="container"></div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode 


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body{
    background-color: #ececec;
    font-family: 'Ubuntu', sans-serif;
  }

  .head{
    background-color: rgb(187, 70, 49);
    padding: 20px;
    position: fixed;
    top: 0;
    width: 100%;
    color: white;
  }

  #container{
    width: min(100%, 1000px);
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .card{
    width: 230px;
    margin-top: 100px;
    background-color: white;
    padding: 20px;
    border-radius: 20px;
  }

  .card img {
    width: 100%;
  }

  .card span{
    color: #6e6e6e;
    font-weight: 500;
  }
Enter fullscreen mode Exit fullscreen mode 


// Obtenemos los datos de todos los pokemon 
fetch('https://pokeapi.co/api/v2/pokemon')
        .then(response => response.json())
        .then(json => {
            printPokemons(json.results);
        });

// Pinta todos los pokemos insertando un HTML dentro del #container
function printPokemons(pokemons) {
  const container = document.getElementById('container')
  pokemons.forEach(pokemon => {
    container.innerHTML = `
    ${container.innerHTML}
    <div class="card">
    <img src="https://pokeres.bastionbot.org/images/pokemon/${getPokemonId(pokemon.url)}.png"/>
    <span>Nº.${getPokemonId(pokemon.url)}</span>
    <h2>${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}</h2>
    </card>
  `;
  });
}

// En esta ruta de la API no nos viene el id de cada pokemon, pero si que nos viene
// una URL, para poder obtener todos los datos de ese pokemon, la cual contiene su ID
// así que le extraigo el ID a la URL
function getPokemonId(url) {
  return url.replace('https://pokeapi.co/api/v2/pokemon/', '').replace('/','')
}
Enter fullscreen mode Exit fullscreen mode

结果如下。
神奇宝贝图鉴结果

Más maneras de llamar a una API Rest de JavaScript.

我感兴趣的是使用 JavaScript 来实现其他 API 和 llamar 的操作。

Http客户端

在 Angular 开发框架中，我们将骆驼库作为服务的一部分。

Angular 的HttpClient库具有强大的功能、拦截器、测试、与 TypeScript 集成……您可以在 Angular 项目中使用其他库。

超级代理

SuperAgent是一个非常强大的库，与 Axios 类似。

要求

没有太多请求，但他访问了很多企业图书馆，以实现 alguna 功能 propia，没有任何服务，特别是简单的休闲。

结论

请先获取博客中的示例，然后再创建与 JavaScript 相关的项目，Axios 系列是我的初级选项，它具有多种功能和强大的功能。

jQuery.Ajax，不使用任何项目，不使用该库中的项目，但请注意。

XMLHttpRequest 是 Microsoft 的 Internet Explorer 资源，它是您所必需的，并且需要从 Internet Explorer 中获取数据。

文章来源：https://dev.to/vikingcodeblog/4-maneras-de-llamar-a-una-api-rest-con-javascript-2nhm
Devto 翻译
PREV
我如何让我的个人网站变得更加无障碍
NEXT
使用 Vanilla JavaScript 进行下拉刷新动画