编写小的demo应用axios异步请求.
效果图示:
功能: 用户在输入框中输入信息进行搜索,并搜索状态随之改变(四种状态).
项目目录:
代码:
1.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue_demo</title>
<link rel="stylesheet" href="./static/css/bootstrap.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2.main.js
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
3.App.vue
<template>
<div class="container">
<Search/>
<users-main/>
</div>
</template>
<script>
import Search from './components/Search'
import Main from './components/Main'
export default {
data () {
return {
}
},
components: {
Search,
UsersMain: Main
}
}
</script>
<style>
</style>
4.Search.vue
<template>
<section class="jumbotron">
<h3 class="jumbotron-heading">Search Github Users</h3>
<div>
<input type="text" placeholder="enter the name you search" v-model="searchName"/>
<button @click="search">Search</button>
</div>
</section>
</template>
<script>
import PubSub from 'pubsub-js'
export default {
data() {
return {
searchName: ''
}
},
methods: {
search() {
// 获取输入信息
const searchName = this.searchName.trim()
// console.log(searchName)
if (searchName){ // 当不为空字符串时
PubSub.publish('searchInfo', searchName) // 发布搜索的消息:消息名和数据
}
}
}
}
</script>
<style>
</style>
5.Main.vue
<template>
<div>
<h2 v-if="firstView">请输入用户名进行搜素</h2>
<h2 v-if="loading">Loading...</h2>
<h2 v-if="errorMsg">{{errorMsg}}</h2>
<div class="row">
<div class="card" v-for="(user,index) in users" :key="index">
<a :href="user.url" target="_blank">
<img :src="user.avatar_url" style=' 100px'/>
</a>
<p class="card-text">{{user.name}}</p>
</div>
</div>
</div>
</template>
<script>
import PubSub from 'pubsub-js'
import axios from 'axios'
export default {
data() {
return {
firstView: true,
loading: false,
users: null, // [{url: '', avatar_url: '', name: ''}]
errorMsg: ''
}
},
mounted() {
// 订阅搜索的消息,绑定监听; 在点击search按钮后发送ajax请求
PubSub.subscribe('searchInfo',(msg, searchName) =>{
// 定义url
const url = ` https://api.github.com/search/users?q=${searchName}`
// 更新状态(请求中)
this.firstView = false
this.loading = true
this.users = null // 这里需重新设置为null,不然加载时会显示上一次users信息
this.errorMsg = ''
// 发送ajax请求
axios.get(url).then(response => {
// 请求成功
const result = response.data
const users = result.items.map(item => ({
url: item.html_url,
avatar_url: item.avatar_url,
name: item.login
}))
// 更新状态(成功)
this.loading = false
this.users = users
}).catch(error => {
// 请求失败(失败)
this.loading = false
this.errorMsg = '请求失败'
})
})
}
}
</script>
<style>
.card {
float: left;
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>