vue中局部封裝axios

Vue中局部配置axios

'use strict'
import axios from 'axios';
import {
    Loading
} from 'element-ui';
export const http = (config) => {
    const instance = axios.create({
        baseUrl: '服務器地址',
        timeout: '設置過期時間'
    })
    // 自定義動畫函數
    let loading;
    let startLoading = () => {
        /* 開場動畫 */
        loading = Loading.service({
            lock: true,
            text: '正在加載...客官請稍等...',
            background: 'rgba(0,0,0,.6)'
        })
    };
    let endLoading = () => {
        /* 結束動畫 */
        loading.close()
    };
// 設置請求攔截
instance.interceptors.request.use(
    function (config) {
        // Do something before request is sent
        startLoading()
        return config
    },
    function (error) {
        // Do something with request error
        return Promise.reject(error)
    }
)

// 設置響應攔截
instance.interceptors.response.use(
    function (response) {
        // Do something with response data
        endLoading()
        return response
    },
    function (error) {
        // Do something with response error
        endLoading()
        return Promise.reject(error)
    }
)

return instance(config)

}
 // GET 實例
 http({
 url: '127.0.0.1:8080/system/category',
 method: 'GET',
 params: {
 data: 'get請求傳遞的參數'
 }
 }).then(res => {
 console.table(res)
 })
 .catch(err => {
 console.log(err)
 })
 // POSt 實例
 http({
 url: '127.0.0.1:8080/system/user',
 method: 'POST',
 data: {
 userName: '',
 password: ''
 }
 }).then(res => {
 console.table(res)
 })
 .catch(err => {
 console.log(err)
 })