web-dev-qa-db-ja.com

Typescriptを使用したhttp投稿リクエスト

TypeScriptでHTTPポストリクエストの例を見つけようとしていますが、Angularを使用した例しか見つけることができません。誰かがこれを見つけるために私を正しい方向に向けるか、JSONデータでPostを使用して応答JSONを取得する簡単な例をここに投稿できますか？.

typescripthttppost
8
Derek Lawrence

HTTP POSTリクエストにTypeScriptでネイティブJavaScript関数を使用する場合は、 [〜＃〜] json [〜＃〜]をご覧ください。 YouMightNotNeedJQuery.comでの および [〜＃〜] post [〜＃〜] の例。独自の実装：

// Using callbacks:
function request<Request, Response>(
        method: 'GET' | 'POST',
        url: string,
        content?: Request,
        callback?: (response: Response) => void,
        errorCallback?: (err: any) => void) {

    const request = new XMLHttpRequest();
    request.open(method, url, true);
    request.onload = function () {
        if (this.status >= 200 && this.status < 400) {
            // Success!
            const data = JSON.parse(this.response) as Response;
            callback && callback(data);
        } else {
            // We reached our target server, but it returned an error
        }
    };

    request.onerror = function (err) {
        // There was a connection error of some sort
        errorCallback && errorCallback(err);
    };
    if (method === 'POST') {
        request.setRequestHeader(
            'Content-Type',
            'application/x-www-form-urlencoded; charset=UTF-8');
    }
    request.send(content);
}

// Using promises:
function request2<Request, Response>(
    method: 'GET' | 'POST',
    url: string,
    content?: Request
): Promise<Response> {
    return new Promise<Response>((resolve, reject) => {
        request(method, url, content, resolve, reject);
    });
}

XMLHttpRequestは組み込みJavaScriptクラスであり、TypeScriptの型付けに含まれています。

7
EyasSH

GETまたはPOST TypeScriptのみで呼び出す非常に簡単な例を次に示します。

//-------------------------------------------------
// Simple function to GET or POST
function httpCall(method: string, url:string, data:any, callback:(result:any)=>any) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    if (callback) xhr.onload = function() { callback(JSON.parse(this['responseText'])); };
    if (data != null) {
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify(data));
    }
    else xhr.send();
}

オプションの入力データ（投稿本文）とコールバック。データと結果は両方ともJSONであると想定されます。

2
John Henckel

フォームデータの送信。

Save(model: yourmodalarray[]): Observable<any> {

        var formData: FormData = new FormData();

        formData.append('id', '');
 const headers = new Headers({
            'Accept': 'application/json',
            'enctype': 'multipart/form-data'
        });
        const options = new RequestOptions({ headers: headers });


        return this._http
            .post(this._baseUrl + 'Save', formData, options)
            .map(res => <any>res.json())
            .catch(this.handleError);

    }
0
Arun Kumar