【promise与递归调用】

这是小程序开发过程中遇到的一个问题，但是篇幅比较大，也就另起一文了。

在做图片上传时，要多图片上传，就考虑将上传封装起来。
这时候就遇到了一个问题，当图片都上传完成时，要在最后显示一下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){
		      //将迭代体放在Promise里
              function uploadFiles(id,images,index) {
                  if (images.length <= index) {
                  //结束时resolve一下
                      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);
                                  }
                              }
                          });
                      }
                  });
              }
              //很多新手会忘了加这一步调用（没错，说的就是我这个新手，血泪史T_T）
              uploadFiles(id,images,index);
          }
      );
    },

调用：

app.upload(id,_this.data.thumbnail).then((resolve,reject)=>{
     wx.showToast({
       title: '登记成功！',
       icon:'success'
     });
});