typescript - 带有 Typescript 中 Observable 的 XMLHttpRequest

Question

当我尝试管理为上传文件所做的 XMLHttpRequest 调用的结果时，我遇到了 tslint 问题。这是我在互联网上找到的当前方法:

// 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 在 map 点告诉我这个:

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

所以我认为最好管理 makeFileRequest 函数，使其返回一个 Observable 而不是 Promise。 为了以防万一，请注意我导入了“rxjs/add/operator/map”。

有人知道吗？谢谢!

Answer 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';