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)" />
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>
