前端vue3封装一个axios
以下是一个简单的封装axios的示例:
import axios from 'axios';
const request = axios.create({
baseURL: 'http://localhost:3000', // 设置请求的基础URL
timeout: 5000, // 设置请求超时时间
headers: {
'Content-Type': 'application/json' // 设置请求头
}
});
// 添加请求拦截器
request.interceptors.request.use(
config => {
// 在发送请求之前做些什么,如添加token
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
request.interceptors.response.use(
response => {
// 对响应数据做些什么,如处理错误码
return response.data;
},
error => {
// 对响应错误做些什么
return Promise.reject(error);
}
);
export default request;
在这个示例中,我们首先创建了一个axios实例,并设置了一些默认的请求配置,如基础URL、超时时间和请求头。
然后,我们通过request.interceptors.request.use()和request.interceptors.response.use()方法添加了请求和响应拦截器,以便在请求和响应过程中进行一些自定义操作,例如添加token或处理错误码等。
最后,我们导出了封装好的request实例,供其他模块使用。在其他模块中,我们只需要引入request实例,然后通过它来发起请求即可。例如:
import request from './request';
request.get('/users').then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});
``
原文地址: https://www.cveoy.top/t/topic/em9h 著作权归作者所有。请勿转载和采集!