Http

API Reference: Net.Http

Http module is used for sending http requests.

info

For better usage and overcome the quirks of the native handing of http for both platforms, consider using Fetch or XMLHttpRequest modules.

RESTful Services

"request()" method of Http provides making a REST request. It takes an argument named method. You can specify the method by setting this parameter.

Handling Response of a Request

Each http method has a "onLoad" callback and a "onError" callback. You can handle error and response using these callbacks.

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics

TypeScript

import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import Application from "@smartface/native/application";
import Http from "@smartface/native/net/http";
import ImageView from "@smartface/native/ui/imageview";
import Image from "@smartface/native/ui/image";
import { styleableComponentMixin } from "@smartface/styling-context";


class StyleableImageView extends styleableComponentMixin(ImageView) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
    myImageView: ImageView;
    myHttp = new Http();
      
  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
              flexDirection: 'ROW',
              justifyContent: 'CENTER',
              alignItems: 'CENTER'
            }
        }
    })
  }

  onShow() {
    super.onShow();
    const { headerBar } = this;
    Application.statusBar.visible = false;
    headerBar.visible = false;

  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();
    
    this.myHttp.requestImage({
        url: "https://httpbin.org/image/png",
        onLoad: (e: {
          statusCode: number;
          headers: { [key: string]: string };
          image: Image;
        }): void => {
          // Image loaded.
          this.myImageView.image = e.image;
        },
        onError: (e: {
          message: string;
          body: any;
          statusCode: number;
          headers: { [key: string]: string };
        }): void => {
          // Http request image failed.
          alert(e.message);
        },
      });
    
      this.myImageView = new StyleableImageView();
    
      this.addChild(this.myImageView, "myImageView", ".sf-imageView", {
        width: 100,
        height: 100,
        flexProps: {
          alignSelf: "CENTER",
        },
        imageFillType: ImageView.FillType.STRETCH,
      });
  }
}

info

If you use request method to handle JSON requests, you should parse the result. You should either consider using requestJSON method or Fetch

Consider Http Behavior

If the given url is invalid, Http request does not fire onError callback.

Android Permissions

You have to add following permission to your AndroidManifest.xml file before publishing your project.

XML/HTML/SVG

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Also you can check Application Permission Management for other permissions.

Notes

If you try to make a request when no network connection, onError callback triggers.

Also, onError callbacks triggers when timeout.

danger

If you pass body parameter with http methods that do not require body parameter, iOS throws an exception, but Android ignores the body parameter and works fine.