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工具，以下

1 npm install axios --save

好了，axios工具安裝完成。

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

 

調整main.js文件

調整後的代碼，以下

 1 import Vue from 'vue'
 2 import App from './App'
 3 import router from './router'
 4 import axios from 'axios'
 5 
 6 Vue.config.productionTip = false
 7 //全局註冊axios
 8 Vue.prototype.$http = axios
 9 
10 /* eslint-disable no-new */
11 new Vue({
12   el: '#app',
13   router,
14   components: { App },
15   template: '<App/>'
16 })

全局註冊後，就能夠在其餘頁面按照this.$http這樣的方式調用axios方法，沒必要每一個頁面引入axios。

很少說，咱們來試一下，是否註冊成功。

 

調整src/page/index.vue 文件

修改後的文件，內容以下

 1 <template>
 2   <div>
 3     index page
 4   </div>
 5 </template>
 6 <script>
 7   export default {
 8     mounted (){
 9         this.$http.get('https://unpkg.com/axios@0.18.0/dist/axios.min.js')
10         .then(res => {
11           console.log(res);
12         })
13     }
14   }
15 </script>

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

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

好，若是你操做正確，代碼沒有格式錯誤的話，那麼如今應該獲得的結果是和我同樣的。若是出錯或者怎麼樣，請仔細的檢查代碼，看看有沒有什麼問題。

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

 

若是文章中存在錯誤的地方，麻煩請你們在評論中指正，以避免誤人子弟，謝謝！