点击“前端自学社区”查看更多精彩
本章学习ES6提供解决异步的一种方法，Promise对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
本章目录
√Promise定义;
√基本用法;
√不同状态执行不同业务逻辑;
√Promise 实例相互依赖，如何执行;
√Promise 实例 互相依赖,如何执行;
√Promise.prototype.then();
√Promise.prototype.catch() ;
√捕捉错误写法;
√Promise.prototype.finally();
Promise定义
Promise 是异步编程的一种解决方案，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
//Promise对象有以下两个特点。
（1）对象的状态不受外界影响。
Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
(2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。只有两种情况
1. 从pending（进行中） 变为fulfilled（已成功）
2.从pending （进行中） 变为rejected （已失败）
// Promise 缺点
Promise一旦创建就会立刻执行，无法中途取消。
体验Promise
点击按钮 改变boo 值， 执行不同的状态 reselve 成功或者 reject 失败
基本用法
基本格式：
var boo = false
// 创建 Promise, 需要传递一个函数，函数有两个参数：reselve 成功状态， reject 失败状态
// 不同状态执行不同事情
let promise = new Promise( (reselove , reject) => {
if (boo == false ) {
return reject()
} else {
return reselove()
}
})
promise.then( success => {
console.log('成功状态')
}, err => {
console.log('失败状态')
})
//一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句，这样就不会有意外。
----------------------------------------------------------------------------------------------
不同状态执行不同业务逻辑
<script>
var btn = document.getElementById('btn')
var boo = false
var data = {
name: '张三',
age: 22
}
btn.onclick = () => {
new Promise((reselve, reject) => {
// 模拟 通过 boolean 值来判断 该状态为 成功 or 失败
if (boo == false) {
// boo = fasle ，那么它就执行 reject 函数， 参数为要传递的数据
return reject(data)
} else {
return reselve(data)
}
// Promise 只要创建成功，那么它就会执行， 状态为初始 状态， 想通过不同状态执行相应业务
// 就需要通过 then 来执行
// 第一个 then 为 成功的状态，也就是 reselve 状态
}).then( success => {
console.log(`成功：promise 状态为 reselve， 数据为： ${JSON.stringify(success)} + `)
// 为了验证不同状态执行不同事情， 将boo 取反
boo = false
}).catch( err => {
console.log(`失败 ：promise 状态为 reject `)
boo = true
})
}
</script>
Promise 实例 互相依赖,如何执行
// Promise 实例 互相依赖
// 如果Promise2 依赖 Promise1 ， 就得 依据 Promise1 的状态来执行 Promise 的状态
// 如果Promise1 的状态为 reject， 那么 Promise2 的状态则就会执行 reject 的状态
let promise1 = new Promise( (reselve, reject) => {
reject()
})
let promise2 = new Promise( (reselve, reject) => {
// console.log(reselve(promise1))
if (reselve) {
return reselve(promise1)
} else {
return reject(promise1)
}
}).then(success => {
console.log('成功状态-------promise')
}).catch( err => {
console.log('失败状态')
})
Promise.prototype.then()
//Promise 实例具有then方法，它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。
//第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。
var data = {
name: '张三',
age: 22
}
new Promise( (reselve , reject ) => {
return reselve(data)
}).then(data => {
console.log(data)
// { name: '张三', age: 22 }
},err => {
console.log(err)
})
Promise.prototype.catch()
//Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。
// 何时采用 catch
当 Promise 的 reselve 为 null 或者 undefined 时，采用。
const promise = new Promise(function(resolve, reject) {
reject(new Error('test'));
});
promise.catch(function(error) {
console.log(error);
});
#注意
//如果Promise 的状态为 reselved ，然后在 reselve 后面在抛出 错误则是 捕捉不到的，因为 Promise 的状态一旦创建则不能修改
const promise = new Promise(function(resolve, reject) {
resolve('ok');
throw new Error('test');
});
promise
.then(function(value) { console.log(value) })
.catch(function(error) { console.log(error) });
// ok
捕捉错误写法
优先采用 catch写法
# 因为 第一种写法可以捕获前面then方法执行中的错误，也更接近同步的写法（try/catch），Promise 对象抛出的错误可以传递到外层代码，
promise
.then(function(data) { //cb
// success
})
.catch(function(err) {
// error
});
不要采用
promise
.then(function(data) {
// success
}, function(err) {
// error
});
//一般总是建议，Promise 对象后面要跟catch方法，这样可以处理 Promise 内部发生的错误。catch方法返回的还是一个 Promise 对象，因此后面还可以接着调用then方法。
Promise.prototype.finally()
//finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。
基本格式：
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
# 注意：
finally方法的回调函数不接受任何参数，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。
往期精彩回顾
ES6_01_变量和常量的使用 更多精彩内容 尽在公众号中