微信小程序请求前置的方法详解

2024-07-29 06:44:02

问题

因为我们有的页面是在onload中去请求数据回来再渲染视图，如果我们可以将请求数据这一步提前到小程序页面跳转前做，就可以早一点把数据请求回来，优化的效果取决于页面跳转所需的时间。

需求

需要一种请求前置方法充分利用跳转的时间，预先请求接口数据，但是要尽量减少对旧项目的改造成本。因为现在我负责的小程序项目是用axios来请求接口数据，所以这里只举例axios中post的改造的思路。我这里是通过改写post方法，在请求的时候对需要预先请求的接口进行缓存，等第二次请求的时候返回第一次请求的promise，从而不用再发起新请求。

具体步骤

1、改造post方法

http文件

let instance = axios.create({ // 创建axios请求实例
 // 省略部分代码
});

let { post } = instance; // 保存原本的post方法
let cache = {}; // 请求缓存

instance.post = function(...list) {

 let [url, data = {}] = list;

 if (cache[url]) { // 返回预请求的promise
 let pre = cache[url];
 delete cache[url];
 return pre;
 }

 if (data.pre) { //以pre作为是否是预请求
 delete data.pre;
 cache[url] = post(...list)
 return cache[url];
 }

 return post(...list); //普通的请求
}

2、使用

跳转前的页面，即上一个页面

// 省略部分代码 ...

// 这是在下个页面要去请求接口的数据，提前在wx.navigateTo跳转前请求，并存储下来。
$http.post('/act/activities/lucky:search', { activityId: 12 , pre: true })

wx.nextTick(() => { //使用wx.nextTick是让上面的请求先发出再跳转
 wx.navigateTo({
 url: `${TYPE_TO_ROUTE_MAP[templateType]}?id=${activity.activityId}`
 });
})

// 省略部分代码 ...

效果

未使用预加载

使用预加载

两者红色框的宽度差，表示的是提前了多少时间去请求接口数据，大概在100ms左右。因为下面的静态资源地址来自于接口的数据，相当于减少了堵塞后面资源加载100ms左右。

总结

这个原理就是利用小程序跳转这部分时间提前请求数据，所以对于性能差的手机受益会大一些，虽然在开发者工具看起来能省个100ms左右，但是存在以下两个限制
页面加载完成需要预请求的接口数据里的数据
需要在上一个页面发起预请求，并对跳转做nextTick处理

导致这个优化的收益对整个项目来说确实有些鸡肋。

到此这篇关于微信小程序请求前置的文章就介绍到这了,更多相关小程序请求前置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

微信小程序网络请求（post请求，get请求）

微信小程序网络请求 1.post请求: onLoad: function() { that = this; wx.request( { url: "url", header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", data: {}, complete: function( res ) { console.log(res
微信小程序网络请求封装示例

网络请求网络请求小程序提供了wx.request, 仔细看一下 api,这不就是n年前的 $.ajax 吗,好古老啊. // 官方例子 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success: function(res) { console.log(res.data) } }) 小程
微信小程序HTTP接口请求封装代码实例

1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装) request.js: var app = getApp(); //项目URL相同部分,减轻代码量,同时方便项目迁移 //这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息 var host = 'http://localhost:8081/demo/'; /** * POST请求, * URL:接口 * postData:参数,json类型 * doSuccess:成功的回
微信小程序 http请求封装详解及实例代码

微信小程序 http请求封装示例代码 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, method:'POST', header: { 'content-type': 'application/json' }, success: function(res) { console.log(res.data) }, fail: function( res ) { fail( res ); } }) 以上
微信小程序同步请求授权的详解

微信小程序同步请求授权的详解需求分析: 1.在小程序首次打开的时候,我需要同时请求获取多个权限,由用户逐一授权. (['scope.userInfo','scope.userLocation','scope.address','scope.record','scope.writePhotosAlbum']) 问题分析: 1. wx.authorize接口同时调用,请求多个权限,由于异步原因,将授权请求一并发出,显然不符合要求. 2. promise能很好的解决问题,试着尝试了一下,下面代码分
微信小程序设置http请求的步骤详解

http请求介绍 HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务器)请求信息和服务,HTTP目前协议的版本是1.1.HTTP是一种无状态的协议,无状态是指Web浏览器和Web服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后Web服务器返回响应(response),连接就被关闭了,在服务器端不保留连接的有关信息.HTTP遵循请
微信小程序网络请求(GET请求)详解

微信小程序网络请求 GET 微信小程序开发中网络请求必不可少,今天说说最简单的请求.后续会尝试上传下载,Socket这些. 1.一个微信小程序,同时只能有5个网络请求连接. 这个规定应该是微信为了保证用户体验制定的,毕竟是小程序. 2.wx.request(OBJECT) 参数说明: 微信小程序支持GET,POST等请求.用method可以设置. 以下是GET请求的代码: <span style="font-size:18px;">//rate.js //获取应用实例
微信小程序 POST请求的实例详解

