Promise

在 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。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值