Promise

最新推荐文章于 2024-10-09 11:19:11 发布

码上工作

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量109

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_62406230/article/details/131047681

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在 Promise 中的代码运行需要一些时间，不能立刻返回结果。例如异步请求，通过网络加载数据等，并且 Promise 代码一旦完成，需要这个 Promise 返回结果的地方，将会第一时间得到返回的结果。

const promise = new Promise((resolve,reject)=>{
    resolve(value)
    //reject(error)
})

当 new Promise 被创建，该箭头函数会自动触发，参数 resolve 和 reject 是由 JavaScript 自身提供的回调。如果成功则调用 resolve，如果出现 error 则调用 reject

promise 的状态：

executor 只能调用一个 resolve 或一个 reject。任何状态的更改都是最终的。

所以再次调用 resolve 和 reject 的调用都会被忽略。

Promise 对象的 state 和 result 属性都是内部的。我们无法直接访问它们。但我们可以对它们使用 .then/.catch/.finally 方法。

.then 方法

拥有两个回调函数，分别访问 promise 中的 result 和错误捕捉 error 的值，

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("done!"), 1000);
});

// resolve 运行 .then 中的第一个函数
promise.then(
  result => alert(result), // 1 秒后显示 "done!"
  error => alert(error) // 不运行
);

.catch 方法

访问错误捕捉 error 的值

let promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error("Whoops!")), 1000);
});

// .catch(f) 与 promise.then(null, f) 一样
promise.catch(err=>alert(err)); // 1 秒后显示 "Error: Whoops!"

.finally 方法

无论 promise 被 resolve 还是 reject。finally 方法都会在状态改变的时候执行。

finally 的功能是设置一个处理程序在前面的操作完成后，执行清理/终结。

new Promise((resolve, reject) => {
  /* 做一些需要时间的事，之后调用可能会 resolve 也可能会 reject */
})
  // 在 promise 为 状态改变 时运行，无论成功与否
  .finally(() => stop loading indicator)
  // 所以，加载指示器（loading indicator）始终会在我们继续之前停止
  .then(result => show result, err => show error)

Promise 的链式调用

new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000); // (*)

}).then(function(result) { // (**)

  alert(result); // 在1秒后弹出 result
  return result * 2; // 将运算结果 返回 promise 的 result

}).then(function(result) { // (***) 访问 promise 的 result

  alert(result); // 2 立即弹出
  return result * 2; // 将运算结果 返回 promise 的 result

}).then(function(result) {  //访问 promise 的 result

  alert(result); // 4 立即弹出
  return result * 2;  // 将运算结果 返回 promise 的 result

});

让每一个弹出都等待 1 秒钟

new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000);

}).then(function(result) {

  alert(result); // 1

  return new Promise((resolve, reject) => { // (*)
    setTimeout(() => resolve(result * 2), 1000);
  });

}).then(function(result) { // (**)

  alert(result); // 2

  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(result * 2), 1000);
  });

}).then(function(result) {

  alert(result); // 4

});

使用 promise 进行错误

.catch 处理 promise 中的各种 error：在 reject() 调用中的，或者在处理程序中抛出的 error。

如果给定 .then 的第二个参数（即 error 处理程序），那么 .then 也会以相同的方式捕获 error。