react-native 0.54.3版本中可以使用fetch请

作者: NextStack | 来源:发表于2018-03-30 23:42 被阅读196次

    最近更新下一栈的RN版本,从0.53更到了0.54.3,然后发现之前请求图片二进制数据的代码无法使用了!

    调试了很久,才发现了最终原因:
    fetch API支持了blob数据请求,于是上个帖子React-Native使用fetch获取二进制数据中的办法自然而然失效了。

    新办法

    得知fetch返回的类型支持blob之后,我们就考虑把这个blob数据转成base64了,我使用的代码如下:

    function LoadImage (url) {
      return new Promise((RES, REJ) => {
        fetch(url).then(r => r.blob()).then(blob => {
          const reader = new FileReader();
          reader.onload = (e) => {
            const data = e.target.result;
            RES(data.split('base64,')[1]);
          }
          reader.readAsDataURL(blob);
        }).catch(REJ);
      })
    }
    
    export default LoadImage;
    

    调用方法:

    LoadImage('https://nextstack.xyz/static/qrcode.png`).then(base64 => {
      console.log('图片的base64编码');
    })
    

    提示:RN中的FileReader不支持readAsArrayBufferreadAsBinaryString等数据转换,所以我们这里用readAsDataURL

    相关文章

      网友评论

      • e0fbe43e1906:兄弟可以给下demo么,我这边遇到二进制图片 不会加载
        NextStack:代码已经很清晰了哦,阅读一遍就懂原理了

      本文标题:react-native 0.54.3版本中可以使用fetch请

      本文链接:https://www.haomeiwen.com/subject/afmwcftx.html