Desarrollo de front-end, debe conocer axios

1. Introducción a axios

Combine datos de red para el desarrollo de aplicaciones en VUE

Biblioteca de solicitudes de red muy popular actualmente , diseñada para enviar la solicitud , interna o ajax, utilizada después de la encapsulación más conveniente (no sé qué es Ajax, puede consultar mi otro artículo: Introducción a Ajax )
Función Axios : Puede ayudarnos a completar el envío de solicitudes asíncronas ajax en el navegador .

Después de Vue2.0 , You Yuxi recomienda que reemplace JQuery ajax con axios

2. Empezando con axios

Siga los pasos :

1) Paquete de guía

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

2) Método de solicitud, tome GET y POST como ejemplos

OBTENER

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

CORREO

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

3) De acuerdo con el documento de interfaz , acceda a la interfaz de prueba y pruebe

Interfaz 1: bromas al azar

Dirección de solicitud : https://autumnfish.cn/api/joke/list

Método de solicitud : obtener

Parámetros de solicitud : num ( número de chistes , números )

Contenido de la respuesta : bromas al azar

Interfaz 2: registro de usuario

Dirección de solicitud : https://autumnfish.cn/api/user/reg

Método de solicitud : publicar

Parámetros de solicitud : nombre de usuario ( nombre de usuario , cadena )

Contenido de la respuesta : registro exitoso o incorrecto

Ejemplo de código

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. Resumen de Axios

axios debe importar el paquete para usar
Utilice el método get o post , puede enviar una solicitud
luego las funciones de devolución de llamada del método , se activa cuando la solicitud fue exitosa o falló la solicitud
El contenido puede ser obtenida por la función de devolución de llamada de respuesta de parámetro , o un mensaje de error

4. Obtén el caso de la broma

El siguiente es un caso de hacer bromas a través de vue + axios . Si no conoce Vue.js, consulte mi otro artículo: Inicio rápido de Vue.js

1) Interfaz : obtén una broma al azar

Dirección de solicitud : https://autumnfish.cn/api/joke

Método de solicitud : obtener

Parámetros de solicitud : ninguno

Contenido de la respuesta : bromas al azar

2) Ejemplo de código

Caso de broma.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) Resultados de la operación

4) Resumen del caso

Este punto en la función de devolución de llamada de axios ha cambiado y no se puede acceder a los datos en los datos.
Solución : si esto se guardará , la función de devolución de llamada directamente usando las variables guardadas de esto puede ser