15-axios

1. axios

• axios是基于promise对ajax的一种封装
• ajax - mvc
• axios - mvvm

2. axios的基本使用

• 使用默认方式发送无参请求，默认使用 get 方式进行请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:"...", // 请求路径
    }).then(res=>{
        // 获得请求结果
        console.log(res);
    })
</script>

2-1. get请求

• axios 发送 get 的无参请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:"...", // 请求路径
        method:"get", // 通过method获取请求方式
    }).then(res=>{
        // 获得请求结果
        console.log(res);
    })
</script>

• axios 发送 get 的有参请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:"...？id=1", // 请求路径带参数
    }).then(res=>{
        // 获得请求结果
        console.log(res);
    })
</script>

• axios发送 get 请求的其他方式

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
     axios({
         url:"...", // 请求路径
         // 请求所需要查询的参数
         params:{
             id:"1",
             name:"张三"
         }
     }).then(res=>{
         // 获得请求结果
         console.log(res);
     })
 </script>

2-2. post请求

• 使用 axios 方式发送无参的 post 请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url:"...", // 请求路径
        method:"post", // 通过method获取请求方式
    }).then(res=>{
        // 获得请求结果
        console.log(res);
    })
</script>

• 使用 axios 方式发送带参的 post 请求

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
     axios({
         url:"...", // 请求路径
         method:"post", // 通过method获取请求方式，默认是get
         params:{
             name:"张三" // url上拼接上name参数
         }
     }).then(res=>{
         // 获得请求结果
         console.log(res);
     })
 </script>

• 使用 axios 方式发送带参的 post 请求且使用data传递
• 则后台控制器接收到的name是null，因为axios使用post携带参数请求默认使用的是application/json
  • 解决方式一：params属性进行数据的传递
  • 解决方式二：采用axios.post()方式且参数为"name=张三"
  • 解决方式三：服务端给接收的参数加上@requestBody

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
     axios({
         url:"...", // 请求路径
         method:"post", // 通过method获取请求方式，默认是get
         data:{
             name:"张三" // 后台接收为null
         }
     }).then(res=>{
         // 获得请求结果
         console.log(res);
     })
 </script>

3. axios请求方式

3-1. get请求

• 使用 axios.get 方式发送无参请求

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
     axios.get("...url").then(res=>{
         console.log(res);
     }).catch(err=>{
         console.log(err);
     })
 </script>

• 使用 axios.get 方式发送有参请求

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
     axios.get("...url",{params:{id:1,name:"张三"}}).then(res=>{
         console.log(res);
     }).catch(err=>{
         console.log(err);
     })
 </script>

3-2. post请求

• 使用 axios.post 方式发送无参请求

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
     axios.post("...url").then(res=>{
         console.log(res);
     }).catch(err=>{
         console.log(err);
     })
 </script>

• 使用 axios.post 方式发送有参请求

  • 发送post请求携带参数，直接使用"name=张三&age=10"

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
     axios.post("...url","name=张三&age=10").then(res=>{
         console.log(res);
     }).catch(err=>{
         console.log(err);
     })
 </script>

4. axios的并发请求

• axios的并发请求的普通处理

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
     axios.all([
         axios.get("...url"),
         axios.get("...url",{params:{id:1}})
     ]).then(res=>{
         // 对于并发请求，此时请求成功返回的响应res是一个数组
         console.log(res[0]);
         console.log(res[1]);
     }).catch(err=>{
         console.log(err);
     })
 </script>

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

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
     axios.all([
         axios.get("...url"),
         axios.get("...url",{params:{id:1}})
     ]).then(
         axios.spread((res1,res2)=>{
             console.log(res1);
             console.log(res2);
         })
     ).catch(err=>{
         console.log(err);
     })
 </script>

5. axios的全局配置

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    // 比如想要请求 http://localhost:3000/student/getAllStudent 以及 http://localhost:3000/student/getScoresByName
    // 先配置全局URL => http://localhost:3000/student
    // 配置全局属性
    axios.defaults.baseURL = "http://localhost:3000/student";
    axios.defaults.timeout = 5;
	
	// 在全局配置的基础上进行网络请求
    axios.get("getAllStudent").then(res => {
        console.log(res);
    });
    axios.post("getScoresByName").then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
</script>

6. axios的实例

• 实例的创建目的是为了封装公共配置
• 一个项目中不会只有一个公共 url
• 将多个公共 url 分别创建各自的实例
• 然后对于不同的实例再传入其相应的请求参数

// 创建axios的实例
let newVar1 = axios.create({
    baseUrl: 'http://localhost:3000/student',
    timeout: 5000
});

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

    // 需要请求 http://localhost:3000/student/getAllStudent 以及 http://localhost:3000/teacher/getAllTeachers

    // 创建axios的实例
    let newVar1 = axios.create({
        baseUrl: 'http://localhost:3000/student',
        timeout: 5000
    });

    let newVar2 = axios.create({
        baseUrl: 'http://localhost:3000/teacher',
        timeout: 5000
    })

    newVar1({
        url: 'getAllStudent'
    }).then(res => {
        console.log(res);
    });

    newVar2({
        url: 'getAllTeachers'
    }).then(res => {
        console.log(res);
    })
    
</script>

7. axios的拦截器

7-1. 拦截器的简要介绍

• axios提供了两大类拦截器
  • 请求方向的拦截
    • 请求成功
    • 请求失败
  • 响应方向的拦截
    • 请求成功
    • 请求失败
• 拦截器的作用：
  • 用于在网络请求的时候在发起请求或响应时对操作进行响应的处理
  • 可以在发起请求时添加网页加载的动画
  • 强制登录，在使用token认证之前判断用户有没有token
  • 响应时可以进行相应的数据处理，如数据过滤等

7-2. 请求方向的拦截器

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
 	 // 参数有两个，成功config和失败err
     axios.interceptors.request.use(config=>{
         console.log("进入请求拦截器");
         console.log(config);
       	 // 方向请求，如果不return config则服务器无法收到请求
         return config;
     },err=>{
         console.log("请求方向失败");
         console.log(err);
     });
     axios.get("http://localhost:3000/student/getAllStudent").then(res=>{
         console.log(res);
     });
 </script>

7-3. 响应方向的拦截器

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
     // 参数有两个，成功config和失败err
     axios.interceptors.response.use(config=>{
         console.log("进入响应拦截器");
         // 拦截响应返回的data数据并返回
         // 响应放行，若没有return config.data，则客户端无法收到服务器响应回来的数据
         return config.data;
     },err=>{
         console.log("请求方向失败");
         console.log(err);
     });
     axios.get("http://localhost:3000/student/getAllStudent").then(res=>{
         console.log(res);
     });
 </script>