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

离奇6厘米

已于 2022-09-08 21:11:55 修改

阅读量561

点赞数

分类专栏： vue 文章标签：学习 ajax vue

于 2022-09-08 21:10:23 首次发布

本文链接：https://blog.csdn.net/Vest_er/article/details/126771807

版权

vue 专栏收录该内容

37 篇文章 58 订阅

订阅专栏

一、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>

② Search组件

<template>
  <div>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search" v-model="keyword"/>&nbsp;
        <button @click="getKeyword">Search</button>
      </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>

③ 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}}x</p>
      </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>