ES6-Promise的简单使用

promise的使用

promise分为三个状态:

• 等待状态 pending（也可以说异步正在进行中）
• 完成状态 fulfilled
• 失败状态 rejected

new Promise( (resolve, reject) => {
   setTImeout( _ => resolve('ok'), 3000 )
} )
.then( res => console.log(res) )
.catch( err =>console.log(err) )

上面这段代码模拟了一个延迟为3秒的网络请求, 3秒过后会将请求返回的数据打印在控制台(如下图)。

图片点击放大

在上面代码中,我们看到了控制台自动输出了

image.png

代表现在为promise的等待状态

然后我们还在代码中看到了几个关键字:

• resolve: 声明promise为成功状态
• reject: 声明promise为失败状态
• then: 接收promise为成功时的回调函数, res参数就是resolve()中返回的数据
• catch: 接收promise为失败时的回调函数, err参数是reject()中返回的数据

下面演示一个失败的场景

image.png

在then函数里还可以将结果return出来然后再次链式调用then来获取结果

image.png

image.png

好处: 可以实现按照一定顺序来进行异步操作,改善回调地狱
坏处: 过多的then也不太美观

总结: 在new Promise()中传入一个异步操作, 根据返回结果判断要走成功还是失败, then中自定义的成功函数, catch中则是处理异常与错误的函数

primise不止这里所说的这几个API, 例如PromiseAll()可以并发请求一组资源等, 这里就不多做描述