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

鏂囨。锛?br> http://www.axios-js.com/zh-cn/docs/#axios-get-url-config-1

1. 瀹夎
2. 閰嶇疆鍣?/li>
3. 鎷︽埅
4. 鍚勭鏂规硶

瀹夎锛?/p>

npm install axios

鏈枃璁板綍浜嗕袱绉嶆柟娉?浣跨敤鏂规硶涓嶄竴鏍?.emmmm灏辨槸鍋氫釜璁板綍馃槉
鍙兘鏈夊潙涓嶈繃鐩墠娌″彂鐜?/p>

http.js鏂囦欢涓?/p>

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

// baseURl浣跨敤浜唌ock鏈嶅姟鍣?
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鐨勪富鏂囦欢涓?/p>

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.浼爄d鍚嶅効鐨勫瓧绗︿覆 2.浼犻渶瑕乴oading鐨勫厓绱?
    let container = typeof target === 'string' document.getElementById(`#${target}`) : target;

    let loadingInstance = Loading.service({
        target: container,
        fullscreen: false,
        text: "鍔犺浇涓?..."
    });

    return loadingInstance;
}

鎺ュ彛鍏叡鏂囦欢涓?/p>

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

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

浣跨敤椤甸潰涓?/p>

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;
}

鎴戝ソ鐑?.涓嶆兂澶嶅埗绮樿创浜?......鎬讳箣鏈€閲嶈鐨勯儴鍒嗗凡缁忔斁涓婃潵浜?鏄兘鐢ㄧ殑...鑷繁鐞㈢（鍚?/p>