Javaweb之Axios的详细解析

1.3 Axios

上述原生的Ajax请求的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写。Axios官网是：https://www.axios-http.cn

1.3.1 Axios的基本使用

Axios的使用比较简单，主要分为2步：

• 引入Axios文件

• 使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下

  • 发送 get 请求

    axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    })

  • 发送 post 请求

    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
        data:"username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    });

  axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：

  • method属性：用来设置请求方式的。取值为 get 或者 post。

  • url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。

  • data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

  then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

1.3.2 Axios快速入门

• 后端实现

  查询所有员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

  根据员工id删除员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/deleteById

• 前端实现

  首先在VS Code中创建js文件夹，与html同级，然后将资料/axios-0.18.0.js 文件拷贝到js目录下，然后创建名为02. Ajax-Axios.html的文件，工程结果如图所示：

• 

   

  然后在html中引入axios所依赖的js文件，并且提供2个按钮，绑定单击事件，分别用于点击时发送ajax请求，完整代码如下：

  
  
  
      
      
      
      
      
  
  
      
      
  ​
      
  ​
  
  
  

  然后分别使用Axios的方法，完整get请求和post请求的发送

  get请求代码如下：

  //通过axios发送异步请求-get
   axios({
       method: "get",
       url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
   }).then(result => {
       console.log(result.data);
   })

  post请求代码如下：

  //通过axios发送异步请求-post
   axios({
       method: "post",
       url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
       data: "id=1"
   }).then(result => {
       console.log(result.data);
   })

  浏览器打开，f12抓包，然后分别点击2个按钮，查看控制台效果如下：

• 

• 完整代码如下：

  
  
  
      
      
      
      
      
  
  
      
      
  ​
      
  ​