| 了解Axios.create | 您所在的位置：网站首页 › axios使用promise封装的好处 › 了解Axios.create |
了解Axios.create
|
Axios每周下载量超过1950万次，是最受欢迎的Javascript库之一，人们可以用它来进行HTTP请求。它既可以在浏览器中使用，也可以在Node.js中使用，这使它更受欢迎。 由于支持承诺和请求-响应、转换和拦截器等伟大功能，Axios是进行HTTP调用的最佳选择。 Axios.create是Axios的一个方便的功能，用于创建一个具有自定义配置的新实例。通过Axios.create，我们可以为任何API生成一个客户端，并在使用同一客户端的任何调用中重复使用该配置，正如我们在下面的例子中看到的。 在这篇文章中，我们将学习如何用GitHub API实例来使用Axios.create，这样你就可以跟着学了。 简介Axios是一个用于浏览器和Node的基于承诺的简单HTTP客户端。它提供了一个易于使用的库，占地面积小。它还有一个可扩展的接口和一些伟大的功能，如JSON数据的自动转换，以及客户端支持对XSRF的保护，等等。 在服务器端（Node），它依赖于本地Node.js HTTP模块，而在客户端（浏览器），它使用XMLHttpRequests。由于是同构的，Axios是少数几个在浏览器和服务器端都可以毫不费力地使用的库之一。 如果我们对Axios进行常规要求，我们会收到默认的实例。假设我们想添加一个自定义的配置，比如一秒钟的超时，这在const axios = require('axios') 中是不容易实现的？ 这就是Axios.create与Axios的常规 "require "相比的优势所在，尽管两者都会返回Axios的实例。通过Axios.create，我们可以设置一个类似于baseUrl 的配置，所有的调用都只需要HTTP调用的URI，而不用完整的URL。 前提条件在我们深入学习代码之前，请确保你具备以下条件，以便继续学习本教程。 对JavaScript的工作知识 在你的机器上安装Node.js（最好是最新的LTS版本），或者你可以试试JSfiddle的例子 对npm功能有一定了解我将在本指南中使用一个类似于Unix的系统。 接下来，我们将看看如何在一个演示的Node应用程序上安装Axios。 如何安装Axios如果你想在浏览器上快速运行这个演示的Node项目，也可以在JSfiddle上测试。 为了建立一个新的项目，我们将运行以下程序。 mkdir axios-create cd axios-create npm init -y它将添加package.json 文件，并给出如下的输出。 因此，我们将安装Axios的npm包。 npm i --save axios它将呈现并输出以下内容。 很好，现在我们的演示Node项目中已经安装了Axios! 你可以在这个pull request中查看这个项目到这一步的变化。接下来我们将看看为什么要使用Axios.create，以及如何在我们的演示应用中安装它。 为什么使用Axios.createAxios.create本质上是一个创建Axios新实例的工厂。例如，如果你想要两个Axios实例（一个用于调用服务A，另一个用于调用服务B），其中A可以在100ms的超时下工作，而B需要500ms的超时，这可以通过Axios.create轻松实现。 Axios可以只用一个普通的require，如const axios = require('axios') ，但由于没有办法传入配置，需要另一个步骤来正确配置Axios。 用Axios.create来使用Axios更为有利，因为它可以用自定义配置来创建一个新的Axios实例。用Axios.create创建的带有自定义配置的Axios实例有助于我们在该实例的所有调用中重复使用所提供的配置。 例如，如果我们调用的API只适用于accept header ofapplication/vnd.api+json ，就可以设置一次。然后，我们用Axios的那个实例进行的所有调用都会包括这个头，除非被重写。它合并了默认值，并为新创建的Axios实例提供了一个自定义配置。 与使用Axios与require 或import 类似，即使是由Axios.create创建的实例，也会尊重配置的优先顺序。因此，如果配置在请求或调用层面设置了自定义头，它将覆盖在Create 调用中提供的配置值。 我们将在下面的例子中讨论如何使用Axios.create时看一下这个问题。 如何使用Axios.create为了演示如何使用Axios.create，我们将建立一个简单的GitHub API客户端，调用几个端点。这里的目的是获取拥有最多关注者的GitHub用户，并打印他们拥有的公共仓库数量以及关注者数量。 这将通过以下方式完成。 首先，我们将通过关注者数量调用GitHub的 "搜索用户"API，限制为10个。 然后，我们将在一个数组中收集用户名 然后，我们将调用 "通过用户名获取单个用户"的API，用Promise.all同时获取该用户的公共仓库和关注者的数量。 最后，我们将把数据打印成一个控制台表格，同时用Promise.all来循环浏览。console.log这些步骤反映在以下代码中，它被写在一个名为GitHub.js 的文件中。 const axios = require('axios'); const GitHubClient = axios.create({ baseURL: 'https://api.GitHub.com/', timeout: 1000, headers: { 'Accept': 'application/vnd.GitHub.v3+json', //'Authorization': 'token -- https://docs.GitHub.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token' } }); async function getMostFollowedUsers() { const noOfFollowers = 35000; const perPage = 10; //ref: https://docs.GitHub.com/en/GitHub/searching-for-information-on-GitHub/searching-on-GitHub/searching-users const response = await GitHubClient.get(`search/users?q=followers:>${noOfFollowers}&per_page=${perPage}`, {timeout: 1500}); return response.data.items; } async function getCounts(username) { const response = await GitHubClient.get(`users/${username}`); return { username, name: response.data.name, publicReposCount: response.data.public_repos, followersCount: response.data.followers }; } (async () => { try { const mostFollowedUsers = await getMostFollowedUsers(); const popularUsernames = mostFollowedUsers.map(user => user.login); const popularUsersWithPublicRepoCount = await Promise.all(popularUsernames.map(getCounts)); console.table(popularUsersWithPublicRepoCount); console.log(`======== Another view ========`); popularUsersWithPublicRepoCount.forEach((userWithPublicRepos) => { console.log(`${userWithPublicRepos.name} with username ${userWithPublicRepos.username} has ${userWithPublicRepos.publicReposCount} public repos and ${userWithPublicRepos.followersCount} followers on GitHub`); }); } catch(error) { console.log(`Error calling GitHub API: ${error.message}`, error); } })();让我们了解一下上面的代码在做什么。 首先，我们需要Axios，因为我们已经在上一步中安装了它。然后，我们使用axios.create ，创建一个新的Axios实例，其自定义配置的基本URL为 [https://api.GitHub.com/](https://api.GitHub.com/)和1秒的超时。 根据GitHub API文档的建议，该配置也有一个Accept 头，其值为application/vnd.GitHub.v3+json 。我对Authorization 头部做了注释，它是可选的。 如果我们每小时从同一IP向GitHub API发送超过60个请求，根据他们对非认证用户的速率限制政策，我们将需要一个GitHub Token。这里需要注意的是，对于所有的API调用，这些配置将被使用，除非每次调用都被重写。 在这之后，我们有一个名为getMostFollowedUsers 的异步函数，用于查询搜索用户GitHub API中拥有超过35,000名关注者的用户。它只返回其中的10个，因为per_page 参数被发送至10。 这里有趣的是，这个特定的API调用的超时被设置为1500 ，这意味着1.5s，比先前设置的默认超时多0.5s。这是因为 "搜索用户 "的API可能比 "获取用户 "的API要慢一些。它从响应中送回了项目数组。 接下来，我们有一个getCounts 异步函数，它接收一个用户名作为参数，并将其发送到GitHub的 "get users "API端点。从响应中，它解析出用户的名字、公共仓库的数量和关注者的数量，然后将其作为一个对象返回。 在这一点上，它将使用默认的1s超时，因为没有配置重写。同样，它也会使用其他的配置，比如Accept 头部的值。 最后，我们有一个未命名的异步立即调用函数表达式（IIFE），它将所有的东西粘在一起。在一个try-catch块中，它首先从GitHub的API中获取10个最受关注的用户列表。然后，它从这10个用户对象中提取出用户名。 然后，它通过一个方便的Promise.all 调用，将用户名发送到getCounts 函数。当结果以数组形式返回时，它首先以表格形式打印出来，然后用forEach 循环查看结果，并打印出最多关注用户的文本视图，包括他们的名字、用户名、公共仓库的数量以及关注者数量。 如果你想在浏览器上查看输出，请在JsFiddle上尝试，运行它，看看控制台的输出。 我们也可以使用Axios的拦截器功能来记录所有的请求和响应，并使用一个流行的Node日志库来格式化并以更好的方式显示日志。 当上述代码与node GitHub.js ，它将产生一个类似于以下的输出。 从这里，我们知道Linus Travolts是GitHub上关注度最高的用户，拥有超过14.3万的粉丝，并且只有公共仓库。在谷歌工作的Addy Osmani则有近38000名关注者，拥有313个公共仓库。 你也可以以拉动请求的形式查看上述代码。请注意，每次运行脚本都会发出11个请求，所以如果你多次运行它，你会从GitHub的API中得到一个403的回复。为了克服这个问题，你需要添加一个认证令牌，它的速率限制会高得多，认证用户每小时有5000个请求。 总结在这篇文章中，我们学习了如何使用Axios.create来制作GitHub API的客户端，其中的配置可以在以后的每次调用中重复使用。我们还学习了如何在需要时覆盖每次调用的配置。在这个过程中，我们发现了被关注最多的GitHub用户，以及他们的关注者数量和公共仓库数量。 按照同样的思路，Axios.create可以用来创建一个可以与任何REST API通信的功能性客户端。如果有多个REST API需要调用，可以用Axios.create创建一个新的Axios实例并独立使用。 由于该实例的配置将在不同的调用中被重复使用，因此使用Axios.create创建的实例进行后续的HTTP调用就变得非常容易。这些实用的功能使得Axios.create成为一个非常有用的工具，开发者应该采用它来获得对HTTP API的最大调用。 了解Axios.create一文首次出现在LogRocket博客上。 |
【本文地址】