Vue.js进阶【5-4】axios入门

中文官方教程（推荐）：https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

官方教程：https://www.npmjs.com/package/axios

axios

在vue1.x的时候，vue的官方推荐HTTP请求工具是vue-resource，但是在vue2.0的时候将推荐工具改成了axios。

使用方式都差不多，但需要注意的是：接口返回的res并不直接是返回的数据，而是经过axios本身处理过的json对象。真正的数据在res.data里：

1 2 3

axios.get(url).then((res)=>{   this.data = res.data })

设置基址：

axios.defaults.baseURL = 'http://api.example.com';

axios与Vue

new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => (this.info = response)) } })

<div id="app"> {{ info }} </div>

 

Vue对象的生命周期

从上面vue构造函数内调动axios的例子让我们想到Vue对象的生命周期，请看下图：