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

Axios

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

XMLHttpRequest

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = (e) => {
  if (xhr.readyState !== 4) {
    return;
  }

  if (xhr.status === 200) {
    console.log("success", xhr.responseText);
  } else {
    console.warn("error");
  }
};

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

Sample POST Request

Axios

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

XMLHttpRequest

let xhr = new XMLHttpRequest();
const body = JSON.stringify({
  title: "foo",
  body: "bar",
  userId: 1
});

xhr.setRequestHeader("Content-Type", "application/json");

xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.send(body);

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