B4J Tutorial [BANano] the Fetch API

alwaysbusy

Expert
Licensed User
BANano v3 will support a more modern alternative to Ajax calls using promises: Fetch

The Fetch API provides an interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

This kind of functionality was previously achieved using XMLHttpRequest. Fetch provides a better alternative that can be easily used by other technologies such as Service Workers. Fetch also provides a single logical place to define other HTTP-related concepts such as CORS and extensions to HTTP.

The fetch specification differs from Ajax in two main ways:
  • The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.
  • By default, fetch won't send or receive any cookies from the server, resulting in unauthenticated requests if the site relies on maintaining a user session (to send cookies, the credentials init option must be set).
Ajax is still supported of course, but here are some simple examples that illustrate how easy the new Fetch API is.

BANano has 3 objects which can be used for a Fetch:
B4X:
BANanoFetchOptions: the 'request' definition
BANanoFetch: the actual fetch, using the options and resulting in BANanoFetchResponses
BANanoFetchResponse: the 'response' from the fetch
Note: because the fetch API uses Promises, the order you receive the fetches may vary!
B4X:
   ' declare some help variables we will need
   Dim response As BANanoFetchResponse
   Dim error As BANanoObject
   Dim data As BANanoJSONParser
   
   ' list (GET is default, and we do not need extra options so we pass Null for the options)
   Dim fetch1 As BANanoFetch
   fetch1.Initialize("https://jsonplaceholder.typicode.com/posts", Null)
   fetch1.Then(response)
       ' we got a response, but as the Json() method returns a Promise, we will need to process it in the next 'then' so we return it to this Fetch
       fetch1.Return(response.Json)
   fetch1.Then(data)
       ' the Json promise is resolved, lets log it...
       Log(data)
   fetch1.End ' always end a fetch with this!
   
   ' insert with a POST
   Dim fetch2Options As BANanoFetchOptions
   fetch2Options.Initialize
   fetch2Options.Method = "POST"
   fetch2Options.Body = BANano.ToJson(CreateMap("title": "foo", "body": "bar", "userId": 1))
   fetch2Options.Headers = CreateMap("Content-type": "application/json; charset=UTF-8")
   
   Dim fetch2 As BANanoFetch
   fetch2.Initialize("https://jsonplaceholder.typicode.com/posts", fetch2Options)
   fetch2.Then(response)
       fetch2.Return(response.Json)
   fetch2.Then(data)
       Log(data)
   fetch2.End
   
   ' update with a PATCH
   Dim fetch3Options As BANanoFetchOptions
   fetch3Options.Initialize
   fetch3Options.Method = "PATCH"
   fetch3Options.Body = BANano.ToJson(CreateMap("title": "foo changed"))
   fetch3Options.Headers = CreateMap("Content-type": "application/json; charset=UTF-8")
   
   Dim fetch3 As BANanoFetch
   fetch3.Initialize("https://jsonplaceholder.typicode.com/posts/1", fetch3Options)
   fetch3.Then(response)
       fetch3.Return(response.Json)
   fetch3.Then(data)
       Log(data)
   fetch3.End
   
   ' delete with a DELETE
   Dim fetch4Options As BANanoFetchOptions
   fetch4Options.Initialize
   fetch4Options.Method = "DELETE"
   
   Dim fetch4 As BANanoFetch
   fetch4.Initialize("https://jsonplaceholder.typicode.com/posts/1", fetch4Options)       
   fetch4.End
BANano v3 will be released later this week.

Alwaysbusy
 

astronald

Member
Licensed User
Hi everyone, i try this code on Chrome and works perfect

ON iexplorer show this message
SCRIPT1004: Expected ';'
ES5_app1585274596461.js (17,1676)
How i call api and it works in internet explorer

Thanks.
 

alwaysbusy

Expert
Licensed User
Can you re-run it, give me a full screenshot where the error is shown and send me the ES5 .js file? I have a look.
 
Top