フロントエンド開発、axiosを知っている必要があります

1.axiosの紹介

VUEでのアプリケーション開発のためにネットワークデータを組み合わせる

現在非常に人気のあるネットワークリクエストライブラリは、内部またはajaxのリクエストを送信するように設計されており、カプセル化後に使用すると便利です（Ajaxが何であるかわからない場合は、他の記事を参照してください：。Ajaxの概要）
Axios関数：ブラウザーでajax非同期リクエストの送信を完了するのに役立ちます。

後Vue2.0 、あなた玉渓は、あなたがすることをお勧めします置き換えるのjQueryのAJAXをとaxios

2.axiosの使用を開始する

手順を使用します：

1）ガイドパッケージ

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

2）リクエストメソッド、例としてGETとPOSTを取り上げます

取得する

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

役職

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

3）インターフェース文書によれば、アクセステストインターフェースと試験

インターフェース 1： ランダムジョーク

リクエストアドレス：https：//autumnfish.cn/api/joke/list

リクエストメソッド：get

リクエストパラメータ：num（ジョークの数、 numbers ）

応答内容：ランダムなジョーク

インターフェース 2： ユーザー登録

リクエストアドレス：https：//autumnfish.cn/api/user/reg

リクエスト方法：投稿

リクエストパラメータ：ユーザー名（ユーザー名、文字列）

回答内容：登録の成功または失敗

コード例

axiosインターフェース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の概要

axiosを使用するには、パッケージをインポートする必要があります
使用GETまたはポストの方法は、あなたが要求を送信することができます
次に、メソッドコールバック関数は、リクエストが成功または失敗したときにトリガーします
コンテンツは、パラメータ応答コールバック関数、またはエラーメッセージによって取得される場合があります

4. ジョークケースを入手する

以下は、vue + axiosを介してジョークを取得する場合です。Vue.jsがわからない場合は、他の記事を参照してください：Vue.jsクイックスタート

1）インターフェース ： ランダムなジョークを取得する

リクエストアドレス：https：//autumnfish.cn/api/joke

リクエストメソッド：get

リクエストパラメータ：なし

応答内容：ランダムなジョーク

2）コード例

ジョーク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）運用結果

4）ケースサマリー

axiosコールバック関数のこのポイントが変更され、データ内のデータにアクセスできなくなりました
ソリューション：意志これは、保存、コールバック関数は、直接保存使用してこの変数をすることができ