vue 网络应用
网络请求必须要有文档接口,文档接口中有定义的参数,以及服务器响应时返回的值的类型
axios网络请求库
导包后创建了全局对象axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
这里介绍两个常用的访问服务器的方法
axios.get(地址?key=value&key1=value1).then(function(response){},function(err){})
anxios.post(地址,{key:value,key1:value1}).then(function(response){},function(err){})
vue+axios
axios的请求方法中的回调函数的this是会改变的,所以我们可以在外面把this保存起来。
<div id="app">
<p>{{ msg }}</p>
<button @click="joke">随机产生一条笑话</button>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
msg: "这是笑话哈哈哈"
},
methods: {
joke: function () {
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(function (response) {
that.msg = response.data;
}, function (err) { })
}
}
});
</script>
如果在方法中要访问另外一个方法,用this,方法名称()