使用准备

axios是目前前端最热门的Ajax工具库，也是vue和react推荐的Ajax工具包，对于其源码感兴趣的或者想了解其特性的，可以访问其github的链接：https://github.com/axios/axios

下载axios的方法有很多种，这里演示就不使用npn下载了，而是使用CND链接。
image.png
但是这里的CDN链接是国外的链接，访问起来会比较慢。
所以推荐网站bootcdn中的链接：https://www.bootcdn.cn/axios/，复制任意链接即可。

然后我们准备前端代码，这里只需要把上节课的按钮复制即可，但是需要把jQuery换成axios的包。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.       <!--引入axios的包-->
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
  10.     <style>
  11.         .container{
  12.             width: 500px;
  13.             height: 500px;
  14.             margin: 0 auto;
  15.             text-align: center;
  16.         }
  17.         .btn{
  18.             width: 150px;
  19.             height: 50px;
  20.             background-color: rgb(157, 201, 238);
  21.             border-radius: 10px;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="container">
  27.         <h2 class="page_header">axios发送Ajax请求</h2>
  28.         <hr/>
  29.         <button class="btn">GET</button>
  30.         <button class="btn">POST</button>
  31.         <button class="btn">通用型方法ajax</button>
  32.     </div>
  33.     <script>
  35.     </script>
  36. </body>
  37. </html>

然后需要准备服务端代码

  1. //省略部分内容，其他部分内容即为上一节的服务端代码
  2. app.all('/axios-server',(request,response)=>{
  3.     //设置响应头    设置允许跨域(第一次接触Ajax，不需要完全理解代码)
  4.     response.setHeader('Access-Control-Allow-Origin','*');
  5.     //允许接收所有类型的响应头
  6.     response.setHeader('Access-Control-Allow-Headers','*');
  7.     const data = {
  8.         "name": "yuque"
  9.     };
  10.     let str = JSON.stringify(data);
  11.     //设置响应体
  12.     response.send(str);
  13. })

GET请求

axios发生get请求的方法很简单，使用axios.get()方法就好了。

  1. <script>
  2.         const btn = document.querySelectorAll('.btn');
  3.         //配置baseURL，简化路径
  4.         axios.defaults.baseURL = 'http://127.0.0.1:8000';
  5.         btn[0].onclick = function(){
  6.             //GET请求，如果每配置baseURL，这里需要写完整路径
  7.             axios.get('/axios-server', {
  8.                 //url 参数
  9.                 params: {
  10.                     id:100,
  11.                     vip:7
  12.                 },
  13.                 //请求头信息
  14.                 headers:{
  15.                     name:"abc",
  16.                     age:18
  17.                 }
  18.             }).then(response => {
  19.               //获取响应结果
  20.                 console.log(response);
  21.             });
  22.         }
  23. </script>

来到浏览器发送GET请求，可以看到这里返回的是全部响应结果，包括响应状态码，状态字符串，甚至连响应体也自动帮我们转换成了js对象。

image.png

POST请求

POST请求和GET请求有一些区别，GET请求中，第二个参数就是请求内容；而在POST请求中，第二个参数是请求体内容，第三个参数中是其他请求参数。

  1. //省略部分内容
  2. ...
  3. btn[1].onclick = function(){
  4.       //上面已经设置baseURL了，这里可以使用简化的url链接
  5.       //第二个参数是请求体内容
  6.     axios.post('/axios-server',{username:"张三",password:"123456"},{
  7.       //url参数  
  8.       params:{
  9.           id:100,
  10.           vip:9
  11.         },
  12.       //请求头
  13.       headers:{
  14.           a:300,
  15.           b:400
  16.       }
  17.     }).then(response => {
  18.       //这个方法和GET方法一样
  19.           console.log(response);
  20.     })
  21. }

来到浏览器，可以看到axios发送了POST请求，但是需要注意这里的请求体内容是json格式字符串，而不是url查询字符串形式。

image.png
image.png

通用型方式

通用性方法非常简单，和jQuery也很像，直接使用axios()函数即可，这种方式非常的清晰，自上而下的填写请求参数即可。

  1. //省略部分内容
  2. ...
  3. btn[2].onclick = function(){
  4.     axios({
  5.       //请求方式
  6.       method: "POST",
  7.       //url
  8.       url: '/axios-server',
  9.       //url参数
  10.       params:{
  11.         id:150,
  12.         vip:10
  13.       },
  14.       //头信息
  15.       headers:{
  16.         a:100,
  17.         b:600
  18.       },
  19.       //请求体
  20.       data:{
  21.         username:"张三",
  22.         password:"123456"
  23.       }
  24.     }).then(response => {
  25.       //输出响应内容
  26.       console.log(response);
  27.       //响应状态码
  28.       console.log(response.status);
  29.       //响应字符串
  30.       console.log(response.statusText);
  31.       //响应体
  32.       console.log(response.data);
  33.     })
  34. }

来到浏览器，可以看到可以正常的发送我们的请求信息

image.png
image.png