axios框架使用

axios框架使用

    • axios基本使用
    • axios推荐用法

  • axios 官网 : http://www.axios-js.com/

    1. axios是什么 : 一个js框架,用于发送ajax请求(底层使用XMLHttpRequest)

axios基本使用

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

    
    <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>
  body>

axios推荐用法

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

    
    <script src="./axios.js">script>
    <script>
      /*
            介绍第三种使用方式
                axios({
                    url:'请求路径',
                    method:'请求方式',
                    data:{ post请求参数 },
                    params:{ get请求参数 }
                }).then(res=>{
                    //成功回调
                    //console.log(res)
                });
        */

      //基本使用
      document.querySelector('.btn1').onclick = function() {
        axios({
          url: "https://autumnfish.cn/api/joke/list?num=10",
          method: "get"
        }).then(res => {
          console.log(res)
        })
      }

      //get请求
      document.querySelector('.btn2').onclick = function() {
        axios({
          url: `https://autumnfish.cn/api/joke/list`,
          method: "get",
          params:{
              num:10
          }
        }).then(res => {
          console.log(res)
        })
      }

      //post请求
      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>


你可能感兴趣的:(前端,ajax)