具体场景：在启动时根据启动路径 pageid query 参数调用https://microapp.bytedance.com/miniprogram-demo/invoke/tma_demo_request?接口获取信息，在接口返回后根据接口返回内容展示页面内容。如：page/index/index?pageid=123

接口依赖：接口参数中依赖 token , dataKey1 动态参数

// app.js
App({
  onLaunch() {
    tt.setStorageSync('token', 'testToken')
    tt.setStorageSync('dataKey1', 'dataKey1Value')
  }
})

// page/index/index.js
Page({
  onLoad(options){
      tt.request({
        url: `https://microapp.bytedance.com/miniprogram-demo/invoke/tma_demo_request?pageid=${options.pageid}`,
        method: 'POST',
        header: {
            token: tt.getStorageSync('token'),
        },
        data: {
           dataKey1: tt.getStorageSync('dataKey1'),
           dataKey2: 1
        },
        success: (res) => { 
            console.log("请求数据:", res.data); 
         },
      });
  }
})

新增prelaunch.js

下面将展示如何将pages/index/index页面的developer.bytedance.com/xx接口进行数据预取接入。

// prelaunch.js
registerOnPrelaunch('pages/index/index', ({path, query}) => {
    console.log('----begin prelaunch!!!')
    const queryObj = queryStringToObj(query);
    tt.request({
        url: `https://microapp.bytedance.com/miniprogram-demo/invoke/tma_demo_request?pageid=${queryObj.pageid}`,
        id: `${queryObj.pageid}`,
        method: 'POST',
        header: {
            token: tt.getStorageSync('token'),
        },
        data: {
           dataKey1: tt.getStorageSync('dataKey1'),
           dataKey2: 1
        },
      });
});
function queryStringToObj(query) {
    const obj = {};
    query.split('&').forEach(kv => {
      const [key, value] = kv.split('=');
      obj[key] = value;
    })
    return obj;
}

到此我们已经完成了预取请求的发起，查看ide控制台可以发现已经发起了额外一次请求。

如果没有发起额外的请求，可以检查下控制台的console是否执行，没有执行可以联系平台帮忙解决。

使用预取数据

usePrefetchCache 标识使用预取， id标记请求唯一性

// page/index/index.js
Page({
  onLoad(options){
      tt.request({
        url: `https://microapp.bytedance.com/miniprogram-demo/invoke/tma_demo_request?pageid=${options.pageid}`,
        id: `${options.pageid}`,
        method: 'POST',
        header: {
            token: tt.getStorageSync('token'),
        },
        data: {
           dataKey1: tt.getStorageSync('dataKey1'),
           dataKey2: 1
        },
        // 配置此字段标识要使用预取的返回值。
        usePrefetchCache: true,
        success: (res) => { 
            console.log("请求数据:", res); 
         },
      });
  }
})

修改page/index/index中的tt.request请求，添加usePrefetchCache:true参数。表示使用预取的网络请求。

查看控制台/tt.request的返回值，可以看到，只有一次网络请求。

到这已经完成数据预取接入。

预取详细逻辑如下

在传入id参数后，会将id参数和url参数不带query部分作为一个key，生产一个全局缓存。

在后续key相同情况时候，如果此时传入了usePrefetchCache: true，如果存之前请求的缓存，则直接返回缓存。

如果没有缓存，则生成缓存。

如果key相同，但是usePrefetchCache: false，则仍会正常请求，但是会更新缓存。

接入完成

查看方式：console.log 打印请求结果，在真机 vconsole 中查看。

（1）预取成功：可以看到此处控制台只发起了一次网络请求。并且 tt.request 的返回值 res.isPrefetch 为true，接入完成！

（2）预取失败：res.isPrefetch 为false，则打印 res.prefetchDetail ，根据《预取的返回值》查看失败原因。如果还无法定位，在群中咨询。

线上优化效果

数据预取上线后可以在「控制台-性能分析」启动性能tab 中，启动性能转化漏斗第 3～4 阶段，可以看到数据预取本地资源占比。

完整代码

代码片段链接

https://developer.open-douyin.com/ide/minicode/i24QxrJw 不支持testAppId运行，需替换成真实appId！！

// prelaunch.js
registerOnPrelaunch('pages/index/index', ({path, query}) => {
    console.log('----begin prelaunch!!!')
    const queryObj = queryStringToObj(query);
    tt.request({
        url: `https://microapp.bytedance.com/miniprogram-demo/invoke/tma_demo_request?pageid=${queryObj.pageid}`,
        id: `${queryObj.pageid}`,
        method: 'POST',
        header: {
            token: tt.getStorageSync('token'),
        },
        data: {
           dataKey1: tt.getStorageSync('dataKey1'),
           dataKey2: 1
        },
        success:(res) => {
        // 如果需要预取接口返回的图片
           tt.preloadImages({
               urls: ['url1','url2']
           })
        }
      });
});
function queryStringToObj(query) {
    const obj = {};
    query.split('&').forEach(kv => {
      const [key, value] = kv.split('=');
      obj[key] = value;
    })
    return obj;
}

// page/index/index.js
Page({
  onLoad(options){
      tt.request({
        url: `https://microapp.bytedance.com/miniprogram-demo/invoke/tma_demo_request?pageid=${options.pageid}`,
        id: `${options.pageid}`,
        method: 'POST',
        header: {
            token: tt.getStorageSync('token'),
        },
        data: {
           dataKey1: tt.getStorageSync('dataKey1'),
           dataKey2: 1
        },
        // 配置此字段标识要使用预取的返回值。
        usePrefetchCache: true,
        success: (res) => { 
            console.log("请求数据:", res.data); 
         },
      });
  }
})