使用axios.create提高API调用效率

小蓝 • 2025-01-02 12:00 • 编程

一、简介

在前端开发中，使用 HTTP 协议进行网络请求是必不可少的一环。axios 是一个非常方便、易用、强大的 JavaScript http 客户端，用于在浏览器和 node.js 中优雅的处理数据请求和响应。然而，axios.create API 允许我们轻松地生成一个基于 axios 的全新实例，并允许我们轻松设置实例的默认值。这篇文章将详细探讨如何使用 axios.create API 提高接口调用效率。

二、问题：

在实际开发中，当我们需要同时调用多个 API 同时，我们经常会在每个 HTTP 请求中重复使用的同一设置来设置默认值。比如需要相同的请求头和认证令牌等等。这样做虽然可以达到目的，但是会导致代码臃肿，造成大量冗余。此时，axios.create 的作用就显得十分重要。

三、解决方案

1.创建 axios 实例

我们可以使用 axios.create() 方法创建一个 axios 实例，以达到改变默认配置功能。这个方法接收一个可选的 config 对象参数，用于扩展的实例配置。


 const instance = axios.create({
    baseURL: 'http://localhost:8080',
 });

这个代码片段演示了我们如何创建一个基于 axios 的全新实例，其会默认使用 http://localhost:8080 作为起点，并允许我们在后续的请求中使用相对路径进行请求。

2.实例方法

实例拥有与axios相同的方法，如 GET，POST，PUT 等等。调用这些方法时，所有设置均与默认配置合并。


instance.get('/user?ID=12345')
    .then((res) => {
        // 代码逻辑
    })
    .catch((error) => {
        // 错误处理
    });

上述代码演示了如何使用实例方法从 /user 接口获取 ID 为 12345 的用户数据。

3.转化请求和响应

通过 instance.interceptors.request 和 instance.interceptors.response，我们可以为该实例绑定请求和响应转换器。这些拦截器在请求和响应被拦截被执行。

例如，当我们需要设置一些公共的请求头时，可以这样写：


const instance = axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
});

instance.interceptors.request.use((config) => {
    config.headers.Authorization = getToken();
    return config;
});

function getToken() {
    return localStorage.getItem('token');
}

这个代码片段演示了如何使用 instance.interceptors.request，来为一个 axios 实例设置服务器认证令牌。当配置了这个拦截器后，每一次请求时 axios 会从 localStorage 中获取到一个认证令牌。

四、总结

使用 axios.create 是非常简单和方便的，尤其当你需要做一些全局的默认设置时。在以上代码示例中，我们演示了如何使用基于 axios 的 axios.create 配置来创建一个新的 axios 实例。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/306084.html