vue-ajax小封装实例

1. js 文件：

//当请求完成之后调用回调函数返回数据
this.success(fn,//字符串转换json
json: function (str){
return (new Function("return " + str))();
},success: function (fn,ojson){
//当请求完成之后调用回调函数返回数据
var self=this;
this.xhr.onreadystatechange=function (){
var odata;
if(self.xhr.readyState == 4){
if((self.xhr.status>=200 && self.xhr.status<300) || self.xhr.status == 304){
odata=self.xhr.responseText;
//若为json则转化json格式
if(ojson==="json"){
odata=self.json(odata);
}
fn(odata);
}else{
odata="request was unsuccessful: "+self.xhr.status;
fn(odata);
}
}
}
},//取消异步请求
cancel: function (){
this.xhr.abort();
return this;
}
}

2. html示例：

rush:xhtml;"> <Meta charset="UTF-8">

获取信息 {{ msg }}

<script src="vue.js">
<script src="vue-ajax.js">

3. 需要获取的数据(1.json)

rush:xhtml;"> [ { "name": "张三","age": 18,"sex": "man" },{ "name": "李四","age": 20,"sex": "woman" },{ "name": "王五","age": 22,"sex": "man" } ]

4. 结果

以上这篇vue-ajax小封装实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。