API返回的数据过大时，Content Download时间太长的解决办法

项目中使用搜索功能时，要求api返回关键字搜索的所有数据，最多可能有一万条左右，导致接口返回的数据渲染到页面需要很长的时间，使用chrome调试可以看到具体的加载时间。

前端使用vuejs加载数据,解决办法就是不用等到所有数据加载完成,类似下载功能一样,下载一部分就加载一部分数据,我们在onDownloadProgress里面返回已经下载的数据就行了，如下:
调用接口：

search (keywords, doAction) {
    cancelRequest()
    const data = {
      keywords: keywords
    }
    return new Promise((resolve, reject) => {
      axios({
        method: 'POST',
        url: 'search',
        data: data,
        dataType: 'json',
        cancelToken: new CancelToken(function executor (c) {
          cancel = c
        }),
        onDownloadProgress (progress) {
          doAction(progress.currentTarget.response)
        }
      })
        .then(response => {
          // resolve(response)
        })
        .catch(() => {})
    })
  }

处理数据：

hotel.search(key, function (json) {
    // 返回的数据可能不完整，所以需要替换一些特殊字符，让整个字符串可以转成json
            var willLoadJsonStr = json
              .replace('{"status":"Success","message":"","data":{"hotels":[', '')
              .replace(']}}', '')
            // 分割字符串，让每一段字符串都是一个对象
            var destArr = willLoadJsonStr.split('},{')
            for (var di = 0; di < destArr.length; di++) {
              var destStr = (di == 0 ? '' : '{') + destArr[di] + '}'
              if (root.isJSON(destStr)) {
                let destJson = JSON.parse(destStr)
                // 跳过已经添加的数据
                if (root.lstProperties.filter(a => a.hotelId == destJson.hotelId).length > 0) {
                  continue
                }

                root.lstProperties.push(destJson)
                root.setDestSectionElement(key, destJson)
              }
            }
          })
          .then(function (json) {
            // console.log(json)
          })
          .catch(error => {
          });

这样处理之后不管api返回多大的数据，页面都可以很快的响应。

原文链接：API返回的数据过大时，Content Download时间太长的解决办法，转载请注明来源！