社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 深入浅析Nodejs异步编程中的Promise

深入浅析Nodejs异步编程中的Promise

青灯夜游
发布： 2021-07-09 10:09:19
转载
1755 人浏览过

本篇文章带大家了解一下Nodejs异步编程中的Promise，介绍一下Promise比callback优秀在哪里。

深入浅析Nodejs异步编程中的Promise

【推荐学习：《nodejs 教程》】

什么是 Promise

Promise 是一种异步编程的解决方案！

  • 当前事件循环得不到的结果，但未来的事件循环会给到你结果
  • 是一个状态机
    • pengding
    • resolved
    • reejectd

从代码看状态流转是怎样的

pending 到 resolve 的流转测试

(function () {
  const res = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, 500);
  });
  console.log("500ms", res);

  setTimeout(() => {
    console.log("800ms", res);
  }, 800);
})();
登录后复制

打印出如下内容

1.png

结果是符合我们的预期的

  • 我们无法立即获取promise的结果，此时promise处于pending状态
  • 必须等待一段时间过后才能获取promise的结果，此时promise处于fulfilled状态

pending 到 reject 的流转测试

(function () {
  const res = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error("error"));
    }, 500);
  });
  console.log("500ms", res);

  setTimeout(() => {
    console.log("800ms", res);
  }, 800);
})();
登录后复制

打印出如下内容

2.png

结果是符合我们的预期的

  • 我们无法立即获取promise的结果，此时promise处于pending状态
  • 必须等待一段时间过后才能获取promise的结果，此时promise处于reject状态

注意:如果当 pengding 状态进入到 reject 状态，这个错误又没有正确捕获的话，这个错误就会被抛到 JS 的全局

reslove 状态流转到 reject 状态测试

(function () {
  const res = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, 300);
    setTimeout(() => {
      reject(new Error("error"));
    }, 500);
  });
  console.log("500ms", res);

  setTimeout(() => {
    console.log("800ms", res);
  }, 800);
})();
登录后复制

打印出如下内容

3.png

可以发现！

在 300ms 的时候promise的状态已经切换到了resolve， 切换后永远也无法到达reject状态

  • pending 只能流转到 resolve 或者 reject;
  • resolve 和 reject 不能互相流转;

使用 then,catch 捕获 promise 的结果

(function () {
  const res = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(3);
    }, 300);
  })
    .then((result) => {
      console.log("result", result);
    })
    .catch((error) => {
      console.log("error", error);
    });

  console.log("300ms", res);

  setTimeout(() => {
    console.log("800ms", res);
  }, 800);
})();
登录后复制

打印出如下内容

4.png

可以发现

  • then 是 promise 的状态流转到 reslove 状态可以拿到的结果
(function () {
  const res = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error("error-3"));
    }, 300);
  })
    .then((result) => {
      console.log("result", result);
    })
    .catch((error) => {
      console.log("error", error);
    });

  console.log("300ms", res);

  setTimeout(() => {
    console.log("800ms", res);
  }, 800);
})();
登录后复制

打印出如下内容

5.png

可以发现

catch 是 promise 的状态流转到 reject 状态可以拿到的结果, 并且之前全局的 JS 错误已经可以被 catch 捕获到了

.then .catch 总结

  • resolved 状态的 Promise 会回调后面的第一个 .then
  • rejected 状态的 Promise 会回调后面的第一个 .catch
  • 任何一个 rejected 状态切后面没有 .catch 的 Promise 会造成 Js 环境的全局错误

Promise 相比 callback 优秀的地方

解决异步流程控制问题-回调地狱

我们继续之前面试的例子

使用 Promise 改造 之前的 interview 函数

function interview() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      if (Math.random() > 0.4) {
        // resolve, reject 只能接受一个参数
        resolve("success");
      } else {
        reject(new Error("fail"));
      }
    }, 1000);
  });
}

(function () {
  const res = interview();
  res
    .then((result) => {
      console.log("面试成功！我笑了");
    })
    .catch((error) => {
      console.log("面试失败！我哭了");
    });
})();
登录后复制

.then 中抛出错误的情况测试

function interview() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      if (Math.random() > 0.4) {
        // resolve, reject 只能接受一个参数
        resolve("success");
      } else {
        reject(new Error("fail"));
      }
    }, 500);
  });
}

(function () {
  const promsie1 = interview();

  const promsie2 = promsie1.then((result) => {
    throw new Error("面试成功！我笑了,但是我拒绝了");
  });

  setTimeout(() => {
    console.log("promsie1", promsie1);
    console.log("promsie2", promsie2);
  }, 800);
})();
登录后复制

6.png

以上代码可以看出 ，**.then返回一个全新的 Promise, 此 Promise 的结果状态是由 .then 的回调函数的结果来决定的

  • 如果回调函数最终是throw, 则进入 rejected
  • 如果回调函数最终是return,则进入 resolved

.catch 中正常值的情况测试

