首页 » 前端 » API返回的数据过大时,Content Download时间太长的解决办法

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时间太长的解决办法,转载请注明来源!