for (let i = 0; i < localIds.length; i++) {
let loacId = localIds[i].id
let linkStatu = _this.isIosOrAndroid()
if (!(linkStatu == 'android')) {
if (loacId.indexOf('wxlocalresource') != -1) {
loacId = loacId.replace('wxlocalresource', 'wxLocalResource')
promises.push(_this.uploadImage(loacId))
Promise.all(promises)
.then(serverIds => {
//serverIds 就是所有执行完成的返回结果
.catch(error => {
当然,我上面只是个案例,同时也说一个坑就是上面我处理的是调用微信jssdk的上传api,但是多图上传时进行并发并不起作用,原因是微信那边的上传只能等上传完上一张图片才能执行下一张图片,所以如果是调用微信的 wx.uploadImage就要采取递归的方式才行,或者使用 async/await,举例代码如下:
async wxuploadImage(localIds) {
var serverIds = []
// this.localIdsdata = localIds
for (let i = 0; i < localIds.length; i++) {
try {
// alert("2"+ localIds[i].id)
let loacId = localIds[i].id
let linkStatu = this.isIosOrAndroid() //判断安卓还是ios
if (!(linkStatu == 'android')) {
if (loacId.indexOf('wxlocalresource') != -1) {
loacId = loacId.replace('wxlocalresource', 'wxLocalResource')
var serverId = await this.uploadImage(loacId) // 等待Promise对象返回
serverIds.push(serverId) // 将serverId存储到数组中
} catch (err) {
console.error(err) // 处理错误信息
// 所有图片上传完成,进行下一步处理
console.log(serverIds)
this.sendMediaid(serverIds)
uploadImage(loacId) {
return new Promise(function (resolve, reject) {
wx.uploadImage({
localId: loacId,
isShowProgressTips: 0, // 显示上传进度提示
success: function (res) {
var serverId = res.serverId // 上传成功后返回的serverId
// alert("3" + serverId)
resolve(serverId) // 将serverId传递给Promise的then方法
fail: function (err) {
reject(err) // 将错误信息传递给Promise的catch方法
一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身"农奴"把歌唱,一边打入敌人内部一边持续提升自己,为我们广大开发同胞谋福祉,坚决抵制睿智产品折磨我们码农兄弟!
07-30
其实正常的业务中,按理来说 是一个按钮控制一个
请求
,处理一项业务。
但有的时候还是会出现 一个按钮控制多个
并发
请求
的业务,这几个
请求
之间还没有关联。
但问题是,你得知道所有的
请求
处理完成之后,要给用户一个反馈的。
这个时候 如果使用传统的ajax
请求
的话,好像我们不知道啥时候 所有的
并发
请求
都处理完了,或者是 那个
请求
出了问题 然后报出对应的错误。
其实通过一个系统的设计还是能用es5的方式处理这些
并发
请求
的
但今天就讲解下
promise
.
all的用法,让你快速实现呢,
promise
这个东西出来也好几年了
for (var i = 0; i < 6; i++) {
var digital = new URLSearchParams();
digital
.
append("wtId", this
.
fj);
digital
.
append("recorddate", this
.
data_01);
digital
.
append("type", (i + 1)
.
.
假设现在有这么一种场景:现有 30 个异步
请求
需要发送,但由于某些原因,我们必须将同一时刻
并发
请求
数量控制在 5 个以内,同时还要尽可能快速的拿到响应结果。
如图所示:
上图这样的排队和
并发
请求
的场景基本类似,窗口只有三个,人超过三个之后,后面的人只能排队了。
二、串行和并行
串行:一个异步
请求
完了之后在进行下一个
请求
并行:多个异步
请求
同时进行
串行举例:
var p = function () {
return new
Promise
(function (resolve, rejec
一、
Promise
.
all的使用
Promise
.
all可以将多个
Promise
实例包装成一个新的
Promise
实例。同时,成功和失败的返回值是不同的,成功时返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。
let p1 = new
Promise
((resolve, reject) => {
resolve('成功了')
let p2 = new Prom
.
.
.
//
Promise
的三个状态 pedding(默认) fulfilled(成功) reject(失败)
// 当resolve函数执行时,会将
promise
状态pedding状态改成filfilled成功
// 当reject函数执行时,会将
promise
状态从pedding状态改成rejected成功
//
promise
.
all([
promise
1,
promise
2,
promise
3])等待原则,所有
promise
都执行完后再执行
.
.
.
前言现在面试过程当中 ,手写题必然是少不了的,其中碰到比较多的无非就是当属
请求
并发
控制 了。现在基本上前端项目都是通过axios来实现异步
请求
的封装,因此这其实是考你对
Promise
以及异步编程的理解了。引出题目://设计一个函数,可以限制
请求
的
并发
,同时
请求
结束之后,调用callback函数
//sendRequest(requestList:,limits,callback):void
.
.
.
有这样一个面试题目:
有 8 个图片资源的 url,已经存储在数组 urls 中(即urls = [‘http://example
.
com/1
.
jpg’, …
.
, ‘http://example
.
com/8
.
jpg’]),而且已经有一个函数 function loadImg,输入一个 url 链接,返回一个
Promise
,该
Promise
在图片下载完成的时候 resolve,下载失败则 reject。
但是我们要求,任意时刻,同时下载的链接数量不可以超过 3 个。
请写一段代码实现这个需求,要求尽可能
Promise
.
all(
promise
s:[])
.
then(fun:function);
Promise
.
all可以保证,
promise
s数组中所有
promise
对象都达到resolve状态,才执行then回调。
这时候考虑一个场景:如果你的
promise
s数组中每个对象都是http
请求
,或者说每个对象包含了复杂的调用处
.
.
.
// 使用
Promise
.
all 发送
并发
请求
Promise
.
all(urls
.
map(url => fetch(url)))
.
then(responses => {
// 处理响应结果
console
.
log(responses);
.
catch(error => {
// 处理错误
console
.
error(error);
上述代码中,我们使用了
Promise
.
all
方法
,该
方法
接收一个
Promise
对象数组,返回一个新的
Promise
对象。在该示例中,我们使用 map
方法
将每个 url 转换为一个
Promise
对象,然后将这些
Promise
对象作为参数传递给
Promise
.
all
方法
,这样就可以
并发
发送多个
请求
。
当所有
请求
都完成时,
Promise
.
all
方法
会返回一个包含所有响应结果的数组,我们可以在 then
方法
中处理这些响应结果。如果其中任何一个
请求
出错,catch
方法
会捕获错误并进行处理。
需要注意的是,
Promise
.
all
方法
只有在所有
请求
都成功返回时才会返回一个成功的
Promise
对象,如果其中任何一个
请求
失败,它将返回一个失败的
Promise
对象。如果我们需要在其中任何一个
请求
成功时就处理响应结果,可以使用
Promise
.
race
方法
。