接口数据多,请求慢(小程序)

82 阅读2分钟

430483233129d5dc.png

基于uniapp开发的微信小程序,接口返回的数据很多,导致请求5秒以上(前端选手跳过java代码)

java压缩代码

import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.zip.GZIPInputStream;
import java.util.zip.GZIPOutputStream;

   public class GZIPUtils {
     /**  
     * 字符串的压缩  
     *   
     * @param str 待压缩的字符串
     * @return    返回压缩后的字符串
     * @throws IOException  
     */  
    public static String compress(String str) throws IOException {
        if (null == str || str.length() <= 0) {  
            return null;
        }  
        // 创建一个新的 byte 数组输出流  
        ByteArrayOutputStream out = new ByteArrayOutputStream();  
        // 使用默认缓冲区大小创建新的输出流  
        GZIPOutputStream gzip = new GZIPOutputStream(out);  
        // 将 b.length 个字节写入此输出流  
        gzip.write(str.getBytes("UTF-8"));
        gzip.close();  
        // 使用指定的 charsetName,通过解码字节将缓冲区内容转换为字符串  
        return out.toString("ISO-8859-1");
    }  

java解压代码


  /**  
   * 字符串的解压  
   *   
   * @param   对字符串解压  
   * @return  返回解压缩后的字符串  
   * @throws IOException  
   */  
  public static String unCompress(byte[] b) {
     try {
         if (null == b || b.length <= 0) {
             return null;
         }  
         // 创建一个新的 byte 数组输出流  
         ByteArrayOutputStream out = new ByteArrayOutputStream();  
         // 创建一个 ByteArrayInputStream,使用 buf 作为其缓冲区数组  
         ByteArrayInputStream in;
       in = new ByteArrayInputStream(b);
       
         // 使用默认缓冲区大小创建新的输入流  
         GZIPInputStream gzip = new GZIPInputStream(in);  
         byte[] buffer = new byte[256];  
         int n = 0;  
         while ((n = gzip.read(buffer)) >= 0) {// 将未压缩数据读入字节数组  
             // 将指定 byte 数组中从偏移量 off 开始的 len 个字节写入此 byte数组输出流  
             out.write(buffer, 0, n);  
         }  
         // 使用指定的 charsetName,通过解码字节将缓冲区内容转换为字符串  
         return out.toString("UTF-8");

     } catch (Exception e) {
       e.printStackTrace();
    }
    return null;  
  }
}

小程序的解压(重点)

image.png

处理代码

import pako from 'pako';

通过pako进行解压

image.png
    // 解压缩
    unzip(key) {
      if(key == "") return
      
      var inflatedData = pako.inflate(key);
      
      // Uint8Array对象 转为ASCII编码的字符串数据
      var uint8Array = new Uint8Array(inflatedData);  
      
      // 创建TextDecoder对象,指定编码为"utf-8"  
      var decoder = new TextDecoder("utf-8");  
      
      // 将Uint8Array转换为字符串  
      var stringData = decoder.decode(uint8Array);  
      return JSON.parse(stringData);
    }

image.png

以为这就完了吗

image.png

小程序不支持TextDecoder,继续换方案 推荐 iconv-lite

npm install iconv-lite

image.png
    import iconv from 'iconv-lite';
    
    unzip(key) {
      if (key == '') return;

      var inflatedData = pako.inflate(key);
      
      // 假设你有一个 Uint8Array 对象  
      const uint8Array = new Uint8Array(inflatedData);  
        
      // 使用 iconv-lite 将 Uint8Array 转换为 UTF-8 编码的字符串  
      const stringData = iconv.decode(new Buffer(uint8Array), 'utf8');  
      return JSON.parse(stringData);
    }

搞定