标签：axios resource users vue Vue error

 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>

标签：axios,resource,users,vue,Vue,error
来源： https://www.cnblogs.com/watermeloncode/p/16392170.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。