ThinkSSL🔒 一键申购 5分钟快速签发 30天无理由退款 购买更放心 广告
[TOC] * * * * * > 异步执行代码的一种解决方案 ![](https://box.kancloud.cn/9b03684f98cc75bb874b69f830bd99bb_512x280.png) ### 1.Promise实例的几种状态: ~~~ 1. pending: 初始状态,既不是成功,也不是失败状态。 2. fulfilled: 意味着操作成功完成。 3. rejected: 意味着操作失败。 ~~~ * * * * * ### 2. 最常用的实现 ~~~ var pro0=new Promise(function(resolve, reject) { console.log('开始定义 pro0'); var pro1=new Promise(function(resolve, reject) { console.log('开始定义 pro1'); resolve(1); }); setTimeout(function() { console.log('setTimeout回调函数执行'); resolve(0); }, 2000); //resolve(2); /* 假如这里有个 resolve(2),那么 pro0 的状态就会被改变, 且改变之后不会再变,那么 setTimeout 里的 resolve 就不再起作用了 */ pro1.then(function(value) { console.log('pro1 fulfilled',value); }); }); pro0.then(function(value) { console.log('pro0 fulfilled',value); }); pro0.catch(function(e) { console.log('pro0 rejected',e); }); console.log('代码定义end'); ~~~ a. 正常执行: ![](https://box.kancloud.cn/d1607487474ced2026a343807cb86dff_256x215.png) b. 提前变状态: ![](https://box.kancloud.cn/460d19a1cf9df782574c8fcf5aec6959_253x211.png) * * * * * ### 3. 链式调用 ~~~ Promise.prototype.then 和 Promise.prototype.catch 方法 返回 Promise 对象, 所以它们可以被链式调用。 ~~~ ![](https://box.kancloud.cn/d15312e3e5d609c80b2de1cca2826f49_801x297.png) ~~~ 这里是模拟了链式调用,用同步代码,真实情况中应该是异步代码 job1.then(job2).then(job3).catch(handleError); 其中,job1、job2和job3都是Promise对象。 function job0(input) { return new Promise(function(resolve, reject) { let result=input+1; console.log('值+1:',result); resolve(result); }) } function job1(input) { return new Promise(function(resolve, reject) { let result=input*2; console.log('值*2:',result); resolve(result); }) } function job2(input) { return new Promise(function(resolve, reject) { let result=input*input; console.log('值的平方:',result); resolve(result); }) } function done(input) { console.log('原始值:',input); job0(input) .then(job1) .then(job2); } ~~~ 执行结果为: ![](https://box.kancloud.cn/c4bd8c4286a676f1b7803e153ef5c810_169x153.png)