JavaScript中的Promise

已于 2023-11-27 11:14:23 修改
阅读量910 收藏 15
点赞数 21
分类专栏： JavaScript知识 文章标签： 前端 es6 javascript
于 2023-11-27 00:53:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ifeng618/article/details/134635245
版权

当谈到JavaScript中的异步编程时，Promise是一种非常重要的概念。它是一种用于处理异步操作的对象，可以更好地管理和组织代码。

什么是Promise？

Promise是一种表示异步操作最终完成或失败的对象。它可以看作是对异步操作的封装，使得我们可以更方便地处理异步代码。Promise有三种状态：pending（进行中）、fulfilled（已完成）和rejected（已失败）。一旦Promise的状态变为fulfilled或rejected，就称为Promise已解决。

Promise的基本用法

创建一个Promise对象的基本语法如下：

const promise = new Promise((resolve, reject) => {
  // 异步操作
});

Promise构造函数接受一个函数作为参数，这个函数又接受两个参数：resolve和reject。resolve用于将Promise的状态从pending变为fulfilled，而reject用于将Promise的状态从pending变为rejected。

在Promise对象内部，我们可以执行异步操作，例如发送网络请求、读取文件等。一旦异步操作完成，我们可以调用resolve或reject来改变Promise的状态。

Promise对象有两个重要的方法：then和catch。then方法用于处理Promise已解决的情况，而catch方法用于处理Promise已失败的情况。它们的基本语法如下：

promise.then((result) => {
  // 处理已解决的情况
}).catch((error) => {
  // 处理已失败的情况
});

在then方法中，我们可以获取到异步操作的结果，并进行相应的处理。在catch方法中，我们可以捕获到异步操作的错误，并进行错误处理。

Promise的常用属性与方法

除了基本的用法之外，Promise还提供了一些常用的属性与方法，用于更灵活地处理异步操作。

Promise.all

Promise.all方法接受一个Promise对象的数组作为参数，并返回一个新的Promise对象。
这个新的Promise对象在数组中的所有Promise对象都解决后才会解决，如果有任何一个Promise对象被拒绝，则新的Promise对象将立即被拒绝。

const promise1 = new Promise((resolve, reject) => {
  // 异步操作
});

const promise2 = new Promise((resolve, reject) => {
  // 异步操作
});

Promise.all([promise1, promise2])
  .then((results) => {
    // 处理所有Promise对象已解决的情况
  })
  .catch((error) => {
    // 处理任何一个Promise对象已失败的情况
  });

Promise.race

Promise.race方法接受一个Promise对象的数组作为参数，并返回一个新的Promise对象。
这个新的Promise对象在数组中的任何一个Promise对象解决或拒绝后立即解决或拒绝。

const promise1 = new Promise((resolve, reject) => {
  // 异步操作
});

const promise2 = new Promise((resolve, reject) => {
  // 异步操作
});

Promise.race([promise1, promise2])
  .then((result) => {
    // 处理第一个解决或拒绝的Promise对象的情况
  })
  .catch((error) => {
    // 处理第一个解决或拒绝的Promise对象的情况
  });

Promise.resolve

Promise.resolve方法返回一个已解决的Promise对象，可以用于将一个值或另一个Promise对象转换为Promise对象。

const promise = Promise.resolve(value);

Promise.reject

Promise.reject方法返回一个已拒绝的Promise对象，可以用于将一个错误或异常转换为Promise对象。

const promise = Promise.reject(error);

Promise.prototype.finally

Promise.prototype.finally方法用于指定不管Promise对象最终的状态如何，都会执行的回调函数。

promise
  .then((result) => {
    // 处理已解决的情况
  })
  .catch((error) => {
    // 处理已失败的情况
  })
  .finally(() => {
    // 不管Promise对象最终的状态如何，都会执行的回调函数
  });

Promise的应用场景

Promise在JavaScript中有广泛的应用场景，以下是一些常见的应用场景：

  1. 异步请求：Promise可以用于处理异步请求，例如发送AJAX请求或使用fetch API获取数据。我们可以使用Promise的then方法来处理请求成功的情况，使用catch方法来处理请求失败的情况。
     

    function getData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error('请求失败'));
      }
    };
    xhr.onerror = () => {
      reject(new Error('请求出错'));
    };
    xhr.send();
  });
}

getData('https://api.example.com/data')
  .then(data => {
    console.log('请求成功', data);
  })
  .catch(error => {
    console.error('请求出错', error);
  });



fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json();
  })
  .then(data => {
    console.log('请求成功', data);
  })
  .catch(error => {
    console.error('请求出错', error);
  });

  2. 定时器：Promise可以与定时器结合使用，实现延迟执行或定时执行的功能。我们可以使用Promise的resolve方法来延迟执行代码，或者使用setTimeout函数结合Promise来实现定时执行的功能。
     

    // 使用Promise的resolve方法实现延迟执行的例子：
