vue中局部封装axios 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) })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
'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)
    })