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)

})