Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。Axios 使用简单，包尺寸小且提供了易于扩展的接口。

axio | github

调用

直接使用github仓库里的
<script src="[https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>](https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>)
但这个链接是在国外，访问起来会比较慢。
可以用bootcdn的
<script src="[https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>](https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>)
直接调用浏览器可能会有警告，可以在上面代码中添加_crossorigin_="anonymous"。具体原理暂不掌握。

直接发送AJAX请求

server.js

  1. //axios服务
  2. app.all('/axios-server',(request, response)=>{
  3.     response.setHeader("Access-Control-Allow-Origin","*");
  4.     response.setHeader("Access-Control-Allow-Headers","*");
  5.     const data = {
  6.         name: 'Axiosdataname',
  7.     }
  8.     response.send(JSON.stringify(data));
  9. })

html

  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>axios 发送 AJAX 请求</title>
  8.     <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
  9. </head>
  10. <body> 
  11.     <button>GET</button>
  12.     <button>POST</button>
  13.     <button>AJAX</button>
  14.     <script>
  15.         const btns = document.querySelectorAll("button");
  16.         //配置 baseURL
  17.         axios.defaults.baseURL = 'http://127.0.0.1:8000';//设置完，下面*就不用写前面那一串了
  18.         btns[0].onclick = function(){
  19.             axios.get('/axios-server',{//*
  20.                 //url
  21.                 params:{
  22.                     id:100,
  23.                     vip:7
  24.                 },
  25.                 //请求头信息
  26.                 headers:{
  27.                     name:"axiosName",
  28.                     age:18
  29.                 }
  30.             })
  31.             .then(value=>{
  32.                 console.log(value);
  33.             });
  34.         }
  36.         btns[1].onclick = function(){
  37.             //注意axios post的参数(url,data,config)，可以去看文档
  38.             axios.post('/axios-server',{
  39.                 //请求体
  40.                 username:"admin",
  41.                 password:"adminPassword"   
  42.             },{    
  43.                 //url
  44.                 params:{
  45.                     id:200,
  46.                     vip:9
  47.                 },
  48.                 //请求头参数
  49.                 headers:{
  50.                     height:100,
  51.                     weight:180
  52.                 }                     
  53.             });
  54.         }
  56.     </script>
  57. </body>
  58. </html>

//配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';//设置完，下面*就不用写前面那一串了

函数发送AJAX请求

  1. <body> 
  2.     <button>GET</button>
  3.     <button>POST</button>
  4.     <button>AJAX</button>
  5.     <script>      
  6.       .........
  7.                         btns[2].onclick = function(){
  8.             // console.log(this);
  9.             axios({
  10.                 //请求方法，不加默认是get
  11.                 method:'POST',
  12.                 //url
  13.                 url:'/axios-server',
  14.                 //url参数
  15.                 params:{
  16.                     vip:10,
  17.                     level:30
  18.                 },
  19.                 //头信息
  20.                 headers:{
  21.                     a:100,
  22.                     b:200
  23.                 },
  24.                 //请求体参数
  25.                 data:{
  26.                     username:'admin',
  27.                     password:'adminpassword'
  28.                 }
  29.             }).then(response=>{
  30.                 // console.log(response);
  31.                 //响应状态码
  32.                 console.log(response.status);
  33.                 //响应状态字符串
  34.                 console.log(response.statusText);
  35.                 //响应头信息
  36.                 console.log(response.headers);
  37.                 //响应体
  38.                 console.log(response.data);
  39.             })
  40.         }
  41.     </script>
  42. </body>

axios 函数调用发送请求之后 返回的 就是一个 promise 实例