vue+vue-router+axios+element-ui構建vue實戰項目之五（配置axios api接口調用）

上一篇文章《vue+vue-router+axios+element-ui構建vue實戰項目之四（修改App.vue、router和page文件）》中，我們重新配置了默認文件，使得項目能夠正常運行。但是，項目僅僅是‘跑’起來了，沒有涉及到ajax請求接口的內容。

vue本身是不支持ajax請求接口的，所以我們需要第三方工具。

一般使用較多的有vue-resource和axios，我以前學習的時候使用的是vue-resource，但是今天我們使用axios。

 

安裝axios

首先，我們先安裝axios工具，如下

npm install axios --save

好了，axios工具安裝完成。

有關axios的更多內容，請移步：https://www.npmjs.com/package/axios，中文資料請自行搜索。

 

調整main.js文件

調整后的代碼，如下

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
//全局注冊axios
Vue.prototype.$http = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

全局注冊后，就可以在其他頁面按照this.$http這樣的方式調用axios方法，不必每個頁面引入axios。

不多說，我們來試一下，是否注冊成功。

 

調整src/page/index.vue 文件

修改后的文件，內容如下

<template>
  <div>
    index page
  </div>
</template>
<script>
  export default {
    mounted (){
        this.$http.get('https://unpkg.com/axios@0.18.0/dist/axios.min.js')
        .then(res => {
          console.log(res);
        })
    }
  }
</script>

我們這里調用的接口是https://unpkg.com/axios@0.18.0/dist/axios.min.js，返回的結果就是axios的源碼。

從瀏覽器中打印出結果，如下圖所示，說明我們的配置是成功的。

好，如果你操作正確，代碼沒有格式錯誤的話，那么現在應該得到的結果是和我一樣的。如果出錯或者怎么樣，請仔細的檢查代碼，看看有沒有什么問題。

下一章，我們將學習用axios返回的結果，渲染出一個列表。

 

如果文章中存在錯誤的地方，麻煩請大家在評論中指正，以免誤人子弟，謝謝！