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请求。

相关推荐
有事没事实验室1 分钟前
node.js中的path模块
前端·css·node.js·html·html5
十盒半价12 分钟前
TypeScript + React:大型项目开发的黄金搭档
前端·typescript·trae
楚轩努力变强1 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
鱼樱前端1 小时前
rust基础二(闭包)
前端·rust
菜鸟学Python1 小时前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者2 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er2 小时前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping2 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
接口写好了吗2 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
未来之窗软件服务3 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统