Front-end development, must know axios

1. Introduction to axios

Combine network data for application development in VUE

Currently very popular network requests library , designed to send the request , internal or ajax, used after encapsulation more convenient (do not know what Ajax is, can refer to my other article:. Ajax Introduction )
Axios function : It can help us complete the sending of ajax asynchronous requests in the browser .

After Vue2.0 , You Yuxi recommends that you replace JQuery ajax with axios

2. Getting started with axios

Use steps :

1) Guide package

<!-- 官网提供的 axios 在线地址 --> 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2) Request method, take GET and POST as examples

GET

axios.get(地址?key=value&key2=value2).then(function(response){},function(error) {});

POST

axios.post(地址,{key:value,key2:value2}).then(function(response) {},function(error){})

3) According to the interface document , access the test interface and test

Interface 1: random jokes

Request address : https://autumnfish.cn/api/joke/list

Request method : get

Request parameters : num ( number of jokes , numbers )

Response content : random jokes

Interface 2: user registration

Request address : https://autumnfish.cn/api/user/reg

Request method : post

Request parameters : username ( user name , string )

Response content : registration success or failure

Code example

axios interface test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*
        axios总结
          1.axios必须要导包
          2.使用get或者post方式发送请求
          3.then方法 中的回调函数,会在请求成功或者失败的时候被触发
          4.通过回调函数的形参,可以获取响应的内容
      */

    </style>
  </head>
  <body>
    <input type="button" value="get请求" id="get" />
    <input type="button" value="post请求" id="post" />
  </body>
  <script src="./js/axios.min.js"></script>
  <script>
    /*
    随机笑话接口测试
      请求地址:https://autumnfish.cn/api/joke/list
      请求方法:get
      请求参数:num(笑话条数,数字)
      响应内容:随机笑话
  */
    document.getElementById("get").onclick = function () {
      axios.get("https://autumnfish.cn/api/joke/list?num=1").then(
        function (resp) {
          //调用成功
          console.log(resp);
        },
        function (err) {
          //调用失败
          console.log(err);
        }
      );
    };

    /*
    用户注册
      请求地址:https://autumnfish.cn/api/user/reg
      请求方法:post
      请求参数:username:"用户民"
      响应内容:注册成功或失败
    */
    document.getElementById("post").onclick = function () {
      axios
        .post("https://autumnfish.cn/api/user/reg", { username: "张abc" })
        .then(
          function (resp) {
            console.log(resp);
          },
          function (error) {
            console.log(error);
          }
        );
    };
  </script>
</html>

3. Axios summary

axios must import the package to use
Use get or post method , you may send a request
then method callback functions , triggers when the request was successful or failed request
Content may be obtained by the parameter response callback function , or an error message

4. Get the joke case

The following is a case of getting jokes through vue+axios . If you don’t know Vue.js, please see my other article: Vue.js Quick Start

1) Interface : Get a random joke

Request address : https://autumnfish.cn/api/joke

Request method : get

Request parameters : none

Response content : random jokes

2) Code example

Joke case.HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue+axios获取笑话</title>
    <style>
      /*
        1.axios回调函数中,this的指向已经改变,无法访问data中的数据
        2.解决方案: 将this进行保存
      */
    </style>
  </head>
  <body>
    <div id="app">
      <input type="button" value="点击获取一个笑话" @click="getJoke" />
      <p>{
     
     {joke}}</p>
    </div>
  </body>

  <script src="../js/vue.min.js"></script>
  <script src="../js/axios.min.js"></script>
  <script>
    /*
        请求地址:https://autumnfish.cn/api/joke
        请求方法:get
        请求参数:无
        响应内容:随机笑话
    */
    var VM = new Vue({
      el: "#app",
      data: {
        joke: "笑口常开",
      },
      methods: {
        getJoke: function () {
          //把this进行保存
          var that = this;

          //异步访问
          axios.get("https://autumnfish.cn/api/joke?num=1").then(
            function (resp) {
              console.log(resp.data);
              //在回调函数内部 ,this无法正常使用,需要提前保存起来
              console.log(that.joke); //undefined
              that.joke = resp.data;
            },
            function (error) {}
          );
        },
      },
    });
  </script>
</html>

3) Operation results

4) Case summary

The this point in the axios callback function has changed , and the data in data cannot be accessed
Solution : will this save , the callback function directly using the saved variables of this can be