Axios创建实例:灵活配置和模块化开发

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》《2024面试高频手撕题》《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》《带你从入门到实战全面掌握 uni-app》

文章目录

引言

Axios允许通过axios.create方法创建一个自定义的实例,这个实例可以拥有自己的配置选项,如基础URL、超时时间、请求头等。创建实例的好处是可以为不同的API请求设置不同的配置,使得代码更加模块化和可维护。

创建Axios实例

基本创建方法

javascript 复制代码
import axios from 'axios';

// 创建一个新的Axios实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置基础URL
timeout: 1000, // 设置超时时间为1秒
headers: {'X-Custom-Header': 'foobar'} // 设置自定义请求头
});

使用实例发送请求

创建实例后,可以使用该实例发送HTTP请求,这些请求会自动使用实例的配置。

javascript 复制代码
instance.get('/data') // 请求的URL将是'https://api.example.com/data'
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

实例的拦截器

可以为实例设置请求和响应拦截器,这样可以对所有通过该实例发送的请求和接收的响应进行统一处理。

javascript 复制代码
// 添加请求拦截器
instance.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});

创建实例的优点

  • 模块化:可以为不同的API或功能创建不同的实例,每个实例可以有自己的配置。
  • 代码复用:通过实例的拦截器,可以复用请求和响应的处理逻辑。
  • 易于维护:将配置集中在实例中,使得代码更加清晰和易于维护。

结论

通过创建Axios实例,可以更好地管理和配置HTTP请求,使得代码结构更加清晰,更易于维护和扩展。这是一种推荐的做法,特别是在大型应用中,可以根据不同的业务需求创建多个实例,每个实例负责一部分API请求。

相关推荐
qiyue773 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
轻语呢喃7 分钟前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人7 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD9 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟9 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
安思派Anspire10 分钟前
LangGraph + MCP + Ollama:构建强大代理 AI 的关键(一)
前端·深度学习·架构
LRH11 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
Jolyne_11 分钟前
可配置永久生效的Table组件的封装过程
前端·react.js
自由逐风11 分钟前
前端小数点精度问题解析
javascript
断竿散人12 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise