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返回的结果，渲染出一个列表。

 

若是文章中存在错误的地方，麻烦请你们在评论中指正，以避免误人子弟，谢谢！