axios拦截器使用

在这里插入图片描述

    <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css" />
    <style>
      body {
        padding: 20px;
      }

      .loading-box {
        position: fixed;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        box-shadow: 1px 1px 3px #efefef;
        display: none;
      }
    </style>
  </head>

  <body>
    <!-- 按钮 -->
    <button class="btn btn-primary" id="btn1">请求1</button>
    <button class="btn btn-info" id="btn2">请求2</button>
    <button class="btn btn-warning" id="btn3">请求3</button>

    <!-- loading 区域 -->
    <div class="loading-box">
      <div class="spinner-border m-5 text-primary" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>

    <script src="./lib/axios.js"></script>

    <script>
      /* axios拦截器工作流程
     1. axios 发起请求
     2. 执行 请求拦截器 : 添加ajax发送请求之前的操作
     3. 服务器 接收、处理、响应 请求
     4. 执行 响应拦截器 ： 添加服务器响应之后的操作
     4. axios 接收响应(执行then方法)
     */

      // 添加请求拦截器
      axios.interceptors.request.use(
        function(config) {
          // 可以操作这次请求了
          // console.log(config); // ajax请求参数;
          // 展示 loading 效果
          document.querySelector(".loading-box").style.display = "block"
          // 返回固定数据
          return config
        },
        function(error) {
          // 对请求错误做些什么 , 下面这句话，固定语法;
          return Promise.reject(error)
        }
      )

      // 添加响应拦截器
      axios.interceptors.response.use(
        function(response) {
          //服务器响应的数据
          // console.log(response);
          // 隐藏 loading 效果
          document.querySelector(".loading-box").style.display = "none"
          // 把服务器响应的数据返回给axios的then方法
          return response
        },
        function(error) {
          // 隐藏 loading 效果
          $(".loading-box").hide() // 失败了，也要隐藏 loadding 效果;
          // 对响应错误做点什么
          return Promise.reject(error)
        }
      )

      //按钮1
      document.querySelector("#btn1").onclick = function() {
        axios({
          url: "http://www.liulongbin.top:3009/api/news",
          method: "get"
        }).then(res => {
          //成功回调
          console.log(res)
        })
      }

      //按钮2
      document.querySelector("#btn2").onclick = function() {
        axios({
          url: "https://autumnfish.cn/fruitApi/fruits",
          method: "get"
        }).then(res => {
          //成功回调
          console.log(res)
        })
      }
      //按钮3
      document.querySelector("#btn3").onclick = function() {
        axios({
          url: "http://www.liulongbin.top:3009/api/login",
          method: "post",
          data:{ username:'admin',password:'123456'}
        }).then(res => {
          //成功回调
          console.log(res)
        })
      }
    </script>
  </body>
</html>

axios基地址


      //设置axios基地址 : 所有的请求 默认添加前面的 http://域名
      axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

ajax知识点补充

onreadstatechange事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
        /* XMLHttpRequest的两个事件

        1. onload事件 ：  接收服务器响应的数（一次请求，只会执行一次）
        2. onreadystatechang事件 : 作用与onload事件一致（一次请求，会执行多次）
             XMLHttpRequest对象的状态码 （xhr.readyState）
                0: 请求未建立  (创建了xhr对象，但是还没调用open)
                1: 服务器连接已建立 
                2. 请求已接收  (send之后,服务器已经接收了请求)
                3. 请求处理中 
                4. 请求已完成，且响应已就绪 （ 4状态码等同于onload事件 ）
        
      //(1).实例化ajax对象
      let xhr = new XMLHttpRequest()
      console.log(xhr.readyState)
      //(2).设置请求方法和地址
      xhr.open("post", "http://www.liulongbin.top:3009/api/login")
      //(3).设置请求头（post请求才需要设置）
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
      console.log(xhr.readyState)
      //(4).发送请求 ： 参数格式  'key=value'
      xhr.send("username=admin&password=123456")
      //(5).注册回调函数
      //a. onload 是新式浏览器才支持的
      //b. 如果要兼容更早的浏览器，可以使用 onreadystatechange
      //c. onreadystatechange触发时机 ： xhr.readState状态变化
      // xhr.onload = function() {};

      xhr.onreadystatechange = function() {
        console.log(xhr.readyState)
        //onreadystatechange会触发多次，一般需要判断xhr.readState == 4 才获取响应数据
        if (xhr.readyState == 4) {
          console.log(xhr.responseText)
        }
      }
    </script>
  </body>
</html>

Ajax组成部分了解

Ajax全称 Asynchronous Javascript And XML(异步的js与xml)
- 说人话：用js发送异步的网络请求
- A : Asynchronous 异步
  - 同步：指的是代码按照从上往下顺序执行
  - 异步：代码不会立即执行,而是要等一会儿执行
    - 目前我们学过的ECMAScript只有两个语法是异步的：定时器与 ajax
    - DOM事件也是属于异步的，但是这个是属于DOM的执行机制。所以一般在讨论js同步和异步的时候，主要以js为主，DOM一般不讨论。
- J：Javascript
- A ：And
- X : XML 与 XMLHttpRequest
  - XML ：解决跨平台数据传输。
    - 在JSON没有出来以前, 网络传输主要以XML格式数据为主。后来JSON问世，逐渐取代XML。但是由于ajax技术出来的比json早，因此xml这个称呼一直保留至今

get请求与post请求区别

1.传参方式不同
- get在url后面拼接(请求行)
- post在请求体传参
2.大小限制不同
- get有大小限制，不同浏览器大小限制不同。一般2-5 KB
- post没有大小限制
3.安全性不同
- get参数直接暴露在url，不安全(一般查询类数据都是get)
- post参数在请求体中，更加安全（一般登录注册必须是post）
4.传输速度不同
- get传输速度快
- post传输速度慢

其他请求方法了解

`实际开发中，前端无权决定请求方法，只需要根据后台接口文档来就可以了

put和pacth区别
- 全局更新 : put
- 局部更新: patch

请求方式	描述	特点
post	一般用于新增数据(提交数据)	请求体传参
get	一般用于查询数据(查询数据)	请求行(url)传参
delete	一般用于删除数据	请求体传参
put	一般用于更新全部数据	请求体传参
patch	一般用于更新局部数据	请求体传参