console.log('开始执行');
Promise.resolve()
  .then(() => {
    console.log('延迟执行');
  });
console.log('继续执行');
//开始执行
//继续执行
//延迟执行



//使用setTimeout函数结合Promise实现定时执行的例子：
console.log('开始执行');
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve();
  }, 1000);
})
.then(() => {
  console.log('定时执行');
});
console.log('继续执行');
//开始执行
//继续执行
//定时执行

  3. 文件操作：Promise可以用于读取文件、写入文件或处理其他与文件相关的操作。我们可以使用Promise的resolve方法来读取文件内容，使用reject方法来处理文件读取失败的情况。

  4. 动画效果：Promise可以用于实现动画效果，例如在指定的时间内逐渐改变元素的样式。我们可以使用Promise的resolve方法来实现动画效果的过渡效果，使用reject方法来处理动画效果的中断情况。
     

    <!DOCTYPE html>
<html>
<head>
  <title>动画效果示例</title>
  <style>
    .box {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box"></div>

  <script>

    function animate(element, property, from, to, duration) {
  return new Promise((resolve, reject) => {
    const start = performance.now();
    function update(timestamp) {
      const elapsed = timestamp - start;
      const progress = Math.min(elapsed / duration, 1);
      const value = from + (to - from) * progress;
      element.style[property] = value + 'px';
      if (progress < 1) {
        requestAnimationFrame(update);
      } else {
        resolve();
      }
    }
    requestAnimationFrame(update);
  });
}

const box = document.querySelector('.box');e
animate(box, 'left', 0, 300, 1000)
  .then(() => {
    console.log('动画完成');
  })
  .catch(() => {
    console.log('动画中断');
  });
//在上面的例子中，我们定义了一个名为animate的函数，它接受元素、样式属性、起始值、目标值和持续时间作为参数，并返回一个Promise对象。在函数内部，我们使用requestAnimationFrame函数来实现动画效果的平滑过渡。在每一帧中，我们根据已经过的时间计算出当前的进度，并根据进度计算出当前的值。然后，我们将当前的值设置为元素的样式属性值。如果动画还未完成，我们继续请求下一帧。如果动画完成，我们使用resolve方法将Promise对象解决。

//在使用animate函数时，我们传入一个元素、样式属性、起始值、目标值和持续时间来定义动画效果。然后，我们使用then方法来处理动画完成的情况，并将其打印出来。如果动画中断，我们使用catch方法来处理中断情况，并将其打印出来。

//请注意，上面的例子是一个简化的动画效果实现示例。在实际应用中，我们可能还需要处理更多的情况，例如动画的缓动效果、同时执行多个动画等。但是基本的使用方法是相似的，通过使用Promise来实现动画效果的过渡效果，并使用resolve方法来处理动画完成的情况，使用reject方法来处理动画中断的情况。
  </script>
</body>
</html>

  5. 多个异步操作的协调：Promise可以用于协调多个异步操作的执行顺序和结果处理。通过链式调用，我们可以按照预定的顺序执行多个异步操作，并在每个操作完成后进行相应的处理。
     

    function asyncOperation1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('异步操作1完成');
      resolve('结果1');
    }, 2000);
  });
}

function asyncOperation2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('异步操作2完成');
      resolve('结果2');
    }, 1500);
  });
}

function asyncOperation3() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('异步操作3完成');
      resolve('结果3');
    }, 1000);
  });
}

asyncOperation1()
  .then((result1) => {
    console.log('结果1:', result1);
    return asyncOperation2();
  })
  .then((result2) => {
    console.log('结果2:', result2);
    return asyncOperation3();
  })
  .then((result3) => {
    console.log('结果3:', result3);
    console.log('所有异步操作完成');
  })
  .catch((error) => {
    console.error('发生错误:', error);
  });
//异步操作1完成
//结果1: 结果1
//异步操作2完成
//结果2: 结果2
//异步操作3完成
//结果3: 结果3
//所有异步操作完成

//在上面的代码中，我们定义了三个异步操作函数：asyncOperation1、asyncOperation2和asyncOperation3。每个函数返回一个Promise对象，在一定的延迟后完成，并返回一个结果。

//然后，我们使用Promise的链式调用来协调这三个异步操作的执行顺序。首先，我们调用asyncOperation1函数，并在其完成后使用then方法来处理结果。在then方法中，我们打印出结果1，并返回asyncOperation2函数的调用结果。

//接下来，我们调用asyncOperation2函数，并在其完成后使用then方法来处理结果。在then方法中，我们打印出结果2，并返回asyncOperation3函数的调用结果。

//最后，我们调用asyncOperation3函数，并在其完成后使用then方法来处理结果。在then方法中，我们打印出结果3，并输出所有异步操作完成的消息。

