Axios（对AJAX封装和简化）

目录

1、怎样使用

引入Axios的js文件

使用Axios发送请求并获取响应结果

get请求

post请求

2、参数

3、回调函数

4、请求方法别名

Axios对Ajax进行了封装，可以简化书写。官网是 https://www.axios-http.cn。

1、怎样使用

1. 引入Axios的js文件

   <script src="js/axios-0.18.0.js"></script>

2. 使用Axios发送请求并获取响应结果

• get请求

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

• post请求

   axios({  //在js中{} 表示一个js对象，这个js对象中有三个属性
          method:"post",
          url:"http://localhost:8080/ajax-demo/axiosServlet",
          data:"username=mm"
      }).then(function (resp) {
          alert(resp.data);
      })

2、参数

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

method属性：用来设置请求方式，取值为get或post。
url属性：用来书写请求的资源路径。如果是get请求，需要将请求参数拼接到路径的后面，格式为：url?参数名=参数值&参数名2=参数值2。
data属性：作为请求体被发送的数据。也就是说如果是post请求，数据需要作为data属性的值。

3、回调函数

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

4、请求方法别名

为了简便， Axios 为所有支持的请求方法提供了别名，只关注get请求和post请求：

get请求 ： axios.get(url[,config])     

post请求：axios.post(url[,data[,config])

其中  [, config] 表示config参数是可选的，可以配置请求的各种参数，比如请求头、超时设置、身份验证等。

get请求可改为：

axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=mm").then(function (resp) {
    alert(resp.data);
});

post请求可改为：

axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=mm").then(function (resp) {
    alert(resp.data);
})