微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.4 网络接口简介（四）Promise三个方法any、all与race的使用介绍

最新推荐文章于 2024-07-10 21:28:05 发布
最新推荐文章于 2024-07-10 21:28:05 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： 小程序原生 文章标签： 微信小程序 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42580704/article/details/121884882
版权

零、回顾

在上节课我们主要介绍了Promise，
这节课我们开始实践多个网络请求并发执行的处理策略，
并着手将原来的登录代码模块，使用Promise改写一下。

我们设想有这样一个场景，在页面启动的时候，我们需要加载多个接口，从多个接口中拉取页面初始化所需要的数据。
如果我们对这些接口的调用，采用完成一个加载一个的方法的话，就是对小程序并发优势的浪费了。

在Chrome浏览器中，对于同一域名下的资源加载量，最大并发数字是6，默认这个数字是6，其他浏览器稍有差别，但是一般都不会超过10个。
为了优化这个问题，有网站将资源分成几个域名，分别进行加载，一个域名不到10个，那多个域名加起来就大于10了。

在小程序中，并发原本是有限制的，像wx.request、wx.uploadFile、wx.downloadFile这些资源请求加起来，并发总数不能超过10个，
如果超出了，超出的请求将会被丢弃。开发者因为害怕这个链接被莫名地丢弃，所以在写代码的时候，都小心翼翼地维护并发的总数。

后来微信在2017年7月发布了基础库1.4.0版本，对网络请求做了优化，对超过并发限制的请求，做了队列处理，
超过10个数字的请求，不会再被丢弃了。对于开发者来讲我们不用管同时有几个请求，我们只需要以一种机制让网络请求并发最大化就可以了。
其他的交给小程序逻辑层去处理就可以了。

在上节课，留了一个问题，如何进行多服务器ip的连接，接下来我们在本课的源码中实践一下，下面这三个方法的具体应用。
promise.any()
promise.all()
promise.race()

注意：

API Promise化链接：
https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/utils/api-promise.html
`这个网址打开，现在是404`

在这里插入图片描述

异步 API 返回 Promise

基础库 2.10.2 版本起，异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。

注意事项

  1. 部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera（小游戏）本身就有返回值， 它们的 promisify 需要开发者自行封装。
  2. 当没有回调参数时，异步接口返回 promise。此时若函数调用失败进入 fail 逻辑， 会报错提示 Uncaught (in promise)，开发者可通过 catch 来进行捕获。
  3. wx.onUnhandledRejection 可以监听未处理的 Promise 拒绝事件。

代码示例

`callback 形式调用`
wx.chooseImage({
  success(res) {
    console.log('res:', res)
  }
})


`promise 形式调用`
wx.chooseImage().then(res => console.log('res: ', res))

一、将wx.request这个接口转化为返回Promise对象的接口

在默认情况下，wx.request返回的是RequestTask对象，我们需要将它修改为Promise对象、
现在小程序确实不再是一个简单的前端框架，当我们需要将接口实现Promise化的时候，
微信团队提供了这样一个模块，miniprogram-api-promise，它可以扩展微信小程序API，使API支持promise编程。


API Promise化链接：
https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/utils/api-promise.html
这个网址打开，现在是404

安装：
npm install --save miniprogram-api-promise


在使用npm指令安装以后，我们进行初始化。

import { promisifyAll, promisify } from 'miniprogram-api-promise';
const wxp = {}
promisifyAll(wx, wxp)

// 示例
wxp.getSystemInfo().then(console.log)
......

App({
	wxp:wxp 
})

上面我们现在看到的这个，就是一个初始化的代码，从第一行到第三行是它的初始化代码。
在初始化以后，wxp将可以替代wx，提供接口调用服务。
在小程序中，并没有像小游戏那样有一个GameGlobal这样的一个对象。
wx它是一个全局对象，在任何页面中都可以直接使用，
为了方便使用，刚才我们创建的wxp，我们可以将wxp挂载于App对象上，
然后在调用的时候我们可以通过getApp取到App对象，
然后再间接地取到wxp对象，这样就可以使用，就可以方便在每个页面上去使用它了。

一、any

