這篇文章主要介紹Vue如何封裝ajax，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="getInfo">點擊獲取信息</button>
<span>{{ msg }}</span>
</div>
<script src="vue.js"></script>
<script src="vue-ajax.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
msg: "",
},
methods: {
getInfo: function (){
var self=this;
this.ajax.get("1.json",{
tel: 123456,
address: "杭州"
},function (data){
self.msg=data[1].name
},"json");
}
}
})
</script>
</body>
</html>JS文件：
/*
* ajax封裝:
* 1. 引入文件
* 2. new Vue().ajax.get(url,data,fn,ojson), 或 new Vue().ajax.post(url,data,fn,ojson)
* url: 需要獲取數據的文件地址 (string)
* data: 需要發送的信息 (可省略) (obj)
* fn: 獲取信息后的回調函數,接收到的返回值為data (function)
* ojson: 是否需要轉換為json格式 (可省略) (設置為 "json")
*
* 3. new Vue().ajax.get().cancel(): 取消異步請求
* 4. new Vue().ajax.json(str): 可轉化json格式字符串
**/
Vue.prototype.ajax={
//添加url傳送信息
addUrl: function (url,obj){
//如果省略url，則為post請求，令obj為url，令url為null
if(arguments.length==1){
obj=url;
url=null;
}
//url不為空(get請求: 設置url信息)
if(!!url){
for(var k in obj){
url += (url.indexOf("?")==-1 ? "?" : "&");
url+=encodeURIComponent(k)+ "=" +encodeURIComponent(obj[k]);
}
}else{
//post請求(設置data信息)
url="";
for(var k in obj){
url+=encodeURIComponent(k)+ "=" +encodeURIComponent(obj[k]);
url+="&";
}
//刪除最后一個&
var arr=url.split("");
arr.pop();
url=arr.join("");
}
//返回拼接好的信息
return url;
},
get: function (url,data,fn,ojson){
this.xhr=new XMLHttpRequest();
//省略data時,即不發送數據
if(typeof data =="function"){
ojson=fn;
fn=data;
data={};
}
//合并url和data信息
url=this.addUrl(url,data)
//是否異步發送
this.xhr.open("get",url,true);
this.xhr.send(null);
//當請求完成之后調用回調函數返回數據
this.success(fn,ojson);
//鏈式編程
return this;
},
post: function (url,data,fn,ojson){
this.xhr=new XMLHttpRequest();
//省略data時,即不發送數據
if(typeof data =="function"){
ojson=fn;
fn=data;
data={};
}
//合并data信息
data=this.addUrl(data);
//是否異步發送
this.xhr.open("post",url,true);
this.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
this.xhr.send(data);
//當請求完成之后調用回調函數返回數據
this.success(fn,ojson);
//鏈式編程
return this;
},
//字符串轉換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;
}
}后臺獲取或者前端構造的數據結構：
[
{
"name": "張三",
"age": 18,
"sex": "man"
},
{
"name": "李四",
"age": 20,
"sex": "woman"
},
{
"name": "王五",
"age": 22,
"sex": "man"
}
]以上是“Vue如何封裝ajax”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
