Skip to main content
Version: Next


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.

XMLHttpRequest Standard
XMLHttpRequest Standard favicon

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, URL, [...options]);

Send the Request


Sample GET Request

import axios from "axios";
axios.get("").then((response) => {

Sample POST Request

import axios from "axios";"", {
title: "foo",
body: "bar",
userId: 1
.then((response) => {

XMLHttpRequest Events

let xhr = new XMLHttpRequest();"GET", "");


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


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();"POST", "<Your Image Server>");
const file = new File({ path: "images://smartface.png" });
const formData = new FormData();
formData.append("file", { uri: file.getAbsolutePath() });

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

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