axios基本使用
axios 必须先导入才可以使用
使用 get 或者 post 方法即可发送对应的请求
then 方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容,或错误信息
注:响应错误方法时一般为 url 出错
axios官方文档:GitHub - axios/axios:用于浏览器和节点的基于 Promise 的 HTTP 客户端.js
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick = function(){
axios.get("https://autumnfish.cn/api/joke/list?num=10").then(function(response){
console.log(response);
}),function(err){
console.log(err)
}
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick = function (){
axios.post("https://autumnfish.cn/api/user/reg",
{ username:"小谭工作室" })
.then(function(response){
console.log(response);
},function(err){
console.log(err)
})
}
</script>
</body>
显示内容:
get请求
post请求
axios+vue
axios 回调函数中的 this 已经改变,无法访问到 data 中数据
把 this 保存起来,回调函数中直接使用保持的 this 即可
和本地应用的最大区别就是改变了 数据来源
<body>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="button" value="获取一条笑话" @click="getJoke">
<p> {{ joke }} </p>
</div>
<script>
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>
展示效果:
天气信息获取
应用的逻辑代码建议和页面 分离 ,使用单独的 js 文件编写
axios 回调函数中 this 指向改变了,需要额外的保存一份
服务器返回的数据比较复杂时,获取的时候需要注意 层级 结构