React-Native使用fetch获取二进制数据

遇坑

在使用RN开发下一栈应用时，遇到了一个问题：无法使用fetch返回数据的arrayBuffer、blob数据类型解析。

如图，只有json、text、formData解析方法：

Screen Shot 2018-02-10 at 20.57.04.png

需求

我要请求一个网络图片，然后获取到它的二进制数据。
当然base64格式的数据也行，因为图片也可以使用data:image/png;base64,xxx等格式进行转换。

实现

测试了一番，彻底放弃fetch请求API，改用XMLHttpRequest进行数据请求。

var xmlRequest = new XMLHttpRequest();
xmlRequest.open("GET", 'https://nextstack.xyz/static/qrcode.png', true);  
xmlRequest.responseType = "blob";//这里是关键，它指明返回的数据的类型是二进制
xmlRequest.onreadystatechange = function(e) {  
    if (this.readyState == 4 && this.status == 200) {  
        console.log(this._response)
    }  
}  
xmlRequest.send(null);  

使用this._response即可直接获取base64格式的返回数据：

Screen Shot 2018-02-10 at 21.00.56.png