vue的ajax与我们的以前接触到的ajax作用是一致的,都是用来传递参数的,我们先来简单了解一下他在vue中的写法
通过代码来看
- GET 的请求方式
created() {
let url = `https://api.github.com/search/repositories?q=${this.queryName}`;
axios
.get(url)
.then(
// 请求成功
response => { // 可以写成res
console.log(response.data.items);
},
// 接口出错 不是请求失败
error => {
console.log("接口出错了");
}
)
// 请求失败
.catch(error => {
console.log("请求过程出错");
});
}
axios({
// 默认的发送方式,方式为get
})
- POST 的请求方式
created() {
axios
.post("/user", {
firstName: "san",
lastName: "si"
})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err);
});
}
- 执行多个并发请求
created() {
ction getUser() {
return axios.get(url);
}
function postUser() {
return axios.post(url, { a: 1 });
}
axios.all([getUser(), postUser()]);
}
下边我们通过vue的ajax来完成一个小案例
我们先准备一个基础模板
<template>
<div id="app">
<h3 >
This is 数据<a href="reqUrl">{{reqName}}</a>
</h3>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
data() {
return {
reqUrl: "",
reqName: "",
queryName: "GD"
};
},
created() {
let url = `https://api.github.com/search/repositories?q=${this.queryName}`;
// GET 的请求方式
axios
.get(url)
.then(
response => {
let result = response.data;
console.log(result)
},
error => {
console.log("接口出错了");
}
)
.catch(error => {
console.log("请求过程出错");
});
};
</script>
浏览器反馈
可以看出,items里就是我们要获取的数据
那我们的需求是,当他这个路径发起的时候让一下标签显示
<template>
<div id="app">
<h2 v-show="!reqUrl">loading...</h2>
<h3 v-show="reqUrl">
This is<a href="reqUrl">{{reqName}}</a>
</h3>
</div>
</template>
response => {
console.log(response.data);
let result = response.data;
let reArray = result.items[0];
console.log(reArray);
this.reqName = reArray.name;
this.reqUrl = reArray.html_url;
},
现在我们在通过vue的ajax完成一个小的搜索案例
我们先准备一个单页面组件
<template>
<div>
<input type="text" v-model="inputsearchName">
<button @click="search">Search</button>
</div>
</template>
<script>
export default {
name:'search',
data() {
return {
inputsearchName:""
}
},
methods: {
search(){
// 去掉字符串中的首尾空格
let iptval = this.inputsearchName.trim();
if(!iptval){
return;
}
this.setsearchName(iptval);
}
},
}
</script>
创建了一个按钮,点击之后会触发一个函数,然后去获取到这个ipnut框里输入的值,并做一个非空判断,但如果存在的话用他去搜索,然后置空input框
在创建一个组件,用来显示内容
<template>
<div>
<h2 v-show="firstView"> 输入名字搜索 </h2>
<h2 v-show="loading"> loading... </h2>
<h2 v-show="errorMsg"> {{errorMsg}} </h2>
<div class="row" v-show="users">
<div v-for="user of users" :key="user.id">
<a href="">
<img :src="" alt="">
</a>
<p> </p>
</div>
</div>
</div>
</template>
<script>
import Axios from 'axios';
export default {
name:'list',
// 子接
props:['searchName'],
data() {
return {
firstView:true,
loading:false,
errorMsg:null,
users:null
}
}
}
</script>
然后我们去根组件里引入以下两个单文件组件
<template>
<div id="app">
<h1> Search Github </h1>
<search :setsearch-name="setsearchName"></search>
<list :search-name="searchName"></list>
</div>
</template>
<script>
import axios from "axios";
import search from "./components/search";
import list from "./components/list"
export default {
name: "App",
data() {
return {
searchName:""
};
},
components:{
search,
list
},
methods: {
setsearchName(iptval){
this.searchName = iptval;
}
},
};
</script>
当组件被调用时会触发setsearchName,然后把他的value值传入searchName ,在传给list这个组件
props:['searchName'],
list接收数据,
现在我们已经有里接收数据的,然后我们去list做一个ajax传参
因为searchName是会改变的,所以我们把他写在watch里监听起来
watch: {
// 监听searchName做出相应改变
searchName(){
this.firstView = false;
this.loading = true;
let url = `https://api.github.com/search/repositories?q=${this.searchName}`;
// 发送ajax请求
Axios
.get(url)
.then(
res=>{
console.log(res);
this.loading = false;
let result = res.data;
this.users = result.items.map(item=>{
return{
html_url : item.html_url,
avatar_url : item.avatar_url,
login : item.login
}
})
},
error=>{
console.log('接口错误')
}
)
.catch(err=>{
this.loading = false;
this.errorMsg = err;
})
}
},