axios 使用2--全局配置、拦截器、取消请求、断点续传_axios.defaults.options = false;

作者：Monodyee | 2024-03-24 04:21:45

踩

axios.defaults.options = false;

1、基本使用

axios.method('url',[data],options)
.then((res)=>{...})
.catch((err)=>{...})
1
2
3

eg:

sendAjax(){
    // 让组件具备axios对象
    // axios.get||post|put|delete(url,options)
    axios.get('../axios/data/list.json')
    .then((res)=>{
        console.log(res)
    })
    .catch((err)=>{
        console.log('数据获取失败')
    })
}  
1
2
3
4
5
6
7
8
9
10
11

2、合并请求

axios.all([请求1，请求2])
1

eg:

Vue.prototype.$axios = axios;

sendAjax(){
    //请求1get  请求2post
    // this.$axios.get||post(url,[post的时候有data],options)
    // 配置公共数据（defaults其实就是配置中的options,一个是公共配置，一个是单个配置）
    this.$axios.defaults.baseURL = '../axios/data/';

    let q1 = this.$axios.get('list.json');
    let q2 = this.$axios.post('list2.json','a=1');
    // 合并这两个请求，并处理其成功和失败
    // 箭头函数会自动向上层借this
    this.$axios.all([q1,q2])
    .then(this.$axios.spread((res1,res2)=>{
        //全成功
        this.res1 = res1;
        this.res2 = res2;
    }))
    .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

3、options配置（全局）

options（部分，没有包含全部）

baseURL:基础URL路径
params 查询字符串（对象）
transformRequest:function(post请求传递的数据){} 转换请求体数据
transformResponse:function(res){自己转换相应回来的数据} 转换响应体数据
headers 请求头信息
data 请求体数据
timeout请求超时，请求多久以后没有响应算是超时（毫秒）
withCredentials:false 默认false，表示跨域请求时是否需要使用凭证
onUploadProgress 上传

使用示例

 // 配置公共数据（defaults其实就是配置中的options,一个是公共配置，一个是单个配置）
axios.defaults.baseURL = '../axios/data/';
// this.$axios.defaults.headers = {}//会覆盖原有默认头
axios.defaults.headers.accept = 'abc';//默认头修改个别的
1
2
3
4

4、拦截器

use给请求之前做的事可以是多件，可以use多次

请求拦截器：在发起请求之前，做的事加上请求头—cookie

axios.interceptors.request.use((config)=>{});
1

响应拦截器：在响应回来以后，做的事存储服务区的请求头—set-cookie

axios.interceptors.response.use((res)=>{});
1

完整demo示例(vue)

demo实现的功能
需求1(下面的isShow)
1、在请求发起之前，show一个loading 出来
2、响应回来之后，关闭这个loading
需求2：实现一个类似cookie的机制（可以用于登录）
服务器 ->
set-cookie:xxx 保存起来在响应拦截器中完成
在请求之前，从本地获取xxx 设置拦截器，请求头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拦截器</title>
    <style>
        .loading{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            border:5px solid lightgreen;
            -webkit-animation: turn 2s linear infinite;
        }
        .loading span{
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
            -webkit-animation: changeBgColor 2s linear infinite;
        }
        @-webkit-keyframes changeBgColor{
            0%{
                background: lightgreen;
            }
            100%{
                background: lightblue;
            }
        }
        @-webkit-keyframes turn{
            0%{
                -webkit-transform: rotate(0deg);
                border-color: lightgreen;
            }
            100%{
                -webkit-transform: rotate(360deg);
                border-color: lightblue;
            }
        }
    </style>
</head>
<body>
    <div id='app'></div>
    <script src='vue.js'></script>
    <script src='axios.js'></script>
    <script>
        let App = {
            template:`
                <div>
                    {{res1}}
                    <button @click='sendAjax'>发请求</button>  
                    <div class="loading" v-show='isShow'>
                        <span></span>
                    </div>
                </div>
            `,
            data(){
                return{
                    res1:'',
                    ishow:false
                }
            },
            created() {
                
            },
            methods: {
                sendAjax(){
                    // 配置拦截器
                    // use给请求之前做的事可以是多件，可以use多次

                    //请求拦截器
                    this.$axios.interceptors.request.use((config)=>{
                        console.log(config);
                        // 设置请求头，类似cookie
                        let token = localStorage.getItem('token');
                        if(token){
                            config.headers['token'] = token;
                        }
                        this.isShow = true;
                        return config;
                    });

                    //响应拦截器
                    this.$axios.interceptors.response.use((res)=>{
                        console.log(res);

                        // 获取服务器返回的响应头
                        //（该例子无服务器返回，可直接用localStorage.setItem('token','12344667');进行测试）
                        if(res.data.token){ // 假设token在data中
                            let token = res.data.token;
                            localStorage.setItem('token',token);
                        }
                        

                        this.isShow = false;
                        return res;
                    });

                    
                    this.$axios.defaults.baseURL = '../axios/data/';
                    
                    this.$axios.post('list2.json')
                    .then(res=>{
                        console.log('响应回来了',res);
                    })
                }
            },
        }
        // 组件内的每一个this对象，都是vue的孩子
        // Vue祖宗的原型数据，就会共享给所有的孩子
        Vue.prototype.$axios = axios;

        new Vue({
            el:'#app',
            components:{
                app:App
            },
            template:`<app/>`
        })
    </script>
</body>
</html>
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

5、取消请求

API3取消步骤

（1）发送请求前

const CancelToken = axios.CancelToken;
const source = CancelToken.source(); //创建标识请求的源对象
1
2

（2）保存起来方便取消调用

this.source = source; // 将对象存储到组件
// post 内部
CancelToken:source.token, // 请求的option对象
1
2
3

（3）取消请求

this.source.cancel(); // 取消到之前的那个请求
1

断点续传

前端的断点续传，及时获取当前上传文件的大小，存储起来

let file = <input type='file/>.file[0].slice(文件开始部分，文件结尾部分)
new FormData().append('file',file);
1
2

后台处理：接受多次文件，都往那个文件上追加

完整demo示例(vue)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id='app'></div>
    <script src='../node_modules/vue/dist/vue.js'></script>
    <script src='axios.js'></script>
    <script>
        let App = {
            template:`
                <div>
                    上传进度：{{rate}}%
                    <br/>
                    选择文件：<input type='file' name='file' @change='changeFile'/>
                    <button @click='sendAjax'>发请求</button>    
                    <button @click='cancel'>取消请求</button>    
                    <button @click='resume'>续传</button>    
                </div>
            `,
            data(){
                return{
                    res1:'',
                    res2:'',
                    file:{},
                    rate:0,
                    loaded:0,
                    source:{}
                }
            },
            created() {
                // 公共 上传
                this.$axios.defaults.onUploadProgress = (progressEvent)=>{
                    // 保存最后上传大小
                    this.loaded = progressEvent.loaded;
                    console.log(progressEvent.loaded);
                    console.log(progressEvent.total);
                    this.rate = (progressEvent.loaded/progressEvent.total)*100
                }
            },
            methods: {
                //续传
                resume(){
                    // 剪裁文件 this.file.size总文件大小
                    let fileData = this.file.slice(this.loaded+1,this.file.size)
                    let fd =new FormData();
                    fd.append('file',fileData);

                    // 为了续传以后再取消
                    const CancelToken = axios.CancelToken;
                    const source = CancelToken.source();
                    this.source = source;
                    this.$axios.post('list2.json',fd,{
                        //携带取消标识
                        CancelToken:source.token
                    })
                    .then(res=>{
                        console.log(res)
                    })
                    .catch(err=>{
                        console.log(err)
                    })
                },
                // 取消请求---取消有问题
                cancel(){
                    this.source.cancel(); //
                },
                sendAjax(){
                    const CancelToken = axios.CancelToken;
                    const source = CancelToken.source(); //创建标识请求的源对象

                    // 保存起来方便取消调用
                    this.source = source; // 将对象存储到组件
                    

                    let fd =new FormData();
                    fd.append('file',this.file);
                    this.$axios.defaults.baseURL = '../axios/data/';
                    
                    this.$axios.post('list2.json',fd,{
                        //携带取消标识
                        CancelToken:source.token // 请求的option对象
                    })
                    .then(res=>{
                        console.log(res)
                    })
                    .catch(err=>{
                        console.log(err)
                    })
                },
                changeFile(e){
                    console.log(e.target.files[0])
                    this.file = e.target.files[0]
                }
            },
        }
        // 组件内的每一个this对象，都是vue的孩子
        // Vue祖宗的原型数据，就会共享给所有的孩子
        Vue.prototype.$axios = axios;

        new Vue({
            el:'#app',
            components:{
                app:App
            },
            template:`<app/>`
        })
    </script>
</body>
</html>
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/299815