angular - XMLHttpRequest กับ Observable ใน Typescript

ฉันมีปัญหา tslint เมื่อฉันพยายามจัดการผลลัพธ์ของการเรียก XMLHttpRequest ที่ฉันทำเพื่ออัปโหลดไฟล์ นี่คือวิธีปัจจุบันของฉันที่ฉันพบในอินเทอร์เน็ต:

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

ดังนั้นมันทำงาน ไฟล์กำลังถูกอัปโหลดและระบบแบ็กเอนด์ตอบกลับด้วยรหัส 200 แต่ในวิธีที่ฉันใช้ฟังก์ชันนี้ ฉันทำแบบนี้:

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

แต่ tslint บอกฉันแบบนี้สำหรับจุดแผนที่:

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

ดังนั้นฉันคิดว่ามันจะดีกว่าถ้าจัดการฟังก์ชัน makeFileRequest ให้มันคืนค่าเป็น Observable แทนที่จะเป็น Promise และเผื่อไว้ด้วย โปรดทราบว่าฉันได้ import "rxjs/add/operator/map"

มีใครพอจะมีไอเดียไหม? ขอบคุณ!

คำตอบ #1

map เป็นเมธอดของ Observable ไม่ใช่ Promise การคืนค่า Observable จะช่วยแก้ข้อผิดพลาดได้:

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

วิธีแก้ไขข้อผิดพลาด:

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

https://stackoverflow.com/a/33919897

อย่าลืมนำเข้า Response:

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