vue axios接口封装及使用 以及全局的加载状态

request.js文件

import axios from 'axios'
import { Loading, Message } from "element-ui";
//接口请求的时候 的加载状态
import { Loading } from 'element-ui';
let loading //定义loading变量
function startLoading() { //使用Element loading-start 方法
    loading = Loading.service({
        lock: true,
        text: '加载中',
        background: 'rgba(0, 0, 0, 0.3)',
        spinner: "el-icon-loading",
    })
}
function endLoading() { //使用Element loading-close 方法
    loading.close()
}

//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
//声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
//调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
    if (needLoadingRequestCount == 0) {
        startLoading()
    }
    needLoadingRequestCount++

}
function tryHideFullScreenLoading() {
    if (needLoadingRequestCount <= 0) return
    needLoadingRequestCount--
    if (needLoadingRequestCount == 0) {
        endLoading()
    }
}

const service = axios.create({
    baseURL: '接口地址',
    timeout: 5000,
})

service.interceptors.request.use(
    config => {
        if (typeof config.data == "object") {
            if (window.sessionStorage.getItem("user_id")) {
                config.data.user_id = window.sessionStorage.getItem("user_id")   
            }
        }
        showFullScreenLoading()
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);
service.interceptors.response.use(
    response => {
        const res = response.data;
        setTimeout(tryHideFullScreenLoading, 100)
        if (res.code !== 200) {
            Message({
                message: res.msg || 'Error',
                type: 'error',
                duration: 2 * 1000
            });
            return Promise.reject(new Error(res.msg || '拒绝'));
        } else {
            return res;
        }

    },
    error => {
        Message({
            message: error.message,
            type: "error",
            duration: 5 * 1000
        });

        return Promise.reject(error);
    }
);
export default service

api文件 index.js

import request from '@/utils/request'

// 首页banner图
export const getUser = (data) => request({
    url: '/login/get_user',
    method: 'POST',
    data
});
// 主题课程
export const culum = (data) => request({
    url: '/index/culum',
    method: 'POST',
    data
});

组件中使用：

import { banner，culum } from "../api/index";
methods:{
// 获取banner
 getBanner() {
   banner().then((res) => {
   // console.log(res);
   this.bannerList = res.data.banner;
   });
 },
 getCulum() {
   culum().then((res) => {
   // console.log(res);
   this.culumList = res.data.category;
   });
 }
}