2.链式语法底层原理: 在对象的方法中返回自身

==01-axios框架使用==

• axios(阿克休斯) 官网 : http://www.axios-js.com/

1. 1. axios是什么 ： 一个js框架，用于发送ajax请求（底层使用XMLHttpRequest）
   2. 为什么要学习axios : （1）vue，我们使用axios发送ajax请求 （2）今后实际开发也是使用axios发送ajax请求

1.1-axios基本使用

• 官网文档：http://www.axios-js.com/zh-cn/docs/

 <button class="btn1">基本使用</button>
    <button class="btn2">点我发送get请求</button>
    <button class="btn3">点我发送post请求</button>

    <!-- 导入axios -->
    <script src="./axios.js"></script>
    <script>
      //基本使用
      document.querySelector(".btn1").onclick = function() {
        /* 
        get() : 写url和请求参数
        then(res=>{}) : 成功回调， 相当于以前jq的success
        catch(err=>{}):失败回调，   一般可以省略不写
        then(()=>{}):完成回调，  表示请求完成，无论成功失败都会执行。一般可以省略不写
        */
        axios
          .get("https://autumnfish.cn/api/joke/list?num=10")
          .then(res => {
            //请求成功
            console.log(res)
          })
          .catch(err => {
            //请求失败 : (1)网址写错了  (2)网络出问题了
            console.log(err)
          })
          .then(() => {
            //请求完成
            console.log("本次请求完成")
          })
      }

      //get请求
      document.querySelector(".btn2").onclick = function() {
        //get方法第一个参数是url
        //get方法第二个参数是对象类型  { params:{get参数对象}  }
        axios
          .get("https://autumnfish.cn/api/joke/list", {
            params: {
              num: 10
            }
          })
          .then(res => {
            //请求成功
            console.log(res)
          })
      }

      //post请求
      document.querySelector(".btn3").onclick = function() {
        //post方法第一个参数是url
        //post方法第二个参数是对象类型  { post参数对象  }
        axios
          .post("http://www.liulongbin.top:3009/api/login", {
            username: "admin",
            password: "123456"
          })
          .then(res => {
            //请求成功
            console.log(res)
          })
          .catch(err => {
            //请求失败
            console.log(err)
          })
      }
    </script>

1.2-axios推荐用法

axios语法:
axios
.get('url')
.then(res=>{//请求成功})
.catch(err=>{//请求错误}
.then(()=>{//请求完成})

1.3-url跳转传参原理

• 原理1 : 给button标签 注册一个行内事件
• • <button onclick="事件处理代码"></button>
• 原理2：通过拼接url实现跳转传参
• • location.href = url?key=value
  • 网页跳转由路径决定，无论你后面拼接什么参数，都会跳转

原理3 ： 切割url的search参数，得到从其他页面传递过来的参数

let id = location.search.split('=')[1]