文章目录
前言
通俗理解，原生JS 提供 Promise 构造函数，通过 Promise 实例化的对象（ 以下简称 Promise对象 ） 相当于一个容器，里头封装了异步操作及其结果，可以通过调用 Promise对象的 then 方法来进一步处理异步操作的结果
一、基本用法
- 定义一个 Promise 对象，该对象有三个状态，pending （进行中）、resolved （成功）和 rejected （失败），下面 第 3 点 会讲到该对象的状态在什么情况下会改变
let p = new Promise()
- Promise 构造函数需要传入实参，实参是一个 回调函数，回调函数有两个参数，第一个是 resolve, 第二个是 reject，这两个参数由 JS 引擎提供，可以直接使用
let p = new Promise(function(resolve , reject){
})
- 在回调函数内部 封装异步操作，在此异步操作用 延时定时器 示例。在延时定义器的回调函数中需要使用 resolve 和 reject 这两个函数。resolve 的作用是，在异步操作成功时调用，调用 resolve 会把 Promise 对象的状态从 pending 变成 resolved ，同时需要将 异步操作的执行结果 作为参数传给 resolve；而 reject 恰好相反，在 异步操作失败后 调用，调用 reject 会把 Promise 对象的状态从 pending 变成 rejected，同时需要将 异步操作报出的错误 作为参数传给 reject；resolve 和 reject 的参数会被 Promise 对象传递出去
let p = new Promise(function(resolve , reject){
//封装异步操作
setTimeout(() => {
//成功时
let data = '数据库中的用户数据'
//调用resolve
resolve(data)
//失败时
let err = '数据传输失败'
//调用reject
reject(err)
},1000)
})
- 调用 Promise 对象的 then 方法，传入两个参数（可选），第一个是 Promise 对象 状态为 resolved 时的 回调函数，第二个是 Promise 对象 状态为 rejected 时的 回调函数；这两个回调函数各有一个参数，value 和 reason （形参名字可以自定义），该参数是 Promise 对象传出的参数（也就是第 3 点中 resolve 和 reject 的参数），在回调函数中可以处理 value 和 reason
p.then(function(value){
console.log(value)
} , function(reason){
console.log(reason)
})
二、Promise.prototype.then
then 方法是 Promise 构造函数原型对象中的方法，它的特点如下：
调用 then 方法，then 方法的返回值是一个 Promise 对象（注意：不是调用 then 方法的那个 Promise 实例），以下简称 P2，这个对象的状态由 then 的参数，也就是回调函数的执行结果来决定，分成三种情况
- 如果回调函数的返回值是 非 Promise 类型的数据， 则 P2 状态为 resolved，并将该返回值作为参数传递出去
let p2 = p.then(value => {
return 123
})
console.log(p2)
//打印结果
Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled" //resolved状态
[[PromiseResult]]: 123
上面代码表示 Promise 对象调用 then 方法后，传入异步操作成功后的回调函数，在回调函数内返回一个非 Promise 类型的值，那么，打印 then 方法的返回值会发现 P2 的状态显示为 fullfilled，回调函数的返回值123被传递出去
- 如果回调函数的返回值是 Promise 对象， 则 P2 状态和该Promise 对象 同步，也就是说，该 Promise 对象是 resolved 状态，P2就是 resolved 状态，反之亦然，并将 resolve/reject 函数的参数传递出去
let p2 = p.then(value => {
return new Promise((resolve , reject) => {
setTimeout(() => {
let data = '商品数据'
resolve(data)
} ,1000)
})
})
//prints:
Promise {<pending>}
__proto__:
Promise[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "商品数据"
上面代码中，返回一个 Promise 对象，异步操作内调用 resolve 函数，把该 Promise 对象的状态变成 resolved (fullfilled)，resolve函数的参数 data 传递出去，P2的状态也变成 resolved，这时，调用 P2的 then 方法，可以处理传递出去的参数 data
let p2 = p.then(value => {
return new Promise((resolve , reject) => {
setTimeout(() => {
let data = '商品数据'
resolve(data)
} ,1000)
})
}).then(value => {
console.log(value) //商品数据
})
上面代码中，再次调用 then 方法的方式属于 链式调用，value的输出值就是 data，即商品数据
三、Promise.prototype.catch
catch 方法用于指定发生错误时的回调函数
let p = new Promise ((resolve , reject) => {
reject('出错啦！')
})
p.catch((reason) => {
console.log(reason)//出错啦！
})
上面代码中，p 的状态为 rejected，可以调用 then 方法 或 catch 方法，catch 方法的用法和 then 方法类似，不同的是 catch 方法只需要传入一个回调函数
总结
通过 Promise 处理异步操作，then 方法的链式调用可以解决回调地狱的问题