1. 概念

是一个异步请求技术

基于XMLHttpRequest对象发起的请求都是异步请求

ajax可以用来发送异步请求，但过气了。vue全家桶都是采用的axios

2. 使用demo

下载地址 unpkg.com/axios/dist/...

get 方式请求

response.data 里面就是后端的数据

xml 复制代码

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
      axios
        .get("http://localhost:6001/axios/findAll?username=dingyawu")
        .then(function (response) {
          console.log(response.data);
        })
        .catch(function (err) {
          console.log(err);
        });
    </script>

post请求

axios在发送post请求传参如果是对象，axios会自动将对象转化为jsonstr，使用application/json 的请求头向后端传递参数
axios的post请求传递参数的两种方式 "name=roy&age=23", 或者传递一个对象

xml 复制代码

    <script type="text/javascript">
     
      const params = {
        name: "roy",
        age: 23,
      };
      axios
        .post("http://localhost:6001/axios/save", params)
        .then(function (response) {
          console.log(response.data);
        })
        .catch(function (err) {
          console.log(err);
        });
    </script>

并发请求

针对并发请求用到axios.all(), 用axios.spread() 来汇总请求结果

xml 复制代码

    <script type="text/javascript">
      function findAll() {
        return axios.get(
          "http://localhost:6001/axios/findAll?username=dingyawu"
        );
      }
      const params = {
        name: "roy",
        age: 23,
      };

      function save() {
        return axios.post("http://localhost:6001/axios/save", params);
      }

      axios.all([findAll(), save()]).then(
        axios.spread(function (result1, result2) {
          console.log(result1.data);
          console.log(result2.data);
        })
      );
    </script>