Vue学习第20天——Vue中常用的ajax请求库（axios与vue-rouserce）

一、Vue中常用的ajax请求库

1、axios

2、vue-resource（使用方法与axios一样）

3、两者区别

axios：通用的ajax请求库，适用范围广，官方支持
vue-resource：vue插件库，vue1.0版本用，已经年久不维护

二、案例练习

需求：通过github搜索用户名，并渲染到页面

github查找用户名接口：https://api.github.com/search/users?q=xxx

1、下载axios

npm i axios

2、引入

import axios from "axios"

3、页面代码

① App组件

<template>
  <div id="app">
    <Search/>
    <List/>
  div>
template>

<script>
import Search from "./components/Search.vue";
import List from "./components/List.vue";
export default {
  name: 'App',
  components:{Search,List},

}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

② Search组件

<template>
  <div>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Usersh3>
      <div>
        <input type="text" placeholder="enter the name you search" v-model="keyword"/> 
        <button @click="getKeyword">Searchbutton>
      div>
    section>
  div>
template>

<script>
//引入ajax
import axios from "axios";
export default {
  name:"Search",
  data() {
    return {
      keyword:"",
    }
  },
  methods:{
   async getKeyword(){
    //发送请求前
      this.$bus.$emit("sendMsg",{isFirst:false,isLoad:true,errMsg:'',list:[]});
     this.list = await axios.get(`https://api.github.com/search/users?q=${this.keyword}`).then(
          response=>{
          return  this.$bus.$emit("sendMsg",{isLoad:false,errMsg:'',list:response.data.items})
          },
          error=>{
            this.$bus.$emit("sendMsg",{isFirst:false,isLoad:false,errMsg:error.message,list:[]})
          }
      )
      this.keyword="";
    }
  },
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

③ List组件

<template>
    <div class="row">
      <h1 v-show="isFirst">Welocme to ...h1>
      <h1 v-show="isLoad">Loading ...h1>
      <h1 v-show="errMsg">请求出错了：{{errMsg}}h1>
      <div class="card" v-for="l in list" :key="l.id">
        <a :href="l.html_url" target="_blank">
          <img :src="l.avatar_url" style='width: 100px'/>
        a>
        <p class="card-text">{{l.login}}xp>
      div>
    div>
template>

<script>
export default {
  name:"List",
  data(){
    return {
      isFirst:true,
      isLoad:false,
      errMsg:"",
      list:[],
    }
  },
  mounted(){
    this.$bus.$on("sendMsg",(msgObj)=>{
      this.isFirst=msgObj.isFirst,
      this.isLoad=msgObj.isLoad;
      this.errMsg=msgObj.errMsg,
      this.list=msgObj.list;
    })
  },

}
script>
<style >
  .card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: .75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56