Ajax_axios发送ajax请求

Ajax_axios发送ajax请求

这篇笔记主要讲一下axios基本的发送ajax请求的方法

axios在当前的前端行业里面是用的比较热门的一个

下面给大家分享一下它axios的一个基本用法

这段代码包含了post 跟get方法

从代码里面我们可以看出这个方法用起来是相对的简洁一些，其实axios还有很多的方法

在这里就不给大家一一的写出来了 大家如果真的想了解这个的话 也可以去到axios的官方文档里面 里面有更多更详细的介绍噢。

在这里解析一下 这个baseURL是对路径的一个简化 相当于定义一个固定的前缀参数 当我们后面用到的时候就可以省略前面固定的代码

只需要在后面的接口跟上路径名称即可，这样可以大大的节省我们在调试开发的时的 时间。

//baseURL是对路径的一个简化
      //配置baseURL
      axios.defaults.baseURL = "http://localhost:8000";

下面这个是完整的案例

这里说明一下axios是可以下载安装到电脑 也可以引用cnd，大家可以选择自己方式。

我这里调试的地址是自己搭建的一个服务器地址，大家用的时候可以改成自己的地址，如果没有自己的地址也可以搭建一个，

如果不会搭建大家可以看我前面的笔记Express框架的简单使用。

<button>GET</button>
  <button>POST</button>
  <button>AJAX</button>
  <script>
      const btns = document.querySelectorAll("button");
​
      //baseURL是对路径的一个简化
      //配置baseURL
      axios.defaults.baseURL = "http://localhost:8000";
      btns[0].onclick = function(){
          //GET请求
          // axios.get()
          axios.get('/axios',{
              //参数
              params:{
                  id:100,
                  vip:9
              }
              // //请求头信息
              // headers:{
              //     name:'at-lili'
              // }
          }).then(re =>{
              console.log(re);
          })
      }
​
      btns[1].onclick = function(){
          axios.post('/axios',{
              params:{
                  id: 007,
                  vip:225
              },
              //请求头
              Headers:{
                  height:186,
                  wight:90
              },
              //请求体
              data:{
                  user:'admin',
                  pass:'admin'
              }
​
          })
      }
​
  </script>