FileReader应该首先完成onload函数,然后再进行进一步处理。

huangapple go评论96阅读模式
英文:

FileReader should complete onload function first then process further

问题

我想要读取上传的文件,并通过服务API调用发送文件中的内容。但是Onload函数最后执行。我希望首先执行onload函数,然后才继续下一步。

checkInScript(file: File, scriptName: string): Observable<Response>{
    console.log("****Before Calling Method***");
    this.checkValidFile(file).then((value) => {
      console.log("****value****", value);
      this.fileValue.next(value);
    });
    console.log("****After Calling method***");
    const formData = new FormData();
    formData.append('updateScript', this.fileValue.value);
    console.log("****Form Data***");
    return this.http.post(this.mccScriptOperationURL + '/updateScript/' + scriptName, formData);
  }

  checkValidFile(file: File): Promise<string>{
    const fileReader = new FileReader();
    fileReader.readAsText(file);
    return new Promise((resolve) => {
      fileReader.onload = () => {
        console.log("****Inside on Load*****");
        resolve(fileReader.result.toString());
      };
    });
  }

当前执行顺序是:
Before Calling Method*
After Calling method*
Form Data*
Inside on Load*
value

所需执行顺序是:
Before Calling Method*
Inside on Load*
value*
After Calling method*
Form Data

英文:

I want to read the uploaded file and send those contents inside file via service API Call. But Onload function executes at last.I want onload function to be executed first then only move to further steps

checkInScript(file: File, scriptName: string): Observable&lt;Response&gt;{
    console.log(&quot;****Before Calling Method***&quot;);
    this.checkValidFile(file).then((value) =&gt; {
      console.log(&quot;****value****&quot;,value);
      this.fileValue.next(value);
    })
    console.log(&quot;****After Calling method***&quot;);
    const formData = new FormData();
    formData.append(&#39;updateScript&#39;, this.fileValue.value);
    console.log(&quot;****Form Data***&quot;);
    return this.http.post(this.mccScriptOperationURL  + &#39;/updateScript/&#39; + scriptName, formData);
  }

  checkValidFile(file: File): Promise&lt;string&gt;{
    const fileReader = new FileReader();
    fileReader.readAsText(file);
    return new Promise((resolve) =&gt; {
      fileReader.onload = () =&gt; {
        console.log(&quot;****Inside on Load*****&quot;);
        resolve(fileReader.result.toString());
      };
    });
  }

Current Execution pattern is :
Before Calling Method*
After Calling method*
Form Data*
Inside on Load*
value

Required Execution Pattern is:
Before Calling Method*
Inside on Load*
value*
After Calling method*
Form Data`

答案1

得分: 0

我之前本打算建议与@JaromandaX相同的方法,但后来意识到可能会引起空值问题。我认为等待checkValidFile应该按正确的顺序工作。

async checkInScript(file: File, scriptName: string): Observable<Response> {
  console.log("****调用方法前***");
  const value = await this.checkValidFile(file);

  console.log("****value****", value);
  this.fileValue.next(value);

  console.log("****调用方法后***");
  const formData = new FormData();
  formData.append('updateScript', this.fileValue.value);

  console.log("****表单数据***");
  return this.http.post(this.mccScriptOperationURL + '/updateScript/' + scriptName, formData);
}

checkValidFile(file: File): Promise<string> {
  const fileReader = new FileReader();
  fileReader.readAsText(file);

  return new Promise((resolve) => {
    fileReader.onload = () => {
      console.log("****加载完成*****");
      resolve(fileReader.result.toString());
    };
  });
}
英文:

I was earlier going to suggest the same method as @JaromandaX but then realized the null problem that would create. I think awaiting the checkValidFile should work as expected, in the correct sequential order.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

async checkInScript(file: File, scriptName: string): Observable &lt; Response &gt; {
  console.log(&quot;****Before Calling Method***&quot;);
  const value = await this.checkValidFile(file);

  console.log(&quot;****value****&quot;, value);
  this.fileValue.next(value);

  console.log(&quot;****After Calling method***&quot;);
  const formData = new FormData();
  formData.append(&#39;updateScript&#39;, this.fileValue.value);

  console.log(&quot;****Form Data***&quot;);
  return this.http.post(this.mccScriptOperationURL + &#39;/updateScript/&#39; + scriptName, formData);
}

checkValidFile(file: File): Promise &lt; string &gt; {
  const fileReader = new FileReader();
  fileReader.readAsText(file);

  return new Promise((resolve) =&gt; {
    fileReader.onload = () =&gt; {
      console.log(&quot;****Inside on Load*****&quot;);
      resolve(fileReader.result.toString());
    };
  });
}

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月1日 12:25:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/75599571.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定