一、简介
在前端开发中,使用 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 实例。