XMLHttpRequest con Observable in Typescript

Question

Ho un problema tslint quando provo a gestire il risultato di una chiamata XMLHttpRequest che faccio per caricare i file. Ecco il mio metodo corrente che ho trovato su internet:

// 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) 
    }) 
} 

così funziona, i file vengono caricati e il backend risponde una risposta 200. Ma nel metodo in cui io uso questa funzione, faccio questo:

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

Ma tslint mi dice questo per al punto della mappa:

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

quindi penso che sarebbe meglio per gestire la makeFileRequest funzione in modo che restituisca un Osservabile invece di una Promessa. E nel caso, nota Importare "rxjs/add/operator/map".

Qualcuno ha qualche idea? Grazie !

Answer 1

map è un metodo di Observable, non Promise. Tornando un Observable sarà correggere l'errore:

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) 
    })); 
} 

La soluzione per l'errore:

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

https://stackoverflow.com/a/33919897

Non dimenticare di importare Response:

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