18-简单封装axios

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.组件中调用这个请求