Vue中Ajax请求

前端页面上的数据，大部分都不会是静态的，而是来自于服务器，正是因为这样，所以前端也变得强大起来，那么在Vue中怎么使用Ajax请求呢？

Vue本身不支持ajax请求，需要使用“axios”的第三方插件（2.0），axios是基于promise的http请求客户端，用来发送请求，是Vue2.0推荐使用的，同时不再对vue-resource进行更新和维护。也可以使用vue-resource进行跨域请求。

axios的安装和使用

安装：

通过npm安装和直接引用其js文件；

基本使用：

a).可以在methods中定义一个方法来调用axios()方法;
b).使用axios（[options]）方法，axios（[options]）.then(function(respon){}).catch(function(error){})，在这里.then就是成功后要做的事情，responce就是成功后返回的对象（数据就在这个对象里），catch就是失败的时候要做的事情，error就是错误后返回的错误信息对象
c).使用axios.get（url[,options]）方法；
get传参方式：
1.直接拼接在url后面（不建议）；
2.在params的选项传参（options中的一个选项params，是一个对象）
d).使用axios.post（url,data,[options]）方法;
axios在进行post请求的时候，数据格式是request payload，并不是我们常用的Form data格式（表单数据格式），参数必须要以"键值对"的形式传递，而不能以json形式传参（也就是说这里的data的格式是一个由键值对组成的字符串）。

传参方式:
1.自己手动拼接键值对字符串；
2.通过transformRequest，在请求发送前进行请求数据的转换（还得自己转换，github上有）：axios.post（url,jsonData,{
transformRequest：[
function(data){

在这里进行手动拼接成“键值对”字符串，并返回
}
]
}[options]）
3.如果使用模块化开发，可以使用qs模块进行数据的转化；

需要注意的是： axios本身并不支持跨域请求，也没有提供相应的API，所以暂时只能使用第三方库，来进行跨域（目前这种方法还有瑕疵）；

使用vue-resource进行跨域请求

vue-resource的安装：

npm 安装或者直接下载并引用其源文件

vue-resource基本用法：

在方法中使用this.$http去发送跨域请求：例如this.$http.get(url[,options]),this.$http.post(url,[body],[options])...等等；
这里的options要参考github上的写法，还有就是.then(function(responce){...},function(error){...})基于promise来处理成功和失败的回调函数。
总而言之，所有请求中的options都是一个对象

看一个实例吧：

HTML部分

<label>搜索：</label>
		<input type="text" name="搜索百科" v-model = "searchW">
		<button @click="getNewsList">立即搜索</button>

JS部分

var app = new Vue({
			el:"#container",
			data:{
				greeting:"hello,world!",
				searchData:[],
				searchW:"",
				searchI:""
			},
			methods:{
				// vue-resoure
				getNewsList:function(){
					this.$http.jsonp("http://baike.baidu.com/api/openapi/BaikeLemmaCardApi?scope=103&format=json&appid=379020&bk_length=600",{
						params:{
							bk_key:this.searchW//双向绑定，参数
						}
					}).then(function(responce){
							console.log(responce)
							this.searchData = responce.body.result
					},function(err){
						console.log("请求失败！")
					})
				}
			}
		})

猜你喜欢