any方法目前是处于试验阶段，处于草案提案当中，并未被所有的宿主环境所支持。
在小程序的Promise对象上，并没有any这个方法，我们目前只能换一种方式，去间接地实现它

安装
在这里插入图片描述
工具–构建npm
在这里插入图片描述

app.js
在这里插入图片描述
index.wxml
在这里插入图片描述

<view class="page-section">
	<text class="page-section__title">3.4 any & all  & race</text>
	<view class="btn-area">
    <button bindtap="any"  type="primary">请求1</button>

	</view>
</view>

index.js
在这里插入图片描述

 any(e){
    const app = getApp();
    // 1.先创建3个promise子实例
    let promise1 =   app.wxp.request({url: "http://localhost:30001"})
      .catch(err => { console.log("promise1")});
    let promise2 = app.wxp.request({ url: "http://localhost:30002/hi" })
      .catch(err => { console.log("promise2") });
    let promise3 = app.wxp.request({ url: "http://localhost:30001/user/home" })
      .catch(err => { console.log("promise3") });
    // 2.在通过Promise.any集合成为一个总的实例，然后进行执行
    let promise = Promise.any([promise1, promise2, promise3]).then(res=>{
      console.log("res1",res);
    },err=>{
      console.log("err1", err);
    })
    // 3.我们期许的结果是，这三个接口任何一个接口调用成功，会走到res里面，
    // 所有的调用失败才会走到err里面


  },

