3分钟Axios入门

Axios

axios的基本使用

axios({
	url:"....."
    method:'get'/* 也可以'post'*/
}).then(res=>{
    console.log('res')
});

//axios发送get方式请求
axios({
	url:".....";
    params:{
    	id:1		/* 进行参数传递，寻找指定数据*/
	}
}).then(res=>{
    console.log('res')
});

axios send post request

axios({
	url:"xxxx/findStudentByName",
    method:'post'
    data{		
    	name:zhangsan					/* post request*/
	}

    params:{
      	name:zhangsan					/* data post date 会进行url拼接，不推荐*/
    }
}).then(res=>{
    console.log('res')
});

/* data post JSON 后台控制器接收到的name是null axios使用post携带参数默认使用application/json 
解决方式一：使用param进行参数传递
解决方式二：“name=张三”
解决方式三：服务器端给接受的参数加上@requestBody*/

axios请求方式

发送无参请求
<script>
    axios.get("url").then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log('timeout');
    })
</script>

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

//use post wihout date
<script>
    axios.post("https.........").then(res=>{
    console.log(res);
    }).catch(err=>{
        console.log('timeout');
    })
</script>

//use post request with date 
axios.post("https:...../findStudentByName","name=zhangsan").then(
    res=>{
    	console.log(res);
    }).catch(err=>{
        console.log('timeout');
    }
)

axios的并发请求

axios.all([
    axios.get('https:.......'),
    axios.get('https:........',{params:{id:1}})//会以数组的方式返回
]).then(
    res=>{
    	console.log(res[0]);
    	console.log(res[1]);
    }).catch(err=>{
        console.log('timeout');
    }
)

<script>
axios.all([
    axios.get('https:.......'),
    axios.get('https:........',{params:{id:1}})//会以数组的方式返回
]).then(
   	axios.spread((res1,res2)=>{
            console.log(res1);
            console.log(res2);
    	})
	).catch(err=>{
        console.log('timeout');
    }
)
</script>
//使用spread方法处理相应数组结果

axios 全局配置

axios.defaults.baseURL='http://localhost:8080/sutdent'
axios.defaults.timeout=5000;
axios.get('getAllStudent').then(res=>{
    console.log(res);
});
axios.post('pGet').then(res=>{
    console.log(res);
});

axios实例

let newVar = axios.create({
    baseURL:'https://localhost:999/student/student',
    timeout:5000
});
newVar({
    url:'getAllStudent'
}).then(res=>{
    console.log(res);
});

axios的拦截器

//axios给我们提供了两大类拦截器 一种是请求方向的拦截器（成功请求，失败的）
//另一种是相应方向的（成功的 失败的）
//作用： 用于我们在网络请求的时候在发起请求或者相应时对操作进行相应的处理
//发起请求时可以添加网页加载的动画 强制登陆
//相应的时候可以及运行相应的数据处理
axios.interceptors.request.use(config=>{//拦截
    console.log("进入请求拦截器");
    console.log(config);
    return config;//放行请求 没有这个就无法进行下一步
    
},err=>{
    console.log(err)
});
axios.get("xxxxxxxxxxx").then(res=>{
    console.log(res)
})

/*-------------------------------------------*/
axios.interceptors.response.use(config=>{//相应
    console.log("进入相应拦截器");
    return config.data；
    
},err=>{
    console.log(err)
});
axios.get("xxxxxxxxxxx").then(res=>{
    console.log(res)
})