通俗理解,原生JS 提供 Promise 构造函数,通过 Promise 实例化的对象( 以下简称 Promise对象 ) 相当于一个容器,里头封装了异步操作及其结果,可以通过调用 Promise对象的 then 方法来进一步处理异步操作的结果
let p = new Promise()
let p = new Promise(function(resolve , reject){ })
let p = new Promise(function(resolve , reject){ //封装异步操作 setTimeout(() => { //成功时 let data = '数据库中的用户数据' //调用resolve resolve(data) //失败时 let err = '数据传输失败' //调用reject reject(err) },1000) })
p.then(function(value){ console.log(value) } , function(reason){ console.log(reason) })
then 方法是 Promise 构造函数原型对象中的方法,它的特点如下:
调用 then 方法,then 方法的返回值是一个 Promise 对象(注意:不是调用 then 方法的那个 Promise 实例),以下简称 P2,这个对象的状态由 then 的参数,也就是回调函数的执行结果来决定,分成三种情况
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被传递出去
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,即商品数据
catch 方法用于指定发生错误时的回调函数
let p = new Promise ((resolve , reject) => { reject('出错啦!') }) p.catch((reason) => { console.log(reason)//出错啦! })
上面代码中,p 的状态为 rejected,可以调用 then 方法 或 catch 方法,catch 方法的用法和 then 方法类似,不同的是 catch 方法只需要传入一个回调函数
通过 Promise 处理异步操作,then 方法的链式调用可以解决回调地狱的问题