//如果在任何一个异步操作中发生错误，我们可以使用catch方法来捕获并处理错误。

//通过上述代码，我们可以按照预定的顺序执行多个异步操作，并在每个操作完成后进行相应的处理。这种方式可以确保异步操作的顺序性和结果的正确处理。

总结

Promise是JavaScript中用于处理异步操作的重要概念。它可以更好地管理和组织异步代码，避免回调地狱的问题。通过Promise的链式调用，我们可以按顺序执行多个异步操作，并在每个操作完成后进行相应的处理。Promise提供了一些常用的属性与方法，例如Promise.all、Promise.race、Promise.resolve、Promise.reject和Promise.prototype.finally，用于更灵活地处理异步操作。Promise在异步请求、定时器、文件操作、动画效果和多个异步操作的协调等场景中有广泛的应用。

ifeng618
关注
专栏目录
promise.js
09-08
Promise.js Promise承诺函数的实现，支持任何浏览器； 用法与ES6 Promise函数完全一致。。。。。。。。。。。
JS中的Promise
gghhb12的博客
08-12 3343
Promise是异步编程的一种解决方案，他是一个对象，可以获取异步操作的消息，避免了回调地狱所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Pending（进行中）Resolved（已完成）Rejected（已拒绝）
JS中Promise用法（简要说明）
最新发布
Huanzhi_Lin的博客
08-23 758
promise、异步、避免回调地狱、同步方式编程异步
js promise
qq_63660369的博客
09-17 262
promise是抽象的异步处理对象，实例化的promise有三种状态Fulfilled: 表示成功解决，这时会调用 onFulfilled.Rejected: 表示解决失败，此时会调用 onRejected.Pending: 表示待解决，既不是resolve也不是reject的状态。也就是promise对象刚被创建后的初始化状态.
JS Promise
博客
07-02 165
http://www.cnblogs.com/zhouyangla/p/8848358.html　　Promise的介绍promise 主要用来传递异步操作的数据　　var data = 接收的异步数据；　　console.log(data)　　数据不知道是什么，因为不能确定异步是否运行完了　　在调用异步里面的数据时，我们不知道异步是否已经运行完成，调用的数据不能确定是不是我们想要的promise...
Javascript中Promise的四种常用方法总结
10-19
在JavaScript中，Promise是处理异步操作的一种重要机制，它为复杂的回调地狱提供了优雅的解决方案。Promise有三种基本状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。当状态改变后，它不会再次...
理解JavaScript中Promise的使用
10-22
JavaScript中的Promise是一种特殊的对象，用于处理异步操作。它代表了一个中间状态，这个状态可能尚未完成，但有潜力在将来某个时刻完成或者失败。Promise对象提供了更优的异步编程模式，相比于传统的回调函数，它能...
浅谈JavaScript中promise的使用
10-20
在JavaScript中，Promise是一个重要的特性，被引入来解决异步编程中的回调地狱问题。Promise对象代表着一个异步操作，它可以有三种状态：pending（进行中）、fulfilled（已完成，也称为Resolved）和rejected（已失败...
举例详解JavaScript中Promise的使用
10-24
在现代前端开发中，JavaScript的Promise已经成为处理异步操作的主流技术。Promise提供了一种简洁的API，以优雅的方式解决了异步编程中常见的“回调地狱”问题。Promise代表一个异步操作的最终完成（或失败）及其结果...
js之promise
qq_43401689的博客
05-30 67
1promise 手撕还是有点困难 先掌握它的方法， 在记得它的规范， 从规范出发手xPromise 1 then promise const promise2 = new Promise((resolve, reject) => { setTimeout(()=>{ console.log(1) resolve(3) console.log(2) }) }) promise2.then((res) => { conso
JavaScript之Promise
maxiaotengzhang的博客
06-02 759
什么是Promise? 一个 Promise 对象代表一个目前还不可用，但是在未来的某个时间点可以被解析的值。Promise表示一个异步操作的最终结果。 原生js promise 有兼容性问题。 jQuery1.5.0之后 封装的 deferred对象 （defer的意思是"延迟"）。简单说，deferred对象就是jQuery的回调函数解决方案。兼容所有主流浏览器。推荐大家了解一下JQquery的deffered对象详解。 ES6 Promise 对象，通过babel转码，也是可以兼容主流浏览器。
js的promise用法
weixin_44992737的博客
07-29 6397
js的promise
JavaScript——Promise
Corn___的博客
09-29 1765
JavaScript——Promise
JavaScript中Promise的使用详解与实现方式
JavaScript编程中的Promise使用大全 JavaScript中的Promise使用详解是JavaScript进阶学习中的重要知识点。Promise对象是一个有then方法，且该方法能触发特定行为的对象或函数。 Promise的核心内容是then方法，而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值