开发 Web 应用程序中最重要的概念之一是数据获取。 请求是应用程序功能的基础,无论您是从内容 API 还是以产品数据形式从后端获取数据,都必须以清晰、可扩展且非冗余的方式处理。今天给大家分享下如何在 React 使用 Axios 库,在分享使用前,我们先详细的了解下什么是 Axios。
什么是 Axios?
Axios 是一个基于 promise 的 HTTP 库,可以用在 JavaScript 和 Node.js 使中。它可以发送 get、post、put、delete 等请求,并且支持请求拦截、响应拦截、超时设置、请求取消等功能。Axios 使用简单,代码简洁,并且跨平台兼容性较好。
以下示例简单的展示了在原生 JS 中,如何使用 Axios。
如何安装 Axios?
使用前,您须先使用 yarn 或 npm 将其安装到您的项目中,安装方法如下:
简单的在 React 中进行调用
安装完成后,你可以在你的 React 应用中轻松使用 axios
多个请求的处理
在上面的示例中,axios 用于从具有自定义请求头的 API 进行检索数据。但是,如果您在呈现页面组件之前使用相同的配置对相同的 API 进行多次调用怎么办?每次调用都传递使用的配置都是相同的,所以调整后的代码如下?
实例的主要目的是创建一个新的具有自定义配置的axios实例;在上面的例子中,配置的逻辑是 baseURL(它将在每个调用的 URL 的开头,使您不必重复它)和请求头。
上面的代码现在更容易阅读和缩放;唯一剩下的冗余操作是对每个调用进行错误检查。
进一步完善和优化代码
将公共的逻辑抽取到一个自定义的 API 请求类中,新建文件 src/utils/api.ts ,示例代码如下:
接下来在组件中进行调用,示例代码如下:
现在多余的错误捕获也消失了 ,代码是不是干净许多。
总结
今天的分享就到这里,你觉得这个实现怎么样?这对你有帮助吗?请在评论区分享您的想法。