axios异步请求

1,引言

Axios 是一种异步请求技术,在页面中发送异步请求,获取对应数据后在页面中渲染,基于Ajax的封装。
1
安装: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1.1 Get方式的请求
 

<!--引入Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //axios异步请求get方式
    axios.get("http://localhost:8083/finddog?name=xiaohei")
         .then(function (response) {
                console.log(response.data);
            }).catch(function (err) {
                console.log(err);
    });


 

1.2 post方式的请求
 

//axios异步请求post方式
axios.post("http://localhost:8083/finddog",{
    name:"xiaolan",
    age:5,
}).then(function (response) {
    console.log(response.data);
}).catch(function (err) {
    console.log(err);
})



1.3 Axios的并发请求:
 

//一个请求
function getUserAccount() {
  return axios.get('/user/12345');
}
//二个请求
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
//同时发给后台
axios.all([getUserAccount(), getUserPermissions()]) //all()用来发送一组并发请求
  .then(axios.spread(function (respond1, respond2) {  //spread()将返回的结果汇总处理
      console.log(respond1.data);
      console.log(respond2.data);
  }));



案例:

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述