前后端分离，必须知道的axios

曾经终败给现在 2022-11-03 14:29 239阅读 0赞

## **1. axios****介绍** ##

VUE中结合网络数据进行应用的开发

*  目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便.（不知道Ajax是什么，可参考我另外篇文章：[Ajax介绍][Ajax]）
 *  axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.

axios官网：[http://www.axios-js.com/zh-cn/docs/][http_www.axios-js.com_zh-cn_docs]

> Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax

## **2. axios****入门**  ##

使用步骤 :

### 1）导包 ###

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

### 2）请求方式,以GET和POST举例  ###

**GET**

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

![20210228194035387.png][]

**POST**

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

### 3） 根据接口文档, 访问测试接口,进行测试 ###

**接口** **1:** **随机笑话**

> 请求地址 :https://autumnfish.cn/api/joke/list 
> 
> 请求方法 :get 
> 
> 请求参数 :num( 笑话条数 , 数字 ) 
> 
> 响应内容 : 随机笑话

**接口** **2:** **用户注册**

> 请求地址 :https://autumnfish.cn/api/user/reg 
> 
> 请求方法 :post 
> 
> 请求参数 :username( 用户名 , 字符串 ) 
> 
> 响应内容 : 注册成功或失败

**代码示例**

axios接口测试.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****总结** ##

1.  axios 必须导包才能使用 
2.  使用get或者post方法,就可以发送请求 
3.  then方法中的回调函数,会在请求成功或者请求失败的时候触发 
4.  通过回调函数的形参可以获取响应的内容,或者错误信息

## **4. ****获取笑话案例**  ##

下面是通过vue+axios 完成一个获取笑话的案例. 不了解Vue.js，请看我的另外篇文章：[Vue.js 快速入门][Vue.js]

### **1）接口****:** **随机获取一条笑话**  ###

> 请求地址 :https://autumnfish.cn/api/joke 
> 
> 请求方法 :get 
> 
> 请求参数 : 无 
> 
> 响应内容 : 随机笑话

### **2）代码示例** ###

笑话案例.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）运行结果** ###

![20210228195329377.png][]

![20210228195421209.png][]

### **4）案例总结**  ###

1.  axios回调函数中this指向已经改变,无法访问data中的数据 
2.  解决方案: 将this进行保存,回调函数中直接使用保存this的变量即可

[Ajax]: https://blog.csdn.net/u012660464/article/details/114226791
[http_www.axios-js.com_zh-cn_docs]: http://www.axios-js.com/zh-cn/docs/
[20210228194035387.png]: /images/20221023/2f9333d73092443ca33c8cbc44c1218e.png
[Vue.js]: https://blog.csdn.net/u012660464/article/details/114170056
[20210228195329377.png]: /images/20221023/67a59919f5d641ee8019dba52a698c9d.png
[20210228195421209.png]: /images/20221023/a858cd0f0ba34b50ac659015a6134e44.png