Skip to main content
Version: 7.3.0

XMLHttpRequest

As described in the following link, The XMLHttpRequest Standard defines an API that provides scripted client functionality for transferring data between a client and a server.

https://xhr.spec.whatwg.org/

By covering XMLHttpRequest module, Smartface gives you the ability to use its features in your projects without any additional need. This also means that you can use third-party networking libraries such as axios that depends on it.
You can add axios to your project by running the following command on your scripts folder.

# scripts folder
yarn add axios

XMLHttpRequest Basics

Create XMLHttpRequest

import XMLHttpRequest from "@smartface/native/net/xhr";

let xhr = new XMLHttpRequest();

Initialize XMLHttpRequest

xhr.open(method, URL, [...options]);

Send the Request

xhr.send([body]);

Sample GET Request

import axios from "axios";
axios.get("https://jsonplaceholder.typicode.com/todos/1").then((response) => {
console.log(response.data);
});

Sample POST Request

import axios from "axios";
axios.post("https://jsonplaceholder.typicode.com/todos/1", {
title: "foo",
body: "bar",
userId: 1
})
.then((response) => {
console.log(response);
});

XMLHttpRequest Events

let xhr = new XMLHttpRequest();

xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1");

xhr.send();

// This will be called after the response is received
xhr.onload = () => {
console.log("onload event");
};

// This will be called if an error occurs
xhr.onerror = () => {
alert("Request failed");
};

// This will be called when the abort() method is called
xhr.onabort = () => {
console.log("onabort event");
};

xhr.onerror = () => {
console.log("onerror event");
};

// This will be called when the timeout is exceeded.
xhr.ontimeout = () => {
console.log("ontimeout event");
};

XMLHttpRequest FormData Usage

As described in the MDN Docs The FormData object is an interface that provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the xhr.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

import XMLHttpRequest from "@smartface/native/net/xhr";
import { FormData } from "@smartface/native/net/xhr/xhr";

const xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.open("POST", "<Your server address>");
xhr.onload = () => {
console.log("Done, ", xhr.response);
};
let body = {
firstName: "Fred",
lastName: "Flintstone"
};

const formData = new FormData();
formData.append("firstName", "Fred");
xhr.setRequestHeader("content-type", "multipart/form-data");
let str = JSON.stringify(body);

xhr.send(formData);

Sending File with FormData

import XMLHttpRequest from "@smartface/native/net/xhr";
import { FormData } from "@smartface/native/net/xhr/xhr";
import File from "@smartface/native/io/file";

const xhr = new XMLHttpRequest();

xhr.open("POST", "<Your Image Server>");
const file = new File({ path: "images://smartface.png" });
const formData = new FormData();
formData.append("file", { uri: file.getAbsolutePath() });

xhr.onload = () => {
console.info("Done, got response: ", xhr.response);
};

xhr.onerror = () => console.info("Request failed", xhr.response);
xhr.setRequestHeader("content-type", "multipart/form-data");
xhr.send(formData);