vue ---- axios配置（含接口loading）

文档：
http://www.axios-js.com/zh-cn/docs/#axios-get-url-config-1

1. 安装
2. 配置器
3. 拦截
4. 各种方法

安装：

npm install axios

本文记录了两种方法,使用方法不一样..emmmm就是做个记录😊
可能有坑不过目前没发现

http.js文件中

import axios from "axios";
import {Message} from "element-ui";

// baseURl使用了mock服务器
axios.defaults.baseURL = 'http://localhost:9999/';
axios.defaults.timeout = 15000;

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 校验Token什么的
    return config;
}, function (error) {
    Message.warning("网络溜走啦～～")
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    if(response.status === 200) return response.data;
    else Message.error(response.msg);
}, function (error) {
    Message.warning("网络溜走啦～～")
    return Promise.reject(error,'utils/http.js')
});

export default axios;

1

api的主文件中

import axios from "@/utils/http";
import {
    Loading
} from 'element-ui';

export const get = (url, params, container) => {
    let loading = createLoading(container);
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params
        }).then(response => {
            if (response.status === 0) resolve(response.data)
            else reject(response.msg)
            setTimeout(() => {
                loading.close();
            }, 1000)
        }).catch(error => {
            console.error(error, 'GET api/index.js')
            setTimeout(() => {
                loading.close();
            }, 1000)
            reject('网络溜走啦～～');
        });
    })
}

export const post = (url, data, container) => {
    let loading = createLoading(container);
    return new Promise((resolve, reject) => {
        axios.post(url, {
            data
        }).then(response => {
            if (response.status === 0) resolve(response.data)
            else reject(response.msg)
            setTimeout(() => {
                loading.close();
            }, 1000)
        }).catch(error => {
            console.error(error, 'POST api/index.js')
            setTimeout(() => {
                loading.close();
            }, 1000)
            reject('网络溜走啦～～');
        });
    })
}

function createLoading(target) {
    // target 可以使用两种方式传递：1.传id名儿的字符串 2.传需要loading的元素
    let container = typeof target === 'string' ? document.getElementById(`#${target}`) : target;

    let loadingInstance = Loading.service({
        target: container,
        fullscreen: false,
        text: "加载中...."
    });

    return loadingInstance;
}

接口公共文件中

import {get} from "./index.js";

export const getUserTrend = (params, container) => {
    return get("usersTrend", params, container);
}

使用页面中

import {getUserTrend} from "@/api/getData";

getUserTrend({}, container).then(res => {
  console.log(res, '获取到的数据们')
}).catch(error => this.$message.warning(error));

2

import axios from "axios";
import {
    Message
} from "element-ui";

// 根据环境切换baseURL
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:9999/' : '';
axios.defaults.timeout = 15000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 校验Token什么的
    return config;
}, function (error) {
    Message.warning("网络溜走啦～～")
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    if (response.status === 200) return response.data;
    else Message.error(response.msg);
}, function (error) {
    Message.warning("网络溜走啦～～")
    return Promise.reject(error, 'utils/http.js')
});

import {
    Loading
} from 'element-ui';

/**
 * @param {string} url 
 * @param {object} params
 * @param {string} method 
 * @param {string | element} container 
 * @returns 
 */
export default function (url, params = {}, {
    method = 'get',
    container = '',
} = {}) {
    let isLoading = container !== null && typeof container !== 'undefined' && container !== '';
    let loading = isLoading ? createLoading(container) : '';

    let data = method === 'get' || method === 'delete' ? {
        params
    } : params;

    return new Promise((resolve, reject) => {
        axios[method](url, data).then(response => {
            if (response.status === 0) resolve(response.data)
            else reject(response.msg)
            setTimeout(() => {
                isLoading && loading.close();
            }, 1000)
        }).catch(error => {
            console.error(error, 'GET api/index.js')
            setTimeout(() => {
                isLoading && loading.close();
            }, 1000)
            reject('网络溜走啦～～');
        });
    })
}

/**
 * @param {string | element} target 
 * @returns 
 */
function createLoading(target) {
    let container = typeof target === 'string' ? document.getElementById(target) : target;

    let loadingInstance = Loading.service({
        target: container,
        fullscreen: false,
        text: "加载中....",
        spinner: "el-icon-loading"
    });

    return loadingInstance;
}

我好烦..不想复制粘贴了.......总之最重要的部分已经放上来了,是能用的...自己琢磨吧