乐趣区

关于javascript:这-10-个事例有助于你理解-ES-中的-Promise

jiezi

作者：Jay Chow
译者：前端小智
起源：jamesknelson

点赞再看 ，微信搜寻【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。**

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588…

在开发中，理解 JavaScript 和 Promise 根底，有助于进步咱们的编码技能，明天，咱们一起来看看上面的 10 片段，置信看完这 10 个片段有助于咱们对 Promise 的了解。

片段 1：

const prom = new Promise((res, rej) => {console.log('first');
  res();
  console.log('second');
});
prom.then(() => {console.log('third');
});
console.log('fourth');

// first
// second
// fourth
// third

Promise同步执行，promise.then异步执行。

片段 2：

const prom = new Promise((res, rej) => {setTimeout(() => {res('success');
  }, 1000);
});
const prom2 = prom.then(() => {throw new Error('error');
});

console.log('prom', prom);
console.log('prom2', prom2);

setTimeout(() => {console.log('prom', prom);
  console.log('prom2', prom2);
}, 2000);

// prom 
// Promise {<pending>}
// __proto__: Promise
// [[PromiseStatus]]: "resolved"
// [[PromiseValue]]: "success"

// 2 秒后还会在打一遍下面的两个

promise 有三种不同的状态：

  • pending
  • fulfilled
  • rejected

一旦状态更新，pending->fulfilled 或 pending->rejected，就能够再次更改它。prom1 与prom2不同，并且两者都返回新的 Promise 状态。

片段 3：

const prom = new Promise((res, rej) => {res('1');
  rej('error');
  res('2');
});

prom
  .then(res => {console.log('then:', res);
  })
  .catch(err => {console.log('catch:', err);
  });

// then: 1

即便 reject 后有一个 resolve 调用，也只能执行一次 resolve 或reject , 剩下的不会执行。

片段 4：

Promise.resolve(1)
  .then(res => {console.log(res);
    return 2;
  })
  .catch(err => {return 3;})
  .then(res => {console.log(res);
  });

// 1
// 2

Promises 能够链接调用，当提到链接调用 时，咱们通常会思考要返回 this，但 Promises 不必。每次 promise 调用 .then 或.catch时，默认都会返回一个新的 promise，从而实现链接调用。

片段 5：

const promise = new Promise((resolve, reject) => {setTimeout(() => {console.log('first')
    resolve('second')
  }, 1000)
})

const start = Date.now()
promise.then((res) => {console.log(res, Date.now() - start, "third")
})
promise.then((res) => {console.log(res, Date.now() - start, "fourth")
})

// first
// second 1054 third
// second 1054 fourth

promise 的 .then或 .catch 能够被屡次调用，然而此处 Promise 构造函数仅执行一次。换句话说，一旦 promise 的外部状态发生变化并取得了一个值，则随后对 .then 或.catch的每次调用都将间接获取该值。

片段 6：

const promise = Promise.resolve()
  .then(() => {return promise})
promise.catch(promise)

// [TypeError: Chaining cycle detected for promise #<Promise>]
// Uncaught SyntaxError: Identifier 'promise' has already been declared
//    at <anonymous>:1:1
// (anonymous) @ VM218:1

.then或 .catch 返回的值不能是 promise 自身，否则将导致有限循环。

大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。

我和阿里云单干服务器，折扣价比拟便宜：89/ 年，223/ 3 年，比学生 9.9 每月还便宜，买了搭建个我的项目，相熟技术栈比拟香（老用户用家人账号买就好了，我用我妈的)举荐买三年的划算点，点击本条就能够查看。

片段 7：

Promise.resolve()
  .then(() => {return new Error('error');
  })
  .then(res => {console.log('then:', res);
  })
  .catch(err => {console.log('catch:', err);
  });

// then: Error: error!
// at Promise.resolve.then (...)
// at ...

在 .then 或.catch中返回谬误对象不会引发谬误，因而后续的 .catch 不会捕捉该谬误对象，须要更改为以下对象之一：

return Promise.reject(new Error('error')) throw new Error('error')

因为返回任何非 promise 值都将包装到一个 Promise 对象中，也就是说，返回 new Error('error') 等同于返回Promise.resolve(new Error('error'))。

片段 8：

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

  // 1

.then或 .catch 的参数应为函数，而传递非函数将导致值的后果被疏忽，例如 .then(2) 或.then(Promise.resolve(3)。

片段 9：

Promise.resolve()
  .then(function success(res) {throw new Error('Error after success');
    },
    function fail1(e) {console.error('fail1:', e);
    }
  )
  .catch(function fail2(e) {console.error('fail2:', e);
  });

//   fail2:  Error: Error after success
//     at success (<anonymous>:4:13)

.then能够承受两个参数，第一个是解决胜利的函数，第二个是处理错误的函数。.catch是编写 .then 的第二个参数的便捷办法，然而在应用中要留神一点：.then第二个谬误处理函数无奈捕捉第一个胜利函数和后续函数抛出的谬误。.catch 捕捉先前的谬误。当然，如果要重写，上面的代码能够起作用：

Promise.resolve()
  .then(function success1 (res) {throw new Error('success1 error')
  }, function fail1 (e) {console.error('fail1:', e)
  })
  .then(function success2 (res) {}, function fail2 (e) {console.error('fail2:', e)
  })

片段 10：

process.nextTick(() => {console.log('1')
})
Promise.resolve()
  .then(() => {console.log('2')
  })
setImmediate(() => {console.log('3')
})
console.log('4');

// Print 4
// Print 1
// Print 2
// Print 3

process.nextTick和 promise.then 都属于微工作，而 setImmediate 属于宏工作，它在事件循环的查看阶段执行。在事件循环的每个阶段（宏工作）之间执行微工作，并且事件循环的开始执行一次。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：http://jamesknelson.com/grokk…

交换

干货系列文章汇总如下，感觉不错点个 Star，欢送 加群 互相学习。

https://github.com/qq44924588…

我是小智，公众号「大迁世界」作者，对前端技术放弃学习爱好者。我会常常分享本人所学所看的干货，在进阶的路上，共勉！

关注公众号，后盾回复 福利，即可看到福利，你懂的。

退出移动版