http Post request with Typescript

Question

I am trying to find an example of HTTP post request in Typescript but can only find examples that use Angular. Could someone point me in the right direction to find this or post a quick example here of using Post with JSON data to get a response JSON.

Answer 1

Update 2020:

Note that as of now, the global fetch is available on all modern browsers and covers 95% of all web users. If you need support for IE10 or before, read the original answer.

MDN Doc | TypeScript Definition

Where the function is available in the window or global contexts, looks like:

    fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;

so you can do:

const response = await fetch(myUrl, {
  method: 'POST',
  body: content,
  headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} });

if (!response.ok) { /* Handle */ }

// If you care about a response:
if (response.body !== null) {
  // body is ReadableStream<Uint8Array>
  // parse as needed, e.g. reading directly, or
  const asString = new TextDecoder("utf-8").decode(response.body);
  // and further:
  const asJSON = JSON.parse(asString);  // implicitly 'any', make sure to verify type on runtime.
}

Original Answer:

If you want to use native JavaScript functions in TypeScript for your HTTP POST request, take a look at the JSON and POST examples on YouMightNotNeedJQuery.com. Using that, you can implement your own:

// 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 is a built-in JavaScript class and included in the TypeScript typings.

Answer 2

Here is my very simple example to call GET or POST with Typescript only.

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

Optional input data (the post body) and callback. The data and result are both assumed to be JSON.

Answer 3

Sending form data.

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

    }