Fetch API

config(options:RNFetchBlobConfig):fetch

0.5.0

Config API was introduced in v0.5.0 which provides some options for the fetch task.

see RNFetchBlobConfig

fetch(method, url, headers, body):Promise<RNFetchBlobResponse>

legacy

Send a HTTP request uses given headers and body, and return a Promise.

method:string Required

HTTP request method, can be one of get, post, delete, and put, case-insensitive.

url:string Required

HTTP request destination url.

headers:object (Optional)

Headers of HTTP request, value of headers should be stringified, if you're uploading binary files, content-type should be application/octet-stream or multipart/form-data(see examples above).

body:string | Array<Object> (Optional)

Body of the HTTP request, body can either be a BASE64 string, or an array contains object elements, each element have 2 required property name, data, and optional property filename, once filename is set, content in data property will be considered as a path of a file, or a BASE64 string which will be converted into byte array later.

For example

// Post binary data using base64 encoding
RNFetchBlob.fetch('POST', 'http://myupload.com/upload', { 
        'Content-Type' : 'application/octet-stream' 
    }, RNFetchBlob.base64.encode(mydata))

// Post binary data from existing file
RNFetchBlob.fetch('POST', 'http://myupload.com/upload', { 
        'Content-Type' : 'application/octet-stream' 
    }, RNFetchBlob.wrap(path_to_the_file))

// Post form data 
RNFetchBlob.fetch('POST', 'http://myupload.com/upload', { 
        'Content-Type' : 'multipart/form-data' 
    }, [
        name : 'user_name', data : 'Bill',
        // binary field data from a file path, use `wrap` method to wrap the path
        name : 'avatar', filename : 'avatar.jpg', data : RNFetchBlob.wrap(path_to_the_file),
        // binary field data encoded in BASE64
        name : 'pet-avatar', filename : 'pet-avatar.jpg', data : RNFetchBlob.base64.encode(image_data),
    ])

fetch(...).progress(eventListener):Promise<RNFetchBlobResponse>

0.6.1

Register on progress event handler for a fetch request.

eventListener:(sendOrReceivedBytes:number, totalBytes:number)

A function that triggers when there's data received/sent, first argument is the number of sent/received bytes, and second argument is expected total bytes number.

Upload progress is not supported on Android

This feature is not supported due to the limitation of AsyncHttpClient, we are planning to switch Android HTTP module to OKHttp, and it will be supported after the switch.

RNFetchBlob.fetch('GET', 'http://mydownload.com/image/1')
    .progress((received, total) => {
        console.log('progress ' + Math.floor(received/total*100) + '%')
    })

The progress event triggers at a very high frequency, it is recommended to add a debounce mechanism when an UI update is triggered by progress event. For example

RNFetchBlob.fetch('GET', 'http://largefile.com/file/1')
    .progress((received, total) => {
        if(Date.now() - this.state.lastTick < 1000)
            return
        this.setState({ 
            progress : received/total,
            lastTick : Date.now()
        })
    })

wrap(path:string):string

Simply prepend RNFetchBlob-file:// to a path, this make the file path becomes recognizable to native fetch method.

session(name:string):RNFetchBlobSession

Session API helps managing cached files, the following code, will try to return an existing session object with the given name, if it does not exist, create one.

RNFetchBlob.session('mysession')

see Sessions API for more usages.

base64

0.4.2

A helper class simply uses base-64 for decode and encode BASE64 data.

RNFetchBlob.base64.encode(data)
RNFetchBlob.base64.decode(data)