时间戳

首页 > 解决方案 > 将工作 Ajax 调用转换为 Angular Observable

ajax - 将工作 Ajax 调用转换为 Angular Observable

问题描述

我有一个现有的 JavaScript 应用程序，它向 Solr 提交文档（.pdf、.txt...）以进行文本提取。我现在正在尝试将该功能转换为 Angular-6 实现，并且正在努力应对整个可观察模式。下面是工作的 js 代码，后面是我的 angular 组件和服务 .ts 文件。我想我很接近了，但没有雪茄。

let myReader = new FileReader();

    myReader.onloadend = function() {
        fileAsBlob = myReader.result;

        sendToSolr(fileAsBlob); 
    };
    fileAsBlob = myReader.readAsArrayBuffer(file);
    /* Get the unique Id for the doc and append to the extract url*/
    let docId = $("#post_docId").val();
    let extractUrl = "http://localhost:8983/solr/" + core + "/update/extract/?commit=true&literal.id=" + docId;


    /* Ajax call to Solr/Tika to extract text from pdf and index it */
    function sendToSolr(fileAsBlob) {
        $.ajax({ 
            url: extractUrl,
            type: 'POST',
            data: fileAsBlob,
            cache: false,
            jsonp: 'json.wrf',
            processData: false,
            contentType: false, 
            echoParams: "all",

            success: function(data, status) {
                //console.log("Ajax.post successful, status: " + data.responseHeader.status + "\t status text: " + status);
                //console.log("debug");
                getDocument(docId);
            },
            error: function(data, status) {
                //console.log("Ajax.post error, status: " + data.status + "\t status text:" + data.statusText);
            },
            done: function(data, status) {
                //console.log("Ajax.post Done");
            },
        });
    }

以上所做的只是使用 fileReader 将本地文件读入 ArrayBuffer，并通过 Ajax 调用将该 ArrayBuffer 提交给 Solr。在我的成功中，我确实调用了另一个函数 (getDocument)，它只是查询 Solr (By docId) 以获取我刚刚提交的文档并显示它。不漂亮，但它有效。

对于角度版本，我有以下服务：

constructor(private http: HttpClient) { }

postDocToSolr(fileAsBlob: any): Observable<any> {
    let httpHeaders = new HttpHeaders()
    .set('type' , 'POST')
    .set('jsonp', 'json.wrf')
    .set('processData', 'false')
    .set('echoParams', 'all')
    .set('Content-Type', 'application/x-www-form-urlencoded')
    .set('charset', 'utf-8')
    .set('data', fileAsBlob);

    let options = {
        headers: httpHeaders
    };




    return this.http.post(this.extractUrl, fileAsBlob, options);

}

}

我尝试发布整个服务，但它抛弃了格式，所以这里是服务的 POST 部分。

在我的组件中，我调用了该服务：

    extractText(fileContents: any) {
    console.log("In the Document.extractText() method");
    //this.processDocument(fileContents);
    this.textExtractor.postDocToSolr(fileContents)
    .subscribe(data => {
        console.log("Debug");
        console.log("Data: ") + data;
    },
    error => {
        console.log("Error" + error);
    }
    );
    console.log("Debug");
}

注意我已经完成了 fileReader 并且提交了基本相同的 ArrayBuffer。

唯一的提示是错误 => 在可观察对象上记录错误回调（正确的术语？）。我收到错误代码 400，错误请求并显示以下消息：“msg”：“URLDecoder：转义（％）模式中的无效数字（P）”这对我没有多大帮助。我想知道这是否是编码问题（UTF-8），但不知道从哪里开始。将不胜感激朝着正确的方向轻推。

标签： ajaxangularsolr

解决方案

嗯，经常是小事让我绊倒。我需要将 Content-Type 设置为“false”，一切正常。我还重新创建了 httpHeaders，但我认为任何一种方式都可以。工作 postToSolr 服务方法是：

export class TextExtractorServiceService {
extractUrl: string = "http://localhost:8983/solr/tater/update/extract/?commit=true&literal.id=778";

constructor(private http: HttpClient) { }

postDocToSolr(fileAsBlob: any): Observable<any> {
    const httpOptions = {
        headers: new HttpHeaders({
            "jsonp": "json.wrf",
            "processData": "false",
            "echoParams" : "all",
            "Content-Type": "false",
            "cache": "false"
        })
    };

    return this.http.post(this.extractUrl, fileAsBlob, httpOptions);

}

}

感谢所有看过的人。

推荐阅读