import axios from axios;import { baseURL } from @/config;class HttpRequest {constructor(baseUrl = baseURL) {this.baseUrl = baseUrl;// 存储请求的队列this.queue = {}}// 内部的一些配置getInsideConfig() ...
import axios from 'axios'; import { baseURL } from '@/config'; class HttpRequest { constructor(baseUrl = baseURL) { this.baseUrl = baseUrl; // 存储请求的队列 this.queue = {} } // 内部的一些配置 getInsideConfig() { const config = { baseUrl: this.baseUrl, headers: {}, } return config; } // 全局请求拦截器 interceptors(instance, url) { // 请求拦截 instance.interceptors.request.use(config => { // 如果队列中有请求,执行loading效果 if (!Object.keys(this.queue).length) { Spin.show(); } // 每一次过来的请求都添加到queue队列中 this.queue[url] = true; }, error => { return Promise.reject(error) }) // 响应拦截 instance.interceptors.response.use(res => { // 请求返回了,说明请求结束了,删除队列中传入的那个url delete this.queue[url]; console.log(res); return res; }, error => { delete this.queue[url]; return Promise.reject(error) }) } request(options) { const instance = axios.create(); // 把外面传进来的配置合并预设的配置 options = Object.assign(this.getInsideConfig(), options); // 请求的时候,把请求的url传到全局拦截器中,拦截器中去做添加队列的逻辑,执行loading this.interceptors(instance, options.url); return instance(options); } } export default HttpRequest;
使用:
1.引入我们创建的axios类,并导出
2.接口请求API.js文件中引入:
3.组件中调用这个请求
织梦狗教程
本文标题为:18-简单封装axios
基础教程推荐
猜你喜欢
- IOS 播放系统提示音使用总结(AudioToolbox) 2023-03-01
- Android多返回栈技术 2023-04-15
- IOS应用内跳转系统设置相关界面的方法 2022-11-20
- Flutter绘图组件之CustomPaint使用详解 2023-05-12
- Flutter手势密码的实现示例(附demo) 2023-04-11
- Android开发使用RecyclerView添加点击事件实例详解 2023-06-15
- android studio按钮监听的5种方法实例详解 2023-01-12
- iOS开发教程之XLForm的基本使用方法 2023-05-01
- Android中的webview监听每次URL变化实例 2023-01-23
- 解决Android Studio突然不显示logcat日志的问题 2023-02-04