全称 Asynchronous JavaScript And XML, 异步的 JavaScript 和 XML.

XML

XML 全称 Extenshible Markup Language 可拓展标记语言, 本质是一种数据格式, 可以用来存储复杂的数据结构.

Ajax 其作用有如下 2 点:

与服务器进行数据交换: 通过 Ajax 可以给服务器发送请求, 并获取服务器响应的数据.
异步交互: 可以在 不重新加载整个页面 的情况下, 与服务器交换数据并 更新部分网页 的技术, 如: 搜索联想、用户名是否可用的校验等等.

同步请求发送时, 在服务器处理请求的过程中, 浏览器页面只能干等着.

而 Ajax 这种异步请求发送, 在服务器处理请求的过程中, 浏览器页面还可以做其他的操作.

Axios - 发送 Ajax 请求工具

使用原生的 Ajax 请求的代码编写较繁琐, Axious 由此诞生.
Axios 是对原生的 Ajax 进行封装, 简化书写.

Axios 官网 https://www.axios-http.cn

入门案例

发起一个前端请求, 有 Axios 的简化, 只需简单两步.

1). 引入 Axios 文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2). 使用 Axios 发送请求( 直接调用 axios 函数即可)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Axios入门程序</title>
</head>
<body>

  <button id="getData">GET</button>
  <button id="postData">POST</button>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    //GET请求
    document.querySelector('#getData').onclick = function() {
      axios({ // 封装了一个对象
        url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',// 指定请求路径
        method:'get' // 中指定请求方式
      }).then(function(res) { // 成功回调函数, 服务端请求处理完毕后调用的函数
        console.log(res.data);
      }).catch(function(err) { // 失败回调函数
        console.log(err);
      })
    }

    //POST请求
    document.querySelector('#postData').onclick = function() {
      axios({
        url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
        method:'post'
        data: 'id=1' // 如果是POST, 还可以指定请求数据, 请求体
      }).then(function(res) {
        console.log(res.data);
      }).catch(function(err) {
        console.log(err);
      })
    }
  </script>
</body>
</html>

其中, Axios 还能以此更简介的方式:

axios.请求方式(url[,data [, config]])

这也是在项目中更常用的方式.

axios.get("https://mock.apifox.cn/m1/3083103-0-default/emps/list").then(result => {
    console.log(result.data);
})

POST

axios.post("https://mock.apifox.cn/m1/3083103-0-default/emps/update","id=1").then(result => {
    console.log(result.data);
})

异步变为同步操作

有时为了可读性和维护性, 代码又需要让异步变为同步操作.

async就是来声明一个异步方法，await是用来等待异步任务执行.

async search() {
  //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表
  const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
  this.empList = result.data.data;
},

渊痕爪记

Ajax

Axios - 发送 Ajax 请求工具

入门案例

异步变为同步操作