数据预取

基础库 1.46.0 开始支持本功能

在小程序冷启动时提前发起请求，并缓存请求内容。

配置 app.json 文件

app.json 新增prefetches配置项，用于设置预请求的所有 url 的列表，该部分 url，会在进入小程序后自动发起请求(先于开发者代码加载)。当开发者再次发起 request 请求时可以增加usePreCache参数，如果配置的 prefetch 请求已返回，则会直接返回请求结果，如果配置的 prefetch 请求还未返回，则当次 request 会继续之前未发送完成的 request 请求。

// app.json
{
    prefetches:{
        //页面路径
        "pages/index/index": [
            //请求url
           "https://developer1.bytedance.com",
           "https://developer2.bytedance.com",
           "https://developer3.bytedance.com",
           ...
        ]
        ...
    }
}

目前限定最多配置10 个页面，每个页面最多5 个预取请求，开发者服务器接口返回数据应为字符串类型，且大小不超过256K。

配置项中可以增加变量，且该变量只能来自于打开小程序的调起协议中的 query。如：

// app.json
{
    prefetches:{
        //页面路径
        "pages/index/index": [
            //请求url
           "https://developer1.bytedance.com?id=${id}",
           "https://developer2.bytedance.com",
           "https://developer3.bytedance.com",
           ...
        ]
        ...
    }
}

打开小程序的协议中，也需要携带此参数：

pages/index/index?id=123

这样，再次使用 request 发起请求时，就可以利用上 prefetches 中的配置。

调用 tt.request

tt.request 接口新增usePrefetchCache参数，返回数据新增isPrefetch区分数据是否为预取。

tt.request({
  url: "https://developer.bytedance.com",
  usePrefetchCache: true,
  success: (res) => {
    console.log("返回数据是否来自预取:", res.isPrefetch);
    console.log("请求数据:", res.data);
  },
});

Bug & Tip

Tip：prefetches url 中的变量只在 url 中的 query 部分有效。 - developer.bytedance.com/mp/${id}中的${id}不会匹配打开小程序协议中的参数。 - developer.bytedance.com/mp#${id}中的${id}不会匹配打开小程序协议中的参数
Tip：预请求 url 中参数处理逻辑与 tt.request 接口保持一致。

// app.json
{
    prefetches:{
        //页面路径
        "pages/index/index": [
            //请求url
           "https://developer.bytedance.com?a=${a}&b=${b}&c=${c}",
           ...
        ]
        ...
    }
}

信息流落地页参数处理过程如下：

// 信息流落地页配置

let a = "中国";
let b = encodeURIComponent("中国");
let c = encodeURIComponent(encodeURIComponent("中国"));
let pagePath = `pages/index/index?a=${a}&b=${b}&c=${c}`;
// pages/index/index?a=中国&b=%E4%B8%AD%E5%9B%BD&c=%25E4%25B8%25AD%25E5%259B%25BD

// pages/index/index.js

page({
  onLoad(option) {
    console.log(option.query.a); // 中国
    console.log(option.query.b); // 中国
    console.log(option.query.c); // encodeURIComponent('中国')

    let url =
      "https://developer.bytedance.com?a=${option.query.a}&b=${option.query.b}&c=${option.query.c}";
    // 'https://developer.bytedance.com?a=中国&b=中国&c=%E4%B8%AD%E5%9B%BD'
    tt.request({
      url: url,
      usePrefetchCache: true,
      success(res) {
        console.log(`request调用成功 ${res}`);
      },
      fail(res) {
        console.log(`request调用失败`);
      },
    });

    // tt.request 会对url中参数做urlencode，已encode的参数不会重复urlencode
    // tt.request 请求开发者服务器的url
    // 'https://developer.bytedance.com?a=%E5%8C%97%E4%BA%AC&b=%E5%8C%97%E4%BA%AC&c=%E4%B8%AD%E5%9B%BD'

    // 预请求url参数处理逻辑与tt.request保持一致
    // 'https://developer.bytedance.com?a=%E5%8C%97%E4%BA%AC&b=%E5%8C%97%E4%BA%AC&c=%E4%B8%AD%E5%9B%BD'
  },
});

分享参数传递如下：

// pages/index/index.js

onShareAppMessage() {
    let a = '中国';
    let b = encodeURIComponent('中国');
    let c = encodeURIComponent(encodeURIComponent('中国'));
    let pagePath = `pages/index/index?a=${a}&b=${b}&c=${c}`;
    // pages/index/index?a=中国&b=%E4%B8%AD%E5%9B%BD&c=%25E4%25B8%25AD%25E5%259B%25BD

    return {
        title: 'title',
        desc: 'desc',
        path: pagePath,
        imageUrl: 'https://e.com/e.png',
        success() {
        },
        fail() {
        },
    };
}

// 通过分享落地页打开小程序
// pages/index/index.js

page({
  onLoad(option) {
    console.log(option.query.a); // 中国
    console.log(option.query.b); // encodeURIComponent('中国')
    console.log(option.query.c); // encodeURIComponent(encodeURIComponent('中国'))

    let url =
      "https://developer.bytedance.com?a=${option.query.a}&b=${option.query.b}&c=${option.query.c}";
    // 'https://developer.bytedance.com?a=中国&b=%E4%B8%AD%E5%9B%BD&c=%25E5%258C%2597%25E4%25BA%25AC'
    tt.request({
      url: url,
      usePrefetchCache: true,
      success(res) {
        console.log(`request调用成功 ${res}`);
      },
      fail(res) {
        console.log(`request调用失败`);
      },
    });

    // tt.request 会对url中参数做urlencode，已encode的参数不会重复urlencode
    // tt.request 请求开发者服务器的url
    // 'https://developer.bytedance.com?a=%E5%8C%97%E4%BA%AC&b=%E5%8C%97%E4%BA%AC&c=%25E5%258C%2597%25E4%25BA%25AC'

    // 预请求url参数处理逻辑与tt.request保持一致
    // 'https://developer.bytedance.com?a=%E5%8C%97%E4%BA%AC&b=%E5%8C%97%E4%BA%AC&c=%25E5%258C%2597%25E4%25BA%25AC'
  },
});

点击纠错

评价此篇文档

数据预取
配置 app.json 文件
调用 tt.request
Bug & Tip