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

Posted Java修炼记

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前后端分离，必须知道的axios相关的知识，希望对你有一定的参考价值。

1. axios介绍


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

  • 目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便.

  • axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.

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

2. axios入门


使用步骤:

1）导包

<!-- 官网提供的 axios 在线地址 --> <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) {});
 

POST
 

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

 


 

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

接口1:随机笑话
 

 
 
请求方法:get
 
 
请求参数:num(笑话条数,数字)
 
 
响应内容:随机笑话
 

 

接口2:用户注册
 

 
 
请求方法: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.  
 
  2. 使用get或者post方法,就可以发送请求
    3.  
 
  3. then方法中的回调函数,会在请求成功或者请求失败的时候触发
    4.  
 
  4. 通过回调函数的形参可以获取响应的内容,或者错误信息

    5.  

 

4. 获取笑话案例
 


 

下面是通过vue+axios 完成一个获取笑话的案例. 
 


 

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

 
 
请求方法: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）运行结果
 

 

 


 

4）案例总结
 

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

 


以上是关于前后端分离，必须知道的axios的主要内容，如果未能解决你的问题，请参考以下文章
 

 前后端分离之使用axios进行前后端交互实现评论显示——django+mysql+vue+element


 前后端分离之使用axios进行前后端交互实现评论显示——django+mysql+vue+element


 vue前后端分离


 前后端分离之mockjs实战demo


 node与vue结合的前后端分离跨域问题


 SpringMVC前后端分离交互传参详细教程-