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