axios教程

一、axios的基本使用

axios介绍: https://www.kancloud.cn/yunye/axios/234845

1、axios 发送get请求 带参

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
方式一：
axios({
      	 url: 'http://127.0.0.1/user/signout?id=1',
         method: 'get',
        }).then(res=>{
            console.log(res)
        })
方式二：
axios({
      	 url: 'http://127.0.0.1/user/signout',
         method: 'get',
         params：{
         	'id': 1 //url上拼接了?id=1
         } }).then(res=>{
            console.log(res)
        })

2、post方式发送请求[无参]

axios({
      	 url: 'http://127.0.0.1/user/signout',
         method: 'post',
        }).then(res=>{
            console.log(res)
        })     

使用axios发送 post请求[带参] 使用data传递
axios({
      	 url: 'http://127.0.0.1/user/signout',
         method: 'post',
         data:{
         	'id':1
         }
        }).then(res=>{
            console.log(res)
        })
 注意： axios使用post携带参数请求默认发送json格式
 解决方式一： data改为params属性进行数据的传递
 解决方式二：“name=张三”
 解决方式三：服务器端给接受的参数加上@requsetBody(java)

二、axios请求方式

1、使用axios.get 方式发送无参请求
axios.get('url').then(res=>{
	console.log(res),
	}).catch(err=>{
		console.log(err),
	})

2、使用axios.get 发送有参请求
 axios.get('http://url',{params:{id:1}}).then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })

3、使用axios.post 发送无参请求
axios.post('http://url').then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })

4、 使用axios.post 发送有参请求
axios.post('http://url', 'name=张三&id=10').then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })

三、axios的并发请求

1、 axios并发请求，
  axios.all([
            axios.get('url'),
            axios.get('url2', {params:{id:1}})
        ]).then(res=>{//请求成功响应的是一个数组
            console.log(res[0]);
            console.log(res[1]);
        }).catch(err=>{
            console.log(err);
        })

2、使用axios.spread进行分组
 axios.all([
            axios.get('url'),
            axios.get('url2', {params:{id:1}})
        ]).then(
            axios.spread((res1,res2)=>{
                console.log(res1);
                console.log(res2);
            })
        ).catch(err=>{
            console.log(err);
        })

四、axios的全局配置

 axios.defaults.baseURL = 'http://127.0.0.1'; //配置全局属性
 axios.defaults.timeout = 5000;
 axios.get('login').then(res=>{ //在全局配置基础上去网络请求
       console.log(res);
   })

五、axios 实例

//创建axios实例
        let newVar = axios.create({
            baseURL:'http://127.0.0.1',
            timeout: 5000,
        });
        //使用实例
        newVar({
            url: 'signin'
        }).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })

六、axios拦截器

axios给我们提供了两类拦截器：
一种是请求方向的拦截（成功的，失败的）
一种是响应方式的的拦截器

拦截器的作用：用于我们在网络请求的时候 发起请求或者响应时，对操作进行响应的处理
例如：发起请求时可以添加网页加载的动画， 使用token认证的时可以在请求前判断用户有无token
响应时对数据进行过滤和处理

1. 请求方向的拦截器
axios.interceptors.request.use(config=>{
            console.log('进入请求拦截器');
            console.log(config);
            //拦截完请求之后一定要！进行放行
            return config.data;
        }, err=>{
            console.log('请求方向失败');
            console.log(err);
        });

axios.get('http://').then(res=>{
            console.log(res);
        })

2. 响应方向拦截器
  axios.interceptors.response.use(config=>{
            console.log('进入响应拦截器');
            console.log(config);
            //拦截完请求之后进行放行
            return config.data;
        }, err=>{
            console.log('响应方向失败');
            console.log(err);
        });

        axios.get('http://').then(res=>{
            console.log(res);
        })

七、原生ajax实现

var username = document.getElementById("txtUserName").value;
            var password = document.getElementById("txtpassword").value;
            {#console.log(username,password);#}
            {#console.log(params)#}
            $.ajax({
                type: "POST",
                dataType: "json",//服务器返回的数据类型
                contentType: "application/json",//post请求的信息格式
                url: "/user/signin",
                {#data: $('#form1').serialize(),#}
                data: JSON.stringify({
                        "username":username,
                        'password':password
                }),
                success: function (result) {
                    console.log(result);//在浏览器中打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error: function () {
                    alert("异常！");
                }
            });