我正在努力处理我的fetch（）POST请求。它运行成功，我可以看到数据很好并使用它 - 但只能在fetch（）调用中。我想将数据传递回App.js（我将我的fetch（）API保存在自己的实用程序模块.js文件中）...但是时机已关闭。基于控制台日志调试，看起来包含fetch的函数在fetch完全解析之前返回到原始调用。
这些是控制台结果。成功/文本对象是我从N4RecordScan.submit（）函数返回的，它包含我的fetch（）。然后几行之后，我们看到了承诺的解决方案。所以我的App.js没有任何数据。
我很感激任何指导!!我觉得我很亲密！
{success: "", text: ""}
Processing final response.
Fetch finished loading: OPTIONS
{argo:gateresponse: {…}, status: "0", statusid: "OK"}
这是我的App.JS中的一个片段，它进一步调用并处理了获取功能。
processResponse(myResponseObject) {
this.setState({
responseAlerts: this.state.responseAlerts.push(myResponseObject)
});
console.log('Processing final response. '+ myResponseObject.success + ' ' + myResponseObject.text);
}
sendRequest() {
let response = N4RecordScan.submit(this.interpolateRequest(), this.state.server, this.state.endpoint);
this.processResponse(response);
}
这是我的fetch（）所在的函数：
export const N4RecordScan = {
submit(data, server, endpoint) {
let headers = new Headers();
let success = '';
let text = '';
headers.append('Content-Type', 'text/xml');
headers.append('SOAPAction', 'basicInvoke');
headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
let dataPrefix = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:arg="http://www.navis.com/services/argobasicservice"><soapenv:Header/><soapenv:Body><arg:basicInvoke><arg:scopeCoordinateIds>APMT/USLAX/LAX/LAX</arg:scopeCoordinateIds><arg:xmlDoc><![CDATA[';
let dataSuffix = ']]></arg:xmlDoc></arg:basicInvoke></soapenv:Body></soapenv:Envelope>';
data = dataPrefix + data + dataSuffix;
console.log('about to send ' + data);
fetch(server + endpoint, {
body: data,
method: 'POST',
mode: 'cors',
headers: headers,
credentials: 'include'
})
.then(function(response){
return response.text();
/* if (response.status === 200 || response.status === 0) {
// Success!
console.log('Success: ' + response.text());
return {
success: true,
text: response.text()
};
} else {
// Failure!
console.log('Fail: ' + response.statusText);
return {
success: false,
text: response.statusText
};
} */
} )
.then(function(rspText){
// The raw response contains decoded HTML tags... we need to clean that up.
// Remove dashes from the xml responses... the eventual js object wont like them
rspText = rspText.replace(/-/g, "");
// Convert the text response to XML
var parser = new DOMParser;
var dom = parser.parseFromString(
rspText,
'text/html');
var decodedString = dom.body.textContent;
// use the DOMParser browser API to convert text to a Document
var XML = new DOMParser().parseFromString(decodedString, "text/xml");
// and then use #parse to convert it to a JS object
var responseXmlObject = parse(XML);
console.log(responseXmlObject);
success = true;
text = responseXmlObject.messages;
alert(responseXmlObject.messages.messagedetail);
})
.catch(function(error) {
// Networking Failure!
console.log('NetworkFail: ' + error);
success = false;
text = error;
});
//.done();
console.log({
success: success,
text: text
});
return {
success: success,
text: text
};
}
};
答案 0 :(得分：1)
问题是你正在混合异步和同步操作，你应该这样做
processResponse(myResponseObject) {
this.setState({
responseAlerts: this.state.responseAlerts.push(myResponseObject)
});
console.log('Processing final response. '+ myResponseObject.success + ' ' + myResponseObject.text);
}
sendRequest() {
N4RecordScan.submit(this.interpolateRequest(), this.state.server, this.state.endpoint)
.then(function (response){
this.processResponse(response);
})
}
，
export const N4RecordScan = {
submit(data, server, endpoint) {
let headers = new Headers();
let success = '';
let text = '';
headers.append('Content-Type', 'text/xml');
headers.append('SOAPAction', 'basicInvoke');
headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
let dataPrefix = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:arg="http://www.navis.com/services/argobasicservice"><soapenv:Header/><soapenv:Body><arg:basicInvoke><arg:scopeCoordinateIds>APMT/USLAX/LAX/LAX</arg:scopeCoordinateIds><arg:xmlDoc><![CDATA[';
let dataSuffix = ']]></arg:xmlDoc></arg:basicInvoke></soapenv:Body></soapenv:Envelope>';
data = dataPrefix + data + dataSuffix;
console.log('about to send ' + data);
return fetch(server + endpoint, {
body: data,
method: 'POST',
mode: 'cors',
headers: headers,
credentials: 'include'
})
.then(function(response){
return response.text();
/* if (response.status === 200 || response.status === 0) {
// Success!
console.log('Success: ' + response.text());
return {
success: true,
text: response.text()
};
} else {
// Failure!
console.log('Fail: ' + response.statusText);
return {
success: false,
text: response.statusText
};
} */
} )
.then(function(rspText){
// The raw response contains decoded HTML tags... we need to clean that up.
// Remove dashes from the xml responses... the eventual js object wont like them
rspText = rspText.replace(/-/g, "");
// Convert the text response to XML
var parser = new DOMParser;
var dom = parser.parseFromString(
rspText,
'text/html');
var decodedString = dom.body.textContent;
// use the DOMParser browser API to convert text to a Document
var XML = new DOMParser().parseFromString(decodedString, "text/xml");
// and then use #parse to convert it to a JS object
var responseXmlObject = parse(XML);
console.log(responseXmlObject);
success = true;
text = responseXmlObject.messages;
alert(responseXmlObject.messages.messagedetail);
})
.catch(function(error) {
// Networking Failure!
console.log('NetworkFail: ' + error);
success = false;
text = error;
})
.then(function () {
console.log({
success: success,
text: text
});
return {
success: success,
text: text
};
})
//.done();
}
};
你应该从submit函数中的fetch返回promise，以便App.js中的函数可以等到fetch完成处理