在Typescript中具有Observable的XMLHttpRequest [英] XMLHttpRequest with Observable in Typescript

问题描述

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

I have a tslint problem when I try to manage the result of an XMLHttpRequest call I do to upload files. Here is my current method I found on the 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)
    })
}

这样可以正常工作，文件正在上载，后端回复200响应.但是在使用此功能的方法中，我这样做:

So it works, the files are being uploaded and the backend replies a 200 response. But in the method where I use this function, I do this :

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

但是tslint在地图上告诉我了这一点:

But tslint tells me this for at the map point :

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

因此，我认为最好管理makeFileRequest函数，以便它返回一个Observable而不是Promise. 并且以防万一，请注意，我导入了"rxjs/add/operator/map".

So I think it would be better to manage the makeFileRequest function so it returns an Observable instead of a Promise. And just in case, note I import "rxjs/add/operator/map".

有人有什么主意吗?谢谢！

Has anyone any idea ? Thanks !

推荐答案

map是Observable而不是Promise的方法.返回Observable将纠正错误:

map is a method of Observable, not Promise. Returning an Observable will fix the error:

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

这篇关于在Typescript中具有Observable的XMLHttpRequest的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！