vue-resource && axios

 1 # axios
 2 # 1.安装：npm i axios
 3 # 2.使用：
 4     import axios from 'axios'
 5     axios.get(URL).then(response=>{},error=>{});// post一样
 6 # vue-resource
 7 # 1.安装：npm i vue-resource
 8 # 2.使用：
 9     import vueResource from 'vue-resource'
10     Vue.use(vueResource);
11     this.$http.get(URL).then(response=>{},error=>{});
12 # 3.说明：
13 #    Vue官方推荐是使用axios
14 #    vue-resource是早期Vue  1.0版本时使用的插件
15 #    vue-resource源码更新没有axios勤快
16 #    axios和vue-resource的get和post函数调用没有任何区别

 1 <template>
 2     <section class="jumbotron">
 3         <h3 class="jumbotron-heading">
 4             Search Github Users
 5         </h3>
 6         <div>
 7             <input type="text"
 8                    placeholder="enter the name you search"
 9                    v-model="inputValue"
10                    @keydown.enter="search(inputValue)" /> &nbsp;
11             <button @click="search(inputValue)" >Search</button>
12         </div>
13     </section>
14 </template>
15 <script lang="ts">
16 import Vue from 'vue'
17 import axios from 'axios'
18
19 export default Vue.extend({
20     name:'Search',
21     data(){
22         return {
23             inputValue: '',
24             users: []
25         }
26     },
27     methods:{
28         search(value){
29             this.$bus.$emit('updateListInfo', {
30                 isFirstLoad: false,
31                 isLoading: true,
32                 errMsg: '',
33                 users: []
34             });
35             axios.get(`https://api.github.com/search/users?q=${value}`).then(
36                 response => {
37                     this.$bus.$emit('updateListInfo', {
38                         isLoading: false,
39                         users: response.data.items
40                     });
41                 },
42                 error => {
43                     console.log('请求报错信息：', error.message);
44                     this.users = [];
45                     this.$bus.$emit('updateListInfo', {
46                         isLoading: false,
47                         errMsg: error.message,
48                         users: []
49                     });
50                 }
51             );
52             this.inputValue = '';
53         }
54     }
55 })
56 </script>