这是小程序开发过程中遇到的一个问题,但是篇幅比较大,也就另起一文了。
在做图片上传时,要多图片上传,就考虑将上传封装起来。
这时候就遇到了一个问题,当图片都上传完成时,要在最后显示一下wx.showToast({}),可是图片的上传是异步上传的
uploadFiles:function(id,images,index=0){
let _this = this;
if (images.length <= index) {
return;
wx.showLoading({
title: "正在上传第" + (index + 1) + "张图片",
mask: true,
success: res => {
wx.uploadFile({
url: _this.globalData.domain + "/index/goods/uploadFile",
filePath: images[index++]['path'],
name: 'file',
header: {
"Content-Type": "multipart/form-data"
success: res => {
wx.hideLoading();
res = JSON.parse(res.data);
if (res.status == 1) {
_this.uploadFiles(id, images, index);
} else {
console.log(res);
});
});
submit:function(e){
let _this = this;
let data = e.detail.value;
wx.showLoading({
title:"上传中...",
mask:true
});
wx.request({
url:_this.data.domain + "/Index/goods/add",
method:"post",
data:{data},
success:res=>{
if(res.data.status == 1){
wx.hideLoading();
let id = res.data.message;
app.uploadFiles(id,_this.data.thumbnail);
wx.showToast({
title: '登记成功!',
icon:'success'
});
});
这时候会发现,Toast是夹杂在Loading弹出的(一般是在Loading前面)。
这异步的锅呀,于是打算用Promise
的then
来解决。
开始是直接用Promise将函数体包裹起来
uploadFiles:function(id,images,index=0){
let _this = this;
return new Promise(function(resolve, reject){
});
然而运行会发现,then不会被调用
。
只好查资料了,看了很多文章,最后觉得一个说法比较靠谱:
每次递归都返回一个 new promise是全新的,与最开始的那个promise没有任何关系,所以第一个promise永远不会被resolve
既然知道问题所在,那么就好解决了:
upload:function(id,images,index=0){
let _this = this;
return new Promise(function(resolve, reject){
function uploadFiles(id,images,index) {
if (images.length <= index) {
resolve("success");
return;
wx.showLoading({
title: "正在上传第" + (index + 1) + "张图片",
mask: true,
success: res => {
wx.uploadFile({
url: _this.globalData.domain + "/index/goods/uploadFile",
filePath: images[index++]['path'],
name: 'file',
header: {
"Content-Type": "multipart/form-data"
success: res => {
wx.hideLoading();
res = JSON.parse(res.data);
if (res.status == 1) {
uploadFiles(id, images, index);
} else {
console.log(res);
});
});
uploadFiles(id,images,index);
app.upload(id,_this.data.thumbnail).then((resolve,reject)=>{
wx.showToast({
title: '登记成功!',
icon:'success'
});
});
Promise
Promise 是一个对象,它代表了一个异步操作的最终完成或者失败。因为大多数人仅仅是使用已创建的 Promise 实例对象,所以本教程将首先说明怎样使用 Promise,再说明如何创建 Promise。
本质上,Promise 是一个被某些函数传出的对象,我们附加回调函数(callback)使用它,而不是将回调函数传入那些函数内部。
假设现在有一个名为 createAudioFi...
Javascript: 普通函数的return,Promise的resolve如何使用错误示范普通函数Promise的resolve
// 创建一个Promise的函数
customeFunction() {
return new Promise(resolve => {
resolve('你是一个好人');
// 错误调用
var acceptValue = customeFunction();
console.log(acceptValue); // 没有输出
问题:项目中有一个需求,一个tabBar下面如果没有内容就不让该tabBar显示,当然至于有没有内容,需要我们通过请求的来判断,但是由于请求是异步的,如何让请求按照tabBar的顺序进行?方案:我们可以将promise变成下一个请求,可以利用递归来实现实施://定义初始数据 requestlist就像tabBar列表let requestlist = [1, 2, 3, 4, 5, 6, 7,8,...
当我在做小程序的时候,由于客户端要保存token,而token存在过期的可能,这个时候就需要递归调用一次获取token的方法,而我的请求也是异步的,这个时候该怎么做呢?(下面都是伪代码)
我封装的HTTP请求的代码request.js
request(url, data, method) {// HTTP请求入口
return new Promise((resolve, reject) =&amp;amp;gt...
function promise () {
console.log(waiting ${counter ++}s...);
return new Promise(resolve =&gt; {
if (counter &gt;= max) {
return resolve(“promise finish”);
} else {
set...
https://www.cnblogs.com/lvdabao/p/es6-promise-1.html
https://www.cnblogs.com/minigrasshopper/p/9141307.html
https://segmentfault.com/a/1190000011652907
promise原理
其实,promise就是三个状态。利用观察者模式...
function myPromise() {
let self = this; // 此处 this 代指myPromise 这个函数
self.status = 'pending' // pending => resolve/reject
let value = null // 成功时的参数
let reason = null // 失败时的参数
// 成功的回调
Promise 是一个对象,它代表了一个异步操作的最终完成或者失败。因为大多数人仅仅是使用已创建的 Promise 实例对象,所以本教程将首先说明怎样使用 Promise,再说明如何创建 Promise。
getDishByOrder(arr) {
return new Promise((resolve, reject) => {
var orderNum = arr.length; //订单数量
var index = 0; //计数循环
var arrResult = arr.concat(); //最终处理好已添加了菜品的数组
var .
Javascript 是一个单线程的语言,在前端编程中,我们在处理一些简短、快速的操作时,往往在主线程中就可以完成。主线程作为一个线程,不能够同时接受多方面的请求。坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段 Javascript 代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行。
为了解决这个问题,Javascript 语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchro
请求需要带上一个token作为验证。token有时效性,过期请求就无效需要重新获取有效的token,然后带上有效token重新请求。
function get(url) {
const token = getTokenStorage();
return new Promise((reject, resolve) => {
axios.get(`${url}?token=${t...
前言: 现在的页面使用图片越来越频繁,如果用户的电脑网速快还好,一般不会有问题,如果是慢网速的用户,一次加载100张甚至更多的图片,就会导致加载超时的问题; 为了解决这个问题,我们可以尝试使用Promise和递归函数的原理,只有原理,具体的使用需要结合实际的业务场景
废话不多说,直接上代码
// 这段代码可以直接放到js文件里面运行,设置的是10张图片,每次加载三张
var imgArr = ...