Promise.all()方法在项目中的应用

Promise.all()方法在项目中的应用

<script>
    const handleData = async () => {
      /* 定义一个空的数组 */
      let picSrcArr = [];
      /* 循环遍历数组,在每个数组中添加一个logo属性,此属性需要根据数组的每一项向后端请求数据,随即给每项进行赋值 */
      res.data.forEach((item) => {
        let promiseItem = new Promise(async resolve => {
          let params = {
            storeName: item.logo
          };
          const res = await api.handleFile.fileDownload({ params });
          return resolve(res);
        });
        picSrcArr.push(promiseItem);
      });
      Promise.all(picSrcArr).then(result => {
        result.forEach((item, index) => {
          res.data[index].logo = window.URL.createObjectURL(item);
          res.data[index]['enabled'] = true;
        });
        myAppList.value = res.data || [];
      });
    };
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Promise 在 Vue 项目的实际应用场景有很多,下面列举几个常见的场景: 1. 异步请求数据:在 Vue ,我们通常会通过 AJAX 请求数据,而 AJAX 是异步的,如果我们需要在数据请求完成后进行一些操作(比如渲染数据、更新视图等),就需要使用 Promise。比如: ``` axios.get('/api/data').then(response => { // 对数据进行处理 }) ``` 2. 处理并发异步请求:有些情况下,我们需要同时发送多个异步请求,当所有请求都完成后再进行一些操作。这时我们可以使用 Promise.all() 方法,该方法接收一个 Promise 数组作为参数,当所有 Promise 都完成后,它会返回一个新的 Promise 对象,该对象的状态是 fulfilled,同时它的值是一个包含所有 Promise 结果的数组。 ``` Promise.all([ axios.get('/api/data1'), axios.get('/api/data2') ]).then(results => { // 对数据进行处理 }) ``` 3. 处理异步操作的错误:在异步操作,可能会出现错误。如果没有处理这些错误,将会导致程序崩溃。我们可以使用 Promise.catch() 方法来捕获这些错误,然后进行处理。比如: ``` axios.get('/api/data').then(response => { // 对数据进行处理 }).catch(error => { // 处理错误 }) ``` 4. 封装异步操作:在 Vue 项目,我们可能会封装一些异步操作,比如封装一个请求数据的函数或者封装一个调用 API 的方法。这时我们可以使用 Promise 来封装这些异步操作,使得调用者可以通过 Promise 的 then() 方法来获取操作结果,或者通过 catch() 方法来处理错误。比如: ``` function fetchData() { return new Promise((resolve, reject) => { axios.get('/api/data').then(response => { resolve(response.data) }).catch(error => { reject(error) }) }) } fetchData().then(data => { // 对数据进行处理 }).catch(error => { // 处理错误 }) ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值