Vue - 封装Axios，并给每次请求加上加载动画

1. 准备 1.1 导入Element-UI 在项目中新建终端，输入以下命令：

npm install element-ui -S

在main.js中进行配置

import ElementUI from 'element-ui';  //  导入element-ui包
import 'element-ui/lib/theme-chalk/index.css';  //  导入样式
Vue.use(ElementUI);  //  进行引用

1.2 导入axios 在项目中新建终端，输入以下命令：

npm install axios --save

在main.js中进行配置

import service from 'axios'
Vue.prototype.$axios = service

1.3 导入qs 在项目中新建终端，输入以下命令：

npm install qs

在main.js中进行配置

import qs from 'qs'
Vue.prototype.$qs = qs

引入上述3个库后，新建一个Request.js文件

2. 加载动画代码

import { Loading } from 'element-ui';

let loading;
let loadingNum = 0;  //  内存中正在请求的数量

function startLoading() {  //  打开加载动画
    if(loadingNum == 0) {
        loading = Loading.service({
            lock: true,
            text: '拼命加载中...',
            background:'rgba(255,255,255,0.5)',
            target: document.querySelector('.content')
        })
    }
    loadingNum++;
}

function endLoading() {  //  关闭加载动画
    loadingNum--;
    if(loadingNum <= 0) {
        loading.close();
    }
}

上述代码是加载动画的代码，大家可以单独在其他地方使用

3. 完整代码

import axios from 'axios';
import qs from 'qs'
import { MessageBox, Loading } from 'element-ui';

let loading;
let loadingNum = 0;  //  内存中正在请求的数量

function startLoading() {
    if(loadingNum == 0) {
        loading = Loading.service({
            lock: true,
            text: '拼命加载中...',
            background:'rgba(255,255,255,0.5)',
            target: document.querySelector('.content')
        })
    }
    loadingNum++;
}

function endLoading() {  //  关闭加载动画
    loadingNum--;
    if(loadingNum <= 0) {
        loading.close();
    }
}

/*
	baseURL：基本地址
	所有发送到后端的请求都会经过这里，然后在访问的url前拼接上baseURL，从而获得真正的访问地址
	举例：  url: /request
		   经过这里后，与baseURL进行拼接，变成：baseURL/request
	所以在使用封装的Axios时，url只需写baseURL后的地址即可
*/
const service  = axios.create({
    baseURL: process.env.API_ROOT,  //  基本地址
    responseType: 'json',
    withCredentials: true,  //  允许跨域设置，不然可能因为拿不到cookie而报错
    timeout: 1000 * 10  //  设置请求超时时间，单位为毫秒
})

/* 
	环境的切换，可以根据不同的环境设置不同的请求基本地址
	根据需要进行修改即可
*/
if (process.env.NODE_ENV == 'development') {    
    service.defaults.baseURL = 'http://192.168.74.1:8888/';
} else if (process.env.NODE_ENV == 'debug') {    
    service.defaults.baseURL = 'http://192.168.74.1:8888/';
} else if (process.env.NODE_ENV == 'production') {    
    service.defaults.baseURL = 'http://192.168.74.1:8888/';
}

//  请求拦截器
service.interceptors.request.use(
    config => {
        startLoading();  //  打开加载动画

        if (config.meth === 'post' && !(config.data instanceof FormData)) {
            config.data = qs.stringify(config.data, {
                arrayFormat: 'repeat'  //  后端要求传数组的时候做的设置
            })
        }
        
        // 将token放到请求头中发送给服务器
        if (window.localStorage.getItem('token')) {
            config.headers.common['Access-Token'] = window.localStorage.getItem('token');
        }

        return config;
    },
    error => {
        return Promise.error(error)
    }
)

// 响应拦截器
service.interceptors.response.use( 
    response => {
        endLoading();  //  关闭加载动画

        /*  
        	如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
        	否则的话抛出错误 
        */    
        if (response.status === 200) {        
            return Promise.resolve(response.data);        
        } else {         
            return Promise.reject(response);        
        }    
    },    
    
    /* 
    	服务器状态码不是2开头的的情况
        要和后台统一的错误状态码    
        然后根据返回的状态码进行一些 *** 作，例如登录过期提示，错误提示等等
    */
    error => {
        endLoading();  //  关闭加载动画
        if (error && error.response && error.response.status) {
            switch (error.response.status) {                               
                case 401:
                    MessageBox({
                        message: '未授权，请重新登录',
                        type: 'error',
                        title: '提示'
                    })      
                    break;           
                case 402:
                    MessageBox({
                        message: '登录过期，请重新登录',
                        type: 'error',
                        title: '提示'
                    });               
                    break; 
                case 403:
                    MessageBox({
                        message: '拒绝访问',
                        type: 'error',
                        title: '提示'
                    });
                    break;
                case 404:
                    MessageBox({
                        message: '网络请求不存在',
                        type: 'error',
                        title: '提示'
                    });
                    break;
                case 405:
                    MessageBox({
                        message: '请求方法不允许',
                        type: 'error',
                        title: '提示'
                    });
                    break;
                case 408:
                    MessageBox({
                        message: '请求超时，请稍后再试',
                        type: 'error',
                        title: '提示'
                    });
                    break;
                case 429:
                    MessageBox({
                        message: '服务器繁忙，请稍后再试',
                        type: 'error',
                        title: '提示'
                    });
                    break;
                case 500:
                    MessageBox({
                        message: '服务器端错误',
                        type: 'error',
                        title: '提示'
                    });
                    break;
                case 501:
                    MessageBox({
                        message: '网络未实现',
                        type: 'error',
                        title: '提示'
                    });
                    break;
                case 502:
                    MessageBox({
                        message: '网络错误',
                        type: 'error',
                        title: '提示'
                    });
                    break;
                case 503:
                    MessageBox({
                        message: '服务不可用',
                        type: 'error',
                        title: '提示'
                    });
                    break;
                case 504:
                    MessageBox({
                        message: '网络超时',
                        type: 'error',
                        title: '提示'
                    });
                    break;
                case 50:
                    MessageBox({
                        message: 'http版本不支持该请求',
                        type: 'error',
                        title: '提示'
                    });
                    break;
                // 其他错误，直接抛出错误提示
                default:
                    MessageBox({
                        message: '服务器内部错误，请稍后再试',
                        type: 'error',
                        title: '提示'
                    });
            }
            return Promise.reject(error);
        }
    }    
);

export default service;

4. 使用举例

注意上述代码的最后一句：“export default service”，意味着在引入上述JS文件中封装的Axios时，是以变量名“service”进行引用的

4.1 GET请求举例

import { MessageBox } from "element-ui";
import service from "../request";  //  修改为自己的地址

/*
	异步模式
*/
export async function requestInitData(param) {
    try {
        const response = await service({
            url: '自己的访问地址',
            method: 'GET',
            params: {
                "参数1": param
            }
        });
		console.log(response);
    } catch (error) {
        MessageBox({
            title: '提示',
            message: '请求失败失败，请稍后再试',
            type: 'error'
        });
    }
}

4.2 POST请求举例

import { Message } from "element-ui";
import service from "../request";  //  修改为自己的地址

/*
	异步模式
*/
export async function requestInitData(params) {
    return service({
        url: '自己的访问地址',
        method: 'POST',
        data: params,
        headers: {'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'}  //  按自己需求进行修改
    }).then(response => {
        console.log(response);
    }).catch(error => {
        Message.error('请求失败，请稍后再试');
    })
}