微信小程序 POST请求的实例详解在微信小程序里post请求和get情求,写法差不多,但是还是有一点点不同的,下面利用post请求做一个查询天气的微信小程序demo. 页面代码: <view> {{title}} </view> <span style="font-size:24px;"> <view class="container"> <view style=
微信小程序之GET请求的实例详解

微信小程序之GET请求的实例详解学习前端的人应该都会使用ajax的get请求数据,那么在微信小程序里怎样实现get请求呢?下面我就给大家演示一下简单的get请求. 先上代码: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', onLoad: function () { var that = this wx.request({ url: 'http://apis.baidu.com/heweat
微信小程序请求前置的方法详解

问题因为我们有的页面是在onload中去请求数据回来再渲染视图,如果我们可以将请求数据这一步提前到小程序页面跳转前做,就可以早一点把数据请求回来,优化的效果取决于页面跳转所需的时间. 需求需要一种请求前置方法充分利用跳转的时间,预先请求接口数据,但是要尽量减少对旧项目的改造成本.因为现在我负责的小程序项目是用axios来请求接口数据,所以这里只举例axios中post的改造的思路.我这里是通过改写post方法,在请求的时候对需要预先请求的接口进行缓存,等第二次请求的时候返回第一次请求的pro
微信小程序 setData的使用方法详解

微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的: Page({ data: { array: [{text: 'init data'}], }, changeItemInArray: function() { this.setData({ 'array[0].text':'changed data' }) } }) 使用了 'array[0].text' : '
微信小程序自定义toast实现方法详解【附demo源码下载】

本文实例讲述了微信小程序自定义toast实现方法.分享给大家供大家参考,具体如下: 一.微信官方默认toast toast最常见了,几乎每个App都有这样的特效,先看下小程序自带的toast效果,立马想死的心都有了~~ 微信自带toast的效果: js文件: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 用法超级简单,但官方小程序有几个问题: 只能显示success.loading两种icon 且icon不可去除持
微信小程序日历组件使用方法详解

这个日历采用小程序组件化开发,有兴趣的同学可以引用本组件(怎么引用不多赘述,自行去微信小程序开发api了解) wxml  <view class='calender'> <view class='operate'> <text catchtap='reduce'>减少</text> <text catchtap="add">增加</te
微信小程序数据缓存实现方法详解

微信小程序可以通过wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)对本地缓存进行设置.获取和清理.本地缓存最大为10MB. wx.setStorage()---------异步设置缓存微信官方给出的属性 OBJECT参数说明: 参数类型必填说明 key String 是本地缓存中的指定的 key data Object/String
微信小程序map地图使用方法详解

本文实例为大家分享了微信小程序map地图使用的具体实现代码,供大家参考,具体内容如下以下代码是主要的代码片段   <view class="map_container"> <map id='customerMap' class="map" :longitude='longitude' :latitude='latitude' :scale='
微信小程序支付及退款流程详解

首先说明一下,微信小程序支付的主要逻辑集中在后端,前端只需携带支付所需的数据请求后端接口然后根据返回结果做相应成功失败处理即可.我在后端使用的是php,当然在这篇博客里我不打算贴一堆代码来说明支付的具体实现,而主要会侧重于整个支付的流程和一些细节方面的东西.所以使用其他后端语言的朋友有需要也是可以看一下的.很多时候开发的需求和相应问题的解决真的要跳出语言语法层面,去从系统和流程的角度考虑.好的,也不说什么废话了.进入正题. 一. 支付支付主要分为几个步骤: 前端携带支付需要的数据(商品id,购
基于mpvue搭建微信小程序项目框架的教程详解

简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发前言: 本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正. 搭建内容包括: 1.使用scss语法:依赖插件sass-loader .node-sass 2.像vue一样使用路由:依赖插件 mpvue-entry 和 mpvue-router-patch 3.使用
微信小程序全局文件的使用详解

目录全局文件总结我们前边两篇介绍了账号的申请.注册,工具的安装,云服务的开通.本篇我们介绍一下基础语法.介绍的方法呢我们会结合上微搭低代码的工具一起做个对比.因为低代码工具也产生了非常多的技术概念,但最终在发布成小程序的时候也是按照微信的规范去生成的,把微信开发者工具学会了也可以更深入的了解低代码的相关概念. 全局文件小程序中是分为全局和页面级两部分.全局是在小程序的所有页面都有效,页面级是只在当前页面中生效.小程序根目录有三个文件app.js.app.json.app.wxss这三个就
微信小程序本地数据存储实例详解

微信小程序本地数据存储实例详解前言如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor

微信小程序请求前置的方法详解

问题

需求

具体步骤

效果

总结

相关推荐

随机推荐