VM1031:1 thirdScriptError
Promise.any is not a function; [Component] Event Handler Error @ pages/api/index#bound any
TypeError: Promise.any is not a function
    at Se.any (http://127.0.0.1:16793/appservice/pages/api/index.js:30:27)
    at Object.r.safeCallback (http://127.0.0.1:16793/appservice/__dev__/WAService.js:2:1555740)
    at http://127.0.0.1:16793/appservice/__dev__/WAService.js:2:1675073
    at c (http://127.0.0.1:16793/appservice/__dev__/WAService.js:2:1683089)
    at http://127.0.0.1:16793/appservice/__dev__/WAService.js:2:1674998
    at r (http://127.0.0.1:16793/appservice/__dev__/WAService.js:2:1627525)
    at http://127.0.0.1:16793/appservice/__dev__/WAService.js:2:1627647
    at http://127.0.0.1:16793/appservice/__dev__/WAService.js:2:805361
    at n (http://127.0.0.1:16793/appservice/__dev__/asdebug.js:1:28029)
    at e.exports.<anonymous> (http://127.0.0.1:16793/appservice/__dev__/asdebug.js:1:28398)


Promise.any is not a function
any这个方法目前在草案这个提案当中，它不是一个正式发布的方法。
现在我们如果要实现这样的一个功能，我们怎么去做？
如果我们还想用any这个方法的话，我们可以自己去实现，
因为javascript它作为一种动态语言，它就有这种好处，我们可以没有的方法，我们可以自己动手去实现。

/**
 * @param {Array<Promise>} promises
 * @returns {Promise}
 */
//我们直接把这个方法写在Promise类对象上，我们就可以直接使用  Promise.any
//接受一个数组作为它的参数，
Promise.any = (arr) => {

  // 一共有多少个子实例
  let numTotal = arr.length;
  // 状态已经改变了多少个，作为一种计数
  let numSettled = 0;
  // 它是否已经是接受状态了
  let resolved = false;
  
  // 然后里面也是返回promise对象,同时它接受的也是一个匿名函数
  return new Promise((reslolve, reject) => {
  
    // for循环
    for (let j = 0; j < numTotal;j++){
      // 每个promise实例，我们可以先取出来
      let p =  arr[j];
      // 然后在作为一个监听
      p.then(res=>{
        // 如果有一个成功，就代表本身成功
        // 我们把resolved变量设置为true
        resolved = true;

        //同时调它本身的回调函数
        reslolve();
 
      },err=>{
        console.log("any err",err)

      }).finally(res=>{

        // 首先是计量，numSettled 它有多少个状态改变了，递增
        numSettled++
        // 递增之后，我们要检查一下，当前我们改变状态的数字，是不是已经达到了总数，
        // 如果达到了总数，并且它目前还不出于resolved解决状态
        // 这个就相当于所有的执行失败了，我们再调用reject方法,

        if (numSettled >= numTotal && !resolved) reject("all failed"); 
   
      })

    }



  });
}

在这里插入图片描述

3个接口都是fail的前提下，
刚刚出现的问题是，我们在外面的子实例上面然后加了catch，加了catch以后，没有进去，注释catch，就可以进入到err1中。
所以说我们目前对于any的实现，它其实说并不是特别完整，它只能说在一定条件之下，可以满足我们的需求

在这里插入图片描述

二、all

all这种方式，是所有的子实例的成功才算成功，有一失败便是失败。

index.wxml
在这里插入图片描述

<view class="page-section">
	<text class="page-section__title">3.4 any & all  & race</text>
	<view class="btn-area">
    <button bindtap="any"  type="primary">any</button>
    <button bindtap="all"  type="primary">all</button>
	</view>
</view>

在这里插入图片描述
index.js

  `3.4 all  all本身它是属于promise对象的一个方法,不需要我们去模拟实现了`
  all(e) {
    const app = getApp();
    // 1.先创建3个promise子实例
    let promise1 = app.wxp.request({ url: "http://localhost:30001" })
    // .catch(err => { console.log("promise1")});
    let promise2 = app.wxp.request({ url: "http://localhost:30002/hi" })
    // .catch(err => { console.log("promise2") });
    let promise3 = app.wxp.request({ url: "http://localhost:30001/user/home" })
    // .catch(err => { console.log("promise3") });

    // 2.在通过Promise.any集合成为一个总的实例，然后进行执行
    let promise = Promise.all([promise1, promise2, promise3]).then(res => {
      console.log("res1", res);
    }, err => {
      console.log("err1", err);
    })
    

  },

在这里插入图片描述

 `3.4 all  all本身它是属于promise对象的一个方法,不需要我们去模拟实现了`
  all(e) {
    const app = getApp();
    // 1.先创建3个promise子实例
    let promise1 = app.wxp.request({ url: "http://localhost:3000" })
    // .catch(err => { console.log("promise1")});
    let promise2 = app.wxp.request({ url: "http://localhost:3000/hi" })
    // .catch(err => { console.log("promise2") });
    let promise3 = app.wxp.request({ url: "http://localhost:3000/user/home" })
    // .catch(err => { console.log("promise3") });

    // 2.在通过Promise.any集合成为一个总的实例，然后进行执行
    let promise = Promise.all([promise1, promise2, promise3]).then(res => {
      console.log("res1", res);
    }, err => {
      console.log("err1", err);
    })
    

  },

三、race

有一个成功就算成功，有一个失败也算失败，就看哪个子实例执行的快。

index.wxml
在这里插入图片描述

<view class="page-section">
	<text class="page-section__title">3.4 any & all  & race</text>
	<view class="btn-area">
    <button bindtap="any"  type="primary">any</button>
    <button bindtap="all"  type="primary">all</button>
    <button bindtap="race"  type="primary">race</button>
	</view>
</view>

在这里插入图片描述

`3.4 race  是赛跑机制，只要这三个里面有一个有结果了，然后就马上返回一个结果。`
  race(e) {
    const app = getApp();
    // 1.先创建3个promise子实例
    let promise1 = app.wxp.request({ url: "http://localhost:30001" })
    // .catch(err => { console.log("promise1")});
    let promise2 = app.wxp.request({ url: "http://localhost:30001/hi" })
    // .catch(err => { console.log("promise2") });
    let promise3 = app.wxp.request({ url: "http://localhost:3000/user/home" })
    // .catch(err => { console.log("promise3") });

    
    let promise = Promise.race([promise1, promise2, promise3]).then(res => {
      console.log("res1", res);
    }, err => {
      console.log("err1", err);
    })


  },

四、总结

这节课我们主要实践练习了Promise的三个方法，any、all、race，
其中any还处于草案阶段，不过对Javascript这样的动态语言，对于缺失的方法我们可以自行补全。
下节课我们尝试将登录模块，使用Promise变成的方式进行改写。
weixin_42580704
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【微信小程序 | 实战开发】配置开发环境、生产环境和API
小新的博客
09-06 1446
配置开发环境、生产环境和API的使用 写在前面： 一、配置开发环境 1.1 项目目录： 1.2 JSON 配置 1.3 工具配置 project.config.json 1.4 页面配置 page.json 1.5 小程序的数据绑定 1.6 sitemap 配置 1.7 小程序的wxss文件 二、配置生产环境 2.1 完成账号关联和实名认证 2.2 进行生产环境初始化： 2.3 (云)服务器环境部署(基于Ubuntu) 三、小程序API 3.1 事件监听 API 3.2 同步 API 3.3 异步 API
微信小程序云开发实例演示
jekc2008的专栏
08-28 697
新手开发自己的APP，一个月的时间，前期准备，操作流程和遇到的问题，给大家成为有经验的开发者提供帮助！ 整个事务流程：开始-创建-修复-完善
微信小程序基础学习（一）
weixin_43550660的博客
01-28 208
微信小程序基础学习（一） JSON 配置 JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。 我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。 小程序配置 app.json app.json 是当前小程序的全局配置，包括了...
小程序使用promise.all
miin_ying的博客
05-12 1770
1.将wx.request请求用promise进行封装 //这是接口所在文件 /utils/methods.js export const getRequest1 = ()=>{ return new Promise((resolve,reject)=>{ wx.request({ url:'这是你的接口1', success:(result)=>{ resolve(result) },
jQuery实现页面滚动条自动滚动到需要的位置
zhangzeshan
07-23 1万+
代码如下： <script> $(function(){ $('html,body').animate({scrollTop:1000},'slow'); }) </script> 解读代码：在载入html页面的body这一块内容中，实现滚动进行展示body的某一块内容，scrollTop方法 进行滚动1000像素 （像素越大滚动的越下去，也...
微信小程序Promise示例
hongxue8888的博客
02-28 1841
文章目录PromisePromise.all()示例Promise.race()示例 Promise Promise 对象 Promise对象代表一个异步操作，有三种状态： pending（进行中） fulfilled（已成功） rejected（已失败） Promise.all()示例 Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。 ...
请求方法总结
weixin_30687811的博客
11-28 47
GET 　　　　　　查看资源POST 　　　　　增加资源PUT 　　　　　　修改资源DELETE 　　　　删除资源HEAD 　　　　　查看响应头OPTIONS 　　　 查看可用请求方法PATCH 　　　　 修改资源，通过json数据提交的方式实现修改，比PUT更轻量级 转载于:https://www.cnblogs.com/mengff/p/7911474.htm...
【愚公系列】《微信小程序开发解析》003-小程序框架（项目文件和逻辑层）
热门推荐
时光隧道
07-07 2万+
小程序框架是一种提供基础开发框架和工具的软件开发框架，用于简化和加速小程序应用程序的开发过程。小程序框架提供了一套规范和标准，帮助开发者快速构建小程序应用并管理应用的结构、数据流和页面之间的交互。
【愚公系列】《微信小程序开发解析》005-事件
最新发布
时光隧道
07-10 1万+
在微信小程序中，事件是用户和程序之间交互的核心概念。通过事件，用户可以与小程序进行各种交互操作，例如点击按钮、输入文字、滑动屏幕等。以下是微信小程序中事件的概念和使用方法。事件类型触摸事件：包括触摸开始、触摸移动、触摸结束等，如touchstarttouchmovetouchend等。鼠标事件：主要用于 PC 端小程序，如clickdblclick等。表单事件：与表单控件相关的事件，如submitinputfocusblur等。媒体事件：与音视频控件相关的事件，如playpauseended等。
小白学习微信小程序的云开发和云函数使用
吃不胖.
07-06 320
【引言】 微信小程序的云开发和云函数是一种基于云服务的开发模式，它可以让开发者在小程序中使用云端的资源和功能，包括数据库、文件存储、云函数等。1.1 云开发的基本概念 云开发是基于微信小程序的一种开发模式，它提供了云端的资源和功能，包括数据库、文件存储、云函数等。2.1 云函数的基本概念 云函数是运行在云端的代码，通过云端的资源和功能来实现一些复杂的业务逻辑。2.2 云函数的创建和部署 要创建云函数，首先需要在小程序项目中创建一个云函数目录，并在该目录下创建一个入口文件。
微信小程序 wx.request(接口调用方式)详解及实例
11-28
微信小程序 wx.request—-接口调用方式     最近开发了一个微信小程序版的任务管理系统，在向Java后台发送接口时遇到了一些问题，在这里做一个简单的总结。 官方接口 官方给出的接口叫做wx.request，请求方式比较简单，下面是官网给出的请求实例。 wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' }, success: function(res) { cons
go gin框架：Any响应任何请求类型
学亮编程手记
12-06 969
package main import ( "net/http" "github.com/gin-gonic/gin" ) func main() { r := gin.Default() r.Any("any-request", func(ctx *gin.Context) { ctx.String(http.StatusOK, "可以响应任何请求") }) r.Run() }
HTTP请求之两种方式
Leovany的专栏
10-26 1218
序： http 请求是后台经常使用的技术，以下是请求的两种方式，亲测有效，代码直接复制黏贴可用。 一、原生态HTTP请求方式 package httpTest; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.InputStreamReader; import java.net.H
微信小程序引入promise报错
BLOG
12-17 8715
微信小程序引入 promise 相关库及 Android 真机报错解决方案 如果你恰巧使用的是 bluebird ，又恰巧你只是在模拟器上测试或者你的真机是iOS系统，你有必看看到最后，因为在Android的真机下，bluebird会报错建议阅读对象: 在小程序中使用 Promise 或者使用 bluebird 报错的对象。如果你现在还不知道 Promise 是什么，建议先去查看es6后再看，不然
微信小程序——request封装/promise,async封装request
asteriaV的博客
07-02 650
一，request封装 1，在根目录utils下创建一个index.js文件,用来写封装的request 2,创建config/index.js来放我们的基础路径 3，utils/index.js import {BASEURL} from '../config/index';//引入基础路径 export function $get(url,success){ $request(url,'GET',success) } export function $post(url,succes..
微信小程序promise的引用
weixin_50784508的博客
02-27 836
所以，经过这段代码后，你可以通过wxp对象来调用微信小程序的API，并且这些API会返回Promise对象，使你可以使用async/await语法来更方便地处理异步操作。这段代码是用于将微信小程序的异步API转换为返回Promise对象的版本，从而使你可以使用更现代、更简洁的异步编程模式（如async/await）来调用这些API。promisifyAll函数的作用是将wx对象中的所有异步方法转换为返回Promise的方法，并将这些转换后的方法挂载到wxp对象上。这种写法更加简洁和易读。
Promise（手动实现）
风起
09-25 1040
文章目录1. `Promise`1.1 `Promise` 的 基本使用1.1.1 创建1.1.2 静态方法1.1.3` then`、`catch`1.1.4 `finally`1.2 `Promise`实现1.2.1 确定成员函数和成员变量1.2.2 准备工作1.2.3 定义状态1.2.4 定义`MP`的结构1.2.5 实现`MpPrototype`1.2.5.1 实现`resolve`和`reject`函数1.2.5.2 实现`then`1.2.5.3 进一步完善`resolve`和`reject`函数
微信小程序MiniProgramError Q.createEvent is not a function
weixin_46743083的博客
11-25 1507
微信小程序报错： Q.createEvent is not a function TypeError: Q.createEvent is not a function 解决方法 查看下小程序开发后台的合法域名是否已配置，这里需要配置好域名的合法性。
微信小程序数据缓存wx.setStorageSync(string key, any data)中，any data只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
zdz的博客
11-16 643
特别要注意： 微信小程序数据缓存wx.setStorageSync(string key, any data)中，any data只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
微信小程序开发：网络请求与数据对接详解（第3章）
在"微信小程序开发教程-从零开始（3）"中，本文主要讲解了微信小程序如何实现列表的网络请求与数据对接。首先，开发者需在`index.js`文件中集成网络请求功能，利用微信小程序提供的`wx.request`方法。这个方法的基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值