axios请求拦截 做Loading加载_在请求拦截器中 loading 加载页面

axios请求拦截 做Loading加载

首先安装element-ui ，我们是按需引入
从element-ui 引入我们所需：

import {Loading,Message} from "element-ui";
1

const instance = axios.create({
    baseURL: 'https://api.it120.cc',
    //设置axios为form-data
    headers:{'Content-Type':'application/x-www-form-urlencoded'},
    transformRequest:[function (data) {
        let ret = '';
        for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
    }]
});
//创建loading实例
var loading = null;
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    loading = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    return config;
}, function (error) {
    // 对请求错误做些什么
    Message(error);
    console.log("========>",error);
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    setTimeout(() => {
        loading.close();
    }, 2000);
    return response;
}, function (error) {
    // 对响应错误做点什么
    Message(error);
    console.log("========>",error);
    return Promise.reject(error);
});
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