SharePoint Framework httpClient.post to _vti_bin/lists.asmx

Question

我正在尝试将javascript Web部件重写为Sharepoint Framework。

在这个Web部件中，我需要在/vti_bin/Lists.asmx上做一个soap post，以便从一个展开的日历列表中获取所有事件，其中包含重复发生的事件。

javascript代码看起来像这个

wsURL = webUrl + "/_vti_bin/Lists.asmx";
var xmlCall =
"<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> <soap:Body>" +
"<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>" +
"<listName>" + calendarList + "</listName>" +
"<query>" +
"<Query>" +
"<Where>" +
"<DateRangesOverlap>" +
"<FieldRef Name="EventDate" />" +
"<FieldRef Name="EndDate" />" +
"<FieldRef Name="RecurrenceID" />" +
"<Value Type='DateTime'><Year/></Value>" +
"</DateRangesOverlap>" +
"</Where>" +
"</Query>" +
"</query>" +
"<queryOptions>" +
"<QueryOptions>" +
"<ExpandRecurrence>TRUE</ExpandRecurrence>" +
"</QueryOptions>" +
"</queryOptions>" +
"</GetListItems>" +
"</soap:Body></soap:Envelope>";
var result = [];
$.ajax({
url: wsURL,
type: "POST",
dataType: "xml",
async: false,
data: xmlCall,
complete: function (xData, status) {
if (status === "success") {
var root = $(xData.responseText);
root.find("listitems").children().children().each(function () {
$this = $(this);
var ids = $this.attr("ows_UniqueId").split(";");
var rec = $this.attr("ows_fRecurrence");
result.push({
"StartTime": $this.attr("ows_EventDate"),
"EndTime": $this.attr("ows_EndDate"),
"Title": $this.attr("ows_Title"),
"Recurrence": (rec === "1" ? true : false),
"Description": $this.attr("ows_Description"),
"Guid": ids[1],
"Id": ids[0],
});
});
}
},
contentType: "text/xml; charset="utf-8""
});
return result;
};

但现在我正试图用typescript重写这段代码，但我似乎无法取回responseText？

这是我的TypeScript函数

private makeRequest(listName: string): Promise<HttpClientResponse> {
let wsURL = this.context.pageContext.web.absoluteUrl + "/_vti_bin/Lists.asmx";
var xmlCall =
"<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> <soap:Body>" +
"<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>" +
"<listName>" + listName + "</listName>" +
"<query>" +
"<Query>" +
"<Where>" +
"<DateRangesOverlap>" +
"<FieldRef Name="EventDate" />" +
"<FieldRef Name="EndDate" />" +
"<FieldRef Name="RecurrenceID" />" +
"<Value Type='DateTime'><Year/></Value>" +
"</DateRangesOverlap>" +
"</Where>" +
"</Query>" +
"</query>" +
"<queryOptions>" +
"<QueryOptions>" +
"<ExpandRecurrence>TRUE</ExpandRecurrence>" +
"</QueryOptions>" +
"</queryOptions>" +
"</GetListItems>" +
"</soap:Body></soap:Envelope>";
const requestHeaders: Headers = new Headers();
requestHeaders.append('Content-type', "text/xml; charset="utf-8"");
const httpClientOptions: IHttpClientOptions = {
body: xmlCall,
headers: requestHeaders
};
console.log("About to make REST API request.");
return this.context.httpClient.post(
wsURL,
HttpClient.configurations.v1,
httpClientOptions)
.then((response: HttpClientResponse) => {
console.log("REST API response received.");
console.log(response);
console.log(response.text());
console.log(response.json());
debugger;
return response.json();
});
}

如何在TypeScript中从我的Sharepoint Framework向soap Web服务发布并返回xml响应？

Answer 1

好吧，我把一切都安排好了。

问题是你不能在ASYNC后调用中添加调试器代码，所以这永远不会起作用。其次，SOAP post对lists.asmx的响应不是HttpClientResponse类型的响应，而只是一个带有xml的普通字符串。

所以现在的函数是这样的：

private makeRequest(listName: string): Promise<string> {
let wsURL = this.context.pageContext.web.absoluteUrl + "/_vti_bin/Lists.asmx";
var xmlCall = `
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<GetListItems xmlns="http://schemas.microsoft.com/sharepoint/soap/">
<listName>${listName}</listName>
<query>
<Query>
<Where>
<DateRangesOverlap>
<FieldRef Name="EventDate" />
<FieldRef Name="EndDate" />
<FieldRef Name="RecurrenceID" />
<Value Type="DateTime"><Year/></Value>
</DateRangesOverlap>
</Where>
</Query>
</query>
<queryOptions>
<QueryOptions>
<ExpandRecurrence>TRUE</ExpandRecurrence>
</QueryOptions>
</queryOptions>
</GetListItems>
</soap:Body>
</soap:Envelope>
`;
const requestHeaders: Headers = new Headers();
requestHeaders.append('Content-type', "text/xml; charset="utf-8"");
const httpClientOptions: IHttpClientOptions = {
body: xmlCall,
headers: requestHeaders
};
console.log("About to make REST API request.");
return this.context.httpClient.post(
wsURL,
HttpClient.configurations.v1,
httpClientOptions)
.then(data => {
var result: any[];
if(data.status == 200)
{
return data.text(); //returning the XML text of the response
}
else
{
return "";
}
});
}

该函数的调用方式类似于

this.makeRequest(this.properties.listdropdown)
.then((data) => {
let vArrEvents:any[] = [];
$(data).find("listitems").children().children().each((index, element) => {
let ids = $(element).attr("ows_UniqueId").split(";");
let rec = $(element).attr("ows_fRecurrence");
let strMatch:any[] = $(element).attr("ows_EventDate").match(/^(d+)-(d+)-(d+) (d+):(d+):(d+)$/);
let startDate = new Date(strMatch[1], strMatch[2] - 1, strMatch[3], strMatch[4], strMatch[5], strMatch[6]);
let today = new Date();
today.setHours(0,0,0);
if(startDate >= today)
{
vArrEvents.push({
"StartTime": $(element).attr("ows_EventDate"),
"EndTime": $(element).attr("ows_EndDate"),
"Title": $(element).attr("ows_Title"),
"Recurrence": (rec === "1" ? true : false),
"Description": $(element).attr("ows_Description"),
"Guid": ids[1],
"Id": ids[0],
});
}
});
this.showEvents(vArrEvents);
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
});