DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Fable and Fetch: HTTP Calls in JavaScript Apps With F#

Fable and Fetch: HTTP Calls in JavaScript Apps With F#

In my last article, I introduced React Native app development with F# and mentioned briefly that we can do HTTP calls with the help of the very popular Fetch API. Here, I'll show you it in action.

Steffen Forkman user avatar by
Steffen Forkman
·
Aug. 22, 16 · Web Dev Zone · Tutorial
Like (1)
Save
Tweet
4.15K Views

Join the DZone community and get the full member experience.

Join For Free

In my last article, I introduced React Native app development with F# and mentioned briefly that we can do HTTP calls with the help of the very popular Fetch API.

Fetch provides a generic definition of Request and Response objects (and other things involved with network requests). This will allow them to be used wherever they are needed in the future, whether it’s for service workers, Cache API and other similar things that handle or modify requests and responses, or any kind of use case that might require you to generate your own responses programmatically. [project site]

Dave Thomas created a Fable bindings project called fable-fetch-import. This npm package allows us to use Fetch in JavaScript apps from F#.

Data access

Retrieving data from the web with Fetch is really easy. In the following snippet, we just pull a bit of JSON from an HTTP resource and cast it to a custom type.

open Fable.Import.Fetch
open Fable.Helpers.Fetch

async { 
    try 
        let! records = 
          fetchAs<MyRecord[]>(
              "http://www.server.com/data.json",
              [])
        // ...
    with
    | error -> ...
} 


As you can see all JavaScript Promises are already mapped into F#’s async type which makes it really easy to use.

HTTP Post

If you want to post data to an HTTP resource you can do this like in the following sample:

async { 
    let! response = 
      postRecord(
          "http://www.server.com/data.json", 
          myRecord,
          [ RequestProperties.Headers [ 
              HttpRequestHeaders.Accept "application/xml" ]
          ])

    if response.ok then
        match response.Headers.ContentType with
        | None -> // ...
        | Some contentType -> // ...
}


Going Further

If you need to do more complicated calls, then take a look into the Fetch docs. Many of the properties and functions are already available in the Fable bindings. If not please create an issue at the Fable issue tracker and I will try to add it.

Fetch (FTP client) app JavaScript

Published at DZone with permission of Steffen Forkman, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Exploring a Paradigm Shift for Relational Database Schema Changes
  • Decorator Pattern to Solve Integration Scenarios in Existing Systems
  • DZone's Article Submission Guidelines
  • Discussing Backend for Front-End

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo