promise多请求并发

曾不错吖

已于 2023-12-27 12:06:02 修改

阅读量171

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-11-14 09:49:25 首次发布

本文链接：https://blog.csdn.net/sisuiban/article/details/134392004

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <script>
        let p1 = new Promise((resolve, reject) => {
            resolve('成功了')
        })

        let p2 = new Promise((resolve, reject) => {
            resolve('success')
        })

        let p3 = Promise.reject('失败')
        let p4 = Promise.reject('失败4')

        // 这种事失败成功都会返回
        Promise.allSettled([p1, p3, p2,p4,p2])
            .then((results) => {
                /***
                 *   results是一个数组，内容如下
                 * [
                 * {status:'fulfilled',value:'成功了'},
                 * {status:'rejected',value:'失败'},
                 * {status:'fulfilled',value:'成功了'},
                 * {status:'rejected',value:'失败4'},
                 * {status:'fulfilled',value:'成功了'},
                 *
                 * ]
                */
                console.log('不管有没有成功失败，我这都会执行：', results);
                results.forEach((result) => {

                    if (result.status === 'fulfilled') {
                        console.log('成功：', result.value);
                    } else {
                        console.log('失败：', result.reason);
                    }
                });
            });

        // 这种是  只要有失败就会退出发送请求的行为
        Promise.all([p1, p3, p2,p4,p2]).then((result) => {
            console.log(result)
        }).catch((error) => {
            console.log(error)      // 失败了，打出 '失败'
        })


    </script>
</body>

</html>

运行结果：
在这里插入图片描述

PC上多个图片上传不堵塞

const upLoadImage = (upload_file) => {
  return upload_file.map((item) => {
    return new Promise((resolve, reject) => {
      const formData = new FormData();
      formData.append("file", item.raw);
      AddProductPic(formData)
        .then((res) => {
          resolve(res); // 将上传成功的结果resolve出去
        })
        .catch((error) => {
          reject(error); // 将上传失败的错误信息reject出去
        });
    });
  });
};
const onClick_fileListOne = () => {
  // 商品图片上传
  console.log("上传文件的数组", addFormData.value.fileListOne);
  let result = upLoadImage(addFormData.value.fileListOne);
  Promise.all(result).then((responses) => {
    console.log("上传返回的", responses);
    let successImages = responses
      .filter((data) => data.msg === "成功")
      .map((data) => data.data);
    let postimgStr = "";
    if (successImages.length > 0) {
      postimgStr = successImages.join(",");
    } else {
      postimgStr = "";
    }
    addFormData.value.form.picture = postimgStr;
  });
};

微信小程序或者uniapp中多个图片上传不堵塞

onChooseAvatar() {
    let {
      upload_file,
      formData,
      UserOpenid
    } = this.data

    wx.showLoading({
      title: '新增中。。。'
    });
    let result = this.upLoadImage(upload_file)
    Promise.all(result).then(responses => {
      let dataList = responses.map(res => JSON.parse(res.data))
      let successImages = dataList.filter(data => data.msg === '上传成功').map(data => data.data)
      let postimgStr = ''
      if (successImages.length > 0) {
        postimgStr = successImages.join(',')
      } else {
        postimgStr = ''
      }
      let obj = {
      postphone: formData.postphone,
        posttitle: formData.posttitle,
        postsalary: formData.postsalary,
        postage: formData.postage,
        postmethod: formData.postmethod,
        postsex: formData.postsex,
        customername: formData.customername,
        postaddress: formData.postaddress,
        postinfo: formData.postinfo,
        postpresent: formData.postpresent,
        postimg: postimgStr,
        postopenid: UserOpenid.openid,
      }
      AddGangwei(obj).then(dataApi => {
        wx.hideLoading()

        console.log('dataApi', dataApi)
        if(dataApi.data.code==200){
          wx.showToast({
            title: dataApi.data.msg,
            icon: 'success',
            duration: 2000
          })
          wx.setStorageSync('ShuXin', 'addedit')
          setTimeout(()=>{
            wx.navigateBack()
          },2000)
        }else{
          wx.showToast({
            title: dataApi.data.msg,
            icon: 'none',
            duration: 2000
          })
        }

      }).catch(error => {
        wx.hideLoading()
        wx.showToast({
          title: '失败，请查看日志',
          icon: 'none',
          duration: 2000
        })
      })
    }).catch(error => {})
  },
  upLoadImage(upload_file) {
    return upload_file.map(item => {
      return new Promise((resolve, reject) => {
        wx.uploadFile({
          url: 'https://jcnh.jiuchang.work:17776/Wx/WxSendGW/WxSendUpload',
          filePath: item.tempFilePath,
          name: 'file',
          success: resolve,
          fail: reject
        })
      })
    })
  }