axios 使用2--全局配置、拦截器、取消请求、断点续传

1、基本使用

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

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('数据获取失败')
    })
}

2、合并请求

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

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)
    })
}

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';//默认头修改个别的

4、拦截器

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

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

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

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

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

完整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>

5、取消请求

API3取消步骤

（1）发送请求前

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

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

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

（3）取消请求

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

断点续传

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

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

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

完整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>

kingsha.

发布了21 篇原创文章 · 获赞 0 · 访问量 1412

私信关注