XMLHttpRequest z obserwowalnym w maszynie maszynowej

Question

Mam problem z tslint, gdy próbuję zarządzać wynikiem wywołania XMLHttpRequest, które wykonuję, aby przesłać pliki. Oto moja obecna metoda znalazłem w internecie:

// Files upload request 
makeFileRequest(url: string, files: Array<File>) { 
    return new Promise((resolve, reject) => { 
     let formData: any = new FormData() 
     let xhr = new XMLHttpRequest() 
     for(let file of files) { 
      formData.append("uploads[]", file, file.name) 
     } 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState === 4) { 
       if (xhr.status === 200) { 
        resolve(JSON.parse(xhr.response)) 
       } else { 
        reject(xhr.response) 
       } 
      } 
     } 
     xhr.open("POST", url, true) 
     xhr.send(formData) 
    }) 
} 

Tak to działa, pliki są przesyłane i backend odpowiada odpowiedź 200. Ale w sposobie gdzie mogę korzystać z tej funkcji, to zrobić:

 this.makeFileRequest("theurl", this.listFiles) 
     .map(res => res.json()) 
      .subscribe(
       res => console.log(res), 
       error => console.log("fails") 
      ) 

ale tslint mówi mi to co z punktu na mapie:

TS2339 Property 'map' does not exist on type 'Promise<{}>'. 

więc myślę, że byłoby lepiej zarządzać makeFileRequest funkcja, więc zwraca Observable zamiast Promise. I na wszelki wypadek, uwaga importuję "rxjs/add/operator/map".

Czy ktoś ma pomysł? Dzięki !

Answer 1

map jest metodą Observable, a nie Promise. Zwracanie Observable będzie naprawić błąd:

makeFileRequest(url: string, files: Array<File>) { 
    return Observable.fromPromise(new Promise((resolve, reject) => { 
     let formData: any = new FormData() 
     let xhr = new XMLHttpRequest() 
     for (let file of files) { 
      formData.append("uploads[]", file, file.name) 
     } 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState === 4) { 
       if (xhr.status === 200) { 
        resolve(JSON.parse(xhr.response)) 
       } else { 
        reject(xhr.response) 
       } 
      } 
     } 
     xhr.open("POST", url, true) 
     xhr.send(formData) 
    })); 
} 

Rozwiązanie błędu:

Property 'json' does not exist on type '{}' 

https://stackoverflow.com/a/33919897

Nie zapomnij importować Response:

import {Response} from '@angular/http';