axios简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,是功能强大的网络请求库。是对ajax的封装。
注意事项:
- axios必须导入才可以使用
- 使用get或post方法即可发送对应的请求
- then方法中的调用函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取响应内容,或错误信息
GitHub地址:https://github.com/axios/axios
中文API文档:http://www.axios-js.com/
使用axios的原因
- 原始ajax分为xhr4步/6步,过于繁琐。
- 自己封装函数,考虑不全面
- Query中
$.ajax:
问题,在vue中几乎不再使用DOM操作,几乎不用jQuery了。如果单是为了引入$.ajax
函数而引入整个jQuery库,有点小题大做。
- Vue官方提供了一套发送ajax请求的组件:
vue-resource
,后来,Vue发现哪个框架都有自己的发送ajax请求就得函数,而且都大同小异,所以,Vue认为自己没有必要再重新开放按一套ajax函数库,所以vue-resource
已经不再维护。
- Vue官方帮我们选了一个时髦好用的ajax函数库: axios,所以将来在框架中发送ajax请求,几乎都用axios。
何时使用axios:
只要在Vue框架中,发送ajax请求服务器端数据,都用axios
axios基本使用
- 在项目中引入axios.js,才能引入axios函数库, 引入的顺序和vue.js无关
1
| <script src="js/axios.js">
|
- 设置所有服务器端接口的公共域名部分
1
| axios.defaults.baseURL=“服务器端域名地址部分”
|
axios模板
1 2 3 4 5
| <!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios.get(地址?key=value&key2=value2).then(function(response){},function(err){}} axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){}}
|
axios使用案例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
| <body> <input type="button" value="get请求" class="get"> <input type="button" value="post请求" class="post"> <script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script> <script> /* 接口1:随机笑话 请求地址:https: 请求方法:get 请求参数:num(笑话条数,数字) 响应内容:随机笑话 */ document.querySelector(".get").onclick = function(){ axios.get("https://autumnfish.cn/api/joke/list1234?num=6") .then(function(response){ console.log(response); },function(err){ console.log(err); }) } /* 接口2:用户注册 请求地址:https: 请求方法:post 请求参数:username(用户名,字符串) 响应内容:注册成功或失败 */ document.querySelector(".post").onclick = function(){ axios.get("https://autumnfish.cn/api/user/reg",{username:"jack"}) .then(function(response){ console.log(response); },function(err){ console.log(err); }) } </script> </body>
|
axios结合Vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <body> <div id="app"> <input type="button" value="获取笑话" @click="getJoke"/> <p> {{ joke }}</p> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script> <script> /* 接口:随机获取一条笑话 请求地址:https: 请求方法:get 请求参数:无 响应内容:随机笑话 */ var app = new Vue({ el:"#app", data:{ joke:"很好笑的笑话" }, methods:{ getJoke:function(){ var that = this; axios.get("https://autumnfish.cn/api/joke").then (function(response){ console.log(response.data); that.joke = response.data; },function(err){ console.log(err); }) } } }) </script> </body>
|