我正在尝试使用Vuejs 2多次调用端点API,直到检索到所有数据。
我使用的是SharePointRESTapi,结果返回到对象res.d.results
中,但一次只能查询5000个项目。
如果rest.d.__next
存在,那么它也具有下一批数据的端点。
当我运行这段代码时,我可以在chrome调试器中看到进行了第二次调用,但数据从未被推送到表中,我在浏览器控制台中收到了这条消息
Event.path已弃用,将被删除。请改用Event.composedPath((。
new Vue ({
el:"#app",
data: {
test: "this is my test",
pg:[]
},
created: function(){
console.log("working");
this.loopData("https://srvsharepoint1p/sites/tactical_squad/ArhivaTool/_api/web/lists/getbytitle('Dosare')/items?$top=1000", this);
},
methods: {
getListData: function(url,that){ // function that calls the api
console.log("getting data");
var headers={
"Accept": "application/json;odata=verbose"
}
return $.ajax({
url:url,
type: "GET",
headers: headers,
success: function(data){
lData = data;
}
});
},
loopData: function (web){ // function to loop through API calls until all data is retrieved.
this.getListData(web).then(res => {
console.log(res);
this.pg.push(...res.d.results)
if (res.d.__next) { // if there is a next page do another api call
this.getListData(res.d.__next); // try to call the api again
} else {
console.log('aborted')
}
})
}
}})
如有任何帮助,将不胜感激
我设法弄清楚了
看来我做递归错了。希望这能帮助其他人——它现在使用axios而不是ajax 来获取数据
new Vue ({
el:"#app",
data: {
test: "this is my test",
pg:[], // table data
counter:0
},
created: function(){
console.log("working");
this.getListData("https://srvsharepoint1p/sites/tactical_squad/ArhivaTool/_api/web/lists/getbytitle('Dosare')/items?$top=5000" ); //endpoint
},
methods: {
getListData: function(url){ //recursive function that calls itself untill all data is retreived
var vm = this
console.log("getting data");
axios.get(url).then(function(res){
if (res.data["odata.nextLink"] ) { // check if another page needs to be requested
vm.pg.push(...res.data.value); // push values into table object
vm.getListData(res.data["odata.nextLink"]); //call function again
}
else {
console.log('aborted');
alert("Tabelul este incarcat, se poata folosi butonul de exprot")
}
})
.catch(function(error){
alert(error);
})
}})