function interview() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      if (Math.random() > 0) {
        // resolve, reject 只能接受一个参数
        resolve("success");
      } else {
        reject(new Error("fail"));
      }
    }, 500);
  });
}

(function () {
  const promsie1 = interview();

  const promsie2 = promsie1.catch((result) => {
    return "虽然面试失败，但我还是笑了";
  });

  setTimeout(() => {
    console.log("promsie1", promsie1);
    console.log("promsie2", promsie2);
  }, 800);
})();
登录后复制

7.png

.catch 返回一个全新的 Promise, 此 Promise 的结果状态是由 .catch 的回调函数的结果来决定的

  • 如果回调函数最终是throw, 则进入 rejected
  • 如果回调函数最终是return,则进入 resolved

.catch,.then 里面再返回 Promise

function interview() {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      if (Math.random() > 0.4) {
        // resolve, reject 只能接受一个参数
        resolve("success");
      } else {
        reject(new Error("fail"));
      }
    }, 500);
  });
}

(function () {
  const promsie1 = interview();

  const promsie2 = promsie1
    .then((result) => {
      return new Promise(function (resolve, reject) {
        setTimeout(() => {
          resolve("面试成功！，给我400ms 总结一下");
        }, 400);
      });
    })
    .catch((result) => {
      return new Promise(function (resolve, reject) {
        setTimeout(() => {
          resolve("面试失败，给我400ms 总结一下");
        }, 400);
      });
    });

  setTimeout(() => {
    console.log("800ms promsie1", promsie1);
    console.log("800ms promsie2", promsie2);
  }, 800);

  setTimeout(() => {
    console.log("1000ms promsie1", promsie1);
    console.log("1000ms promsie2", promsie2);
  }, 1000);
})();
登录后复制

8.png

如果在 .catch,.then 中 返回 Promise, 则会等待此 Promise 的执行结果

如果回调函数最终 return 了 Promise,该 promise 和回调函数的 return 的 Promsie 状态保持一致， 这就表示了可以 在 Promise 的链式调用里面串行的执行多个异步任务！

Promise 实现多轮面试-串行

// round 面试第几轮
function interview(round) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      if (Math.random() > 0.4) {
        // resolve, reject 只能接受一个参数
        resolve("success");
      } else {
        const error = new Error("fail");
        reject({ round, error });
      }
    }, 500);
  });
}

(function () {
  interview(1)
    .then(() => {
      return interview(2);
    })
    .then(() => {
      return interview(3);
    })
    .then(() => {
      console.log("每轮面试都成功！我开心的笑了");
    })
    .catch((err) => {
      console.log(`第${err.round}轮面试失败了`);
    });
})();
登录后复制

Promise 的 .then .catch 把回调地狱变成了一段线性的代码！

Promise 实现多加公司面试-并行

// round 面试第几轮
function interview(name) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      if (Math.random() > 0.4) {
        // resolve, reject 只能接受一个参数
        resolve("success");
      } else {
        const error = new Error("fail");
        reject({ name, error });
      }
    }, 500);
  });
}

(function () {
  Promise.all([interview("tenxun"), interview("ali"), interview("baidu")])
    .then(() => {
      console.log("每家公司都面试成功了");
    })
    .catch((err) => {
      console.log(`面试${err.name}失败了`);
    });
})();
登录后复制

更多编程相关知识，请访问：编程视频！！

以上是深入浅析Nodejs异步编程中的Promise的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
nodejs promise 异步编程
来源：juejin.cn
上一篇：深入了解JavaScript中的Object（对象） 下一篇：js怎么获取css属性值
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
Docker中使用NodeJS连接MySQL时出现错误 我创建了一个连接到MySQL的NodeJS后端服务器。通过使用Docker，我使用以下命令创建了一个映像来运行我的nodeJS和package.json文件（其中包括MySQL）。...
来自于 2024-04-06 12:07:19
0
1
415
React/Node：使用 Trial_period_days 进行订阅时遇到集成错误 我在Stripe中定义了一个产品，我希望将其设置为7天免费试用，然后向客户收费（除非他们事先取消）通过Firebase使用自定义Nodejs函数-我收到以下错误：Missingva...
来自于 2024-04-04 20:30:57
0
1
320
next 在使用 Nodejs 的中间件中无法正常工作 我正在使用Nodejs并使用expressjs，现在我正在研究中间件功能，我想知道中间件概念中的“下一个”工作是什么？“下一个进入下一个中间件”，但是什么是“下一个中间件”？我尝试...
来自于 2024-04-04 17:33:56
0
1
340
一个简单的Hello world程序创建多个节点实例 我对Javascript和NodeJS非常陌生。我正在运行一个简单的helloworld程序，如下方案1constdurationInSeconds=10;console.log(...
来自于 2024-04-04 11:03:22
0
1
310
SQL 查询未显示在 Node.js 的特定路由中 我是javascript和nodejs新手，我有一个问题我有一个代码，我正在一个简单的API中工作，但我很难理解为什么会发生这种情况app.get('/api/list_all',...
来自于 2024-04-04 00:24:22
0
1
344
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板