正在处理来自 javascript Fetch API 的回复

Question

我正在努力处理我的 fetch() POST 请求。它工作成功，我可以很好地看到数据并使用它 - 但仅限于 fetch() 调用。我想将数据传回 App.js（我将我的 fetch() API 保存在它自己的实用程序模块 .js 文件中）...但是时机已到。基于控制台日志调试，看起来包含提取的函数在提取完全解析之前 returning 到原始调用。

这些是控制台结果。 success/text 对象是我从包含我的 fetch() 的 N4RecordScan.submit() 函数中 return 得到的对象。然后几行之后，我们看到承诺解决了。所以我的 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
        };

    }
};

Answer 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 的承诺，以便 App.js 中的函数可以等到 fetch 完成后再进行处理

正在处理来自 javascript Fetch API 的回复

Processing replies from the javascript Fetch API

javascript

reactjs

fetch-api