1.目录结构
目录结构.png
2.axios
-
axios.html引入vue.js和axios.js插件,axios插件直接暴露了一个全局axios对象。 -
axios.interceptor是一个全局拦截器，任何请求和响应之前都会先经过这个拦截器，可以从控制台的打印顺序看出。
//axios.html
...
<script src="https://cdn.staticfile.org/vue/2.2.6/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.15.3/axios.js"></script>
...
<div id="app">
<h1>axios插件</h1>
<button @click="get">get请求</button>
<button @click="post">post请求</button>
<button @click="http">http请求</button>
<div>{{msg}}</div>
</div>
<script>
//axios插件直接暴露了一个全局axios对象
new Vue({
el:'#app',
data:{
msg:"",
},
mounted(){
//请求的拦截
axios.interceptors.request.use(config=>{
console.log("1：request init");
return config;
})
//响应的拦截
axios.interceptors.response.use(response=>{
console.log("2：response init");
return response;
})
},
methods:{
get(){
axios.get('./package.json',{
params:{userId:123},
headers:{token:'jack'},
}).then(res=>{
console.log("3：返回数据");
this.msg=res.data;
}).catch(error=>{
console.log(error)
})
},
post(){
axios.post('./package.json',{userId:123},{
headers:{token:'tom'},
}).then(res=>{
this.msg=res.data;
}).catch(error=>{
console.log(error)
})
},
http(){
axios({
url:'./package.json',
method:'get',
//get,参数拼接到url
params:{
userId:'105'
},
//post
data:{
userId:'101'
},
headers:{
token:'candy'
}
}).then(res=>{
this.msg=res.data
})
}
}
})
</script>
...
- 以下为
axiosget请求结果：
axios-get请求.png
axios-get请求 (2).png
3.vue-resource
-
vue-resource内部做了封装处理，直接挂载到了vue实例上,所以可以直接this.$http发请求,this.$http就代表vue-resource本身。
...
<script src="https://cdn.staticfile.org/vue/2.2.6/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.3.1/vue-resource.js"></script>
...
<div id="app">
<h1>vue-resource插件</h1>
<button @click="get">get请求</button>
<button @click="post">post请求</button>
<button @click="jsonp">jsonp跨域请求</button>
<button @click="http">http请求</button>
<div>{{msg}}</div>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:"",
},
mounted() {
//全局拦截器,可用来设置loading动画
Vue.http.interceptors.push(function(request,next){
console.log('request init')
console.log(request)
next(function(response){
console.log('response init')
console.log(response)
return response;
})
})
},
methods:{
get(){
this.$http.get("./package.json",{
//参数
params:{
userId:'101'
},
//设置请求头
headers:{
token:"abcd",
}
}).then(res=>{
this.msg=res.data;
},error=>{
this.msg=error;
});
},
post(){
this.$http.post('./package.json',{userId:102},{
headers:{
access_token:'abc',
}
}).then(function (res) {
this.msg=res.data;
})
},
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?&wd=a&cb=_jsonpf49x1wdbet
jsonp(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?', {
params: {
wd: 'a'
},
jsonp: 'cb' //vue-resource不能自定义回调函数名称
}).then((res) => {
this.msg = res.data
})
},
http(){
this.$http({
url:'./package.json',
params:{
userId:'103',
},
headers:{
token:'123'
},
timeout:5,
before(){
console.log('before init')
}
}).then(res=>{
this.msg=res.data;
})
}
}
})
</script>
- 以下为
vue-resourcepost请求结果：
vueResource-post请求.png
vueResource-post请求 (2).png
- 以下为
vue-resourcejsonp请求结果：
vueResource-jsonp请求.png
vueResource-jsonp请求 (2).png
