vue中axios的简单使用

我们一般在用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");
     })
    }

  

上一篇:优雅的使用Python之软件管理


下一篇:第一百七十二节,jQuery,动画效果