零基础带你学会axios

一、axios

  Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
  axios：前端通信框架，因为vue的边界很明确，就是为了处理DOM，所以并不具备通信功能，此时就需要额外使用一个通信框架与服务器交互；当然也可以使用jQuery提供的AJAX通信功能。

二、axios的基本使用

安装、引入axios

npm install axios --save
<script src="../node_modules/axios/dist/axios.js"></script>

get请求

默认方式发送（get）请求:

<script>
    axios({  
     	url:'http://coding.gardel.top:8848/devoting/login'
    }).then(res=>{
    	console.log(res);
    })
</script>

发送get有参请求

<script>
    axios({
   		url:'http://coding.gardel.top:8848/devoting/login?username=张三'
    }).then(res=>{
    	console.log(res);
    })
</script>

<script>
    axios({
   		url:'http://coding.gardel.top:8848/devoting/login'，
        method:"get",
        data:{
           username:'张三'
        }
    }).then(res=>{
    	console.log(res);
    })
</script>

post请求

发送无参的post请求

<script>
	axios({
        url:"http://coding.gardel.top:8848/devoting/login",
        method:"post"
    }).then(res=>{
    	console.log(res);
	})    
</script>

发送post的有参请求

<script>
	axios({
        url:"http://coding.gardel.top:8848/devoting/login",
        method:"post",
        data:{
            username:"张三"
        }
    }).then(res=>{
    	console.log(res);
	})    
</script>

//使用axios.post发送有参请求 只修改前端代码
<script>
    axios.post('http://localhost:9999/student/student/findStudentByName',"name=张三&age=10").then(res=>{
    	console.log(res);
    });
</script>
//发送post请求携带参数 直接试用"name=张三&age=10"

这里是引用

三、并发请求的使用

  并发请求使用在需要同时进行多个请求，并统一进行处理返回值。

<script>
    axios.all([
    	axios.get('http://localhost:9999/student/student/getAllStudent'),
    	axios.get('http://localhost:9999/student/student/findStudentById',{params:{id:1}})
    ]).then(res=>{//请求成功响应的是一个数组
    	console.log(res[0]);
   	 	console.log("----------");
    	console.log(res[1]);
    }).catch(err=>{
    	console.log(err);
    })
</script>

使用spread方法处理响应数组结果

<script>
    axios.all([
        axios.get('http://localhost:9999/student/student/getAllStudent'),
        axios.get('http://localhost:9999/student/student/findStudentById',{params:{id:1}})
    ]).then(
        axios.spread((res1,res2)=>{
            console.log(res1);
            console.log(res2);
        })
    ).catch(err=>{
    	console.log(err);
    })
</script>

四、全局配置的使用

  有时候,我们在一个项目中需要发送多个请求,到那时这些请求的配置内容大部分是一样的,如url相同,只不过发送的数据不同,
　　比如,post请求时,请求头等信息都是不变的
　　此时,我们就需要反复的书写这些相同的配置,为了解决这些问题,我们引入了axios全局默认配置

<script>
   	axios.defaults.baseURL="http://coding.gardel.top:8848/devoting";
	axios.defaults.timeout=5000;//若超时则报错
	axios({
        url:"/login",
        data:{
            username:req.body.username,
            password:req.body.password
        },
    	method:"post"
	}).then(data=>{
    	console.log(data.headers.authorization)
        res.send(data.headers.authorization)
    })
</script>

五、axios实例

  全局配置作用于全局，若想局部使用就需要用到axios的实例对象

<script>
    let newURL=axios.create({
        baseURL:"http://coding.gardel.top:8848/devoting",
        timeout:5000
    })
    newURL({
        url:"/login",
        data:{
            username:req.body.username,
            password:req.body.password
        }
    }).then(data=>{
        console.log(data.headers.authorization)
        res.send(data.headers.authorization)
    }).catch(err=>{
        console.log(err);
    })
</script>

六、axios的拦截器

  axios给我们提供了两大类拦截器 一种是请求方向的拦截（成功请求，失败的）,另一种是响应方向的（成功的 失败的）
  拦截器的作用:

• 用于我们在网络请求的时候在发起请求或者响应时对操作进行响应的处理
• 发起请求时可以添加网页加载的动画 强制登录
• 响应的时候可以进行相应的数据处理

请求拦截

<script>
	axios.interceptors.request.use(config=>{
        console.log("我进入拦截器了")
        return config;
    },error => {
        console.log(error)
    })
    axios({
        url:"http://coding.gardel.top:8848/devoting/login",
        data:{
            username:req.body.username,
            password:req.body.password
        },
        method:"post"
    }).then(data=>{
        console.log(data);
    }).catch(err=>{
        console.log(err)
    })
</script>

响应拦截

<script>
	axios.interceptors.response.use(config=>{
        console.log("我进入拦截器了")
        return config;
    },error => {
        console.log(error)
    })
    axios({
        url:"http://coding.gardel.top:8848/devoting/login",
        data:{
            username:req.body.username,
            password:req.body.password
        },
        method:"post"
    }).then(data=>{
        console.log(data);
    }).catch(err=>{
        console.log(err)
    })
</script>

  以上就是我的axios的一些基础知识的总结，我学的也不是太好，若有什么总结不到位的地方，希望大家可以指正！！！