我们一般在用jq的时候会使用到ajax来进行与服务器之间的交流,vue中也提供了相应的类似于ajax的方法-axios来进行与服务器之间的数据传递
现在的这篇是最简单的使用,后续会添加上来复杂的使用
首先安装axios
引入方式:
$ npm install axios
//使用淘宝源
$ cnpm install axios
//或者使用cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
安装其他插件的时候,可以直接在 main.js 中引入并使用 Vue.use()来注册,但是 axios并不是vue插件,所以不能 使用Vue.use(),所以只能在每个需要发送请求的组件中即时引入。
为了解决这个问题,我们在引入 axios 之后,通过修改原型链,来更方便的使用。
//main.js
import axios from 'axios'
Vue.prototype.$http = axios 需要用到的地方
简单的post的请求
self.$axios.post(self.url, { page: self.cur_page }).then((res) => {
/* alert(res.data.data.list);*/
this.tableData = res.data.data.list;
this.page_total = this.tableData.length;
}, (res) => {
console.log("失败");
})
简单的get请求
mounted() {
this.$http.get('../../../static/json/hotcity.json').then((res) => {
this.hotcity = res.data.hotcity;
}, (res) => {
console.log("error");
})
}