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.
fetch(method, url, headers, body):Promise<RNFetchBlobResponse>
legacy
Send a HTTP request uses given headers and body, and return a Promise.
HTTP request method, can be one of get, post, delete, and put, case-insensitive.
HTTP request destination url.
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 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.
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.
RNFetchBlob.fetch('GET', 'http://mydownload.com/image/1')
.progress((received, total) => {
console.log('progress ' + Math.floor(received/total*100) + '%')
})fetch(...).uploadProgress(eventListener):Promise<RNFetchBlobResponse>
Just like progress but the listener invoked when data write to HTTP request stream. uploadProgress is not supported on Android before version 0.7.0.
RNFetchBlob.fetch('GET', 'http://mydownload.com/image/1')
.uploadProgress((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()
})
})fetch(...).cancel(eventListener):Promise<RNFetchBlobResponse>
0.7.0
Cancel a HTTP request which will cause the fetch call throw an rejected promise. Argument eventListener is optional.
let task = RNFetchbBlob.fetch('GET', 'http://example.com/file/1')
task.then((data) => {
// .. success
})
.catch((err) => {
console.log(err)
})
// cancel the HTTP request
task.cancel((err, taskId) => {
// task successfully canceled
})Simply prepend RNFetchBlob-file:// to a path, this make the file path becomes recognizable to native fetch method.
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.
0.4.2
A helper class simply uses base-64 for decode and encode BASE64 data.
RNFetchBlob.base64.encode(data)
RNFetchBlob.base64.decode(data)Document of work in progress functionalities, these functions will be launched in next release
0.9.0
If you have existing APIs that uses whatwg-fetch, you don't have to change existing code, just use fetch replacement. The differences between Official fetch and fetch replacement is that, official fetch uses whatwg-fetch js library which wraps XMLHttpRequest polyfill under the hood, and our implementation simply wraps RNFetchBlob module.
import RNFetchBlob from 'react-native-fetch-blob'
const Fetch = RNFetchBlob.polyfill.Fetch
// replace built-in fetch
window.fetch = new Fetch({
// enable this option so that the response data conversion handled automatically
auto : true,
// when receiving response data, the module will match its Content-Type header
// with strings in this array. If it contains any one of string in this array,
// the response body will be considered as binary data and the data will stored
// in file system instead of in memory.
// By default, it only store response data to file system when Content-Type
// contains string `application/octet`.
binaryContentTypes : [
'image/',
'video/',
'audio/',
'foo/',
]
})Basically, fetch replacement accepts RNFetchBlob.polyfill.Blob, String(plain string or BASE64 encoded), and FormData as its request body. When the body is a BASE64 string, be sure Content-Type contains string ;BASE64, or application/octet, otherwise it won't be converted to binary format.
usage : BASE64 encoded string body
fetch('http://www.example.com/', {
})usage : Blob body
window.Blob = RNFetchBlob.polyfill.Blob
// create Blob object (this is not a standard method of Blob class)
Blob.build('blob body').then((b) => {
fetch('http://www.example.com', {
method : 'POST',
body : b
})
})usage : Multipart form data
window.Blob = RNFetchBlob.polyfill.Blob
let form = new FormData()
form.append('user', 'wkh237')
form.append('email', '[email protected]')
// create first file from BASE64, file IO is asynchronous therefore
// we need wait for the promise.
// The `;BASE64` in `type` is important when creating Blob/File from
// BASE64 encoded data.
File.build('image.png', base64ImageStr, { type: 'image/png;BASE64' })
.then((file) => {
// add the file to form data
form.append('avatar', file)
// create File object from existing file path, the content type is optional
return File.build('image2.png', RNFetchBlob.wrap(pathToAFile), { type: 'image/png' })
})
.then((file) => {
// add the file to form data, now we have 2 files in form data
form.append('avatar', file)
return fetch('http://www.wkh237.com/upload', {
method : 'POST',
body : form
})
})
.then((res) => ...)
...When using the replacement, the fetch calls will returns a StatefulPromise, it's an object extends Promise, which allows you attach upload/download progress listener to it, and also it's cancellable.
fetch('http://www.example.com/test', {
method : 'POST',
body :
})