玩儿玩儿ES6—第四期

一、背景

关于JS常用的内容咱们已经说了三期。主要说了三块内容：变量定义、箭头函数、模块化。这一期咱们谈谈关于js中非常重要的一块Promise的使用。

二、核心内容

4 Promise—js异步那些事

要说promise，我们首先需要说说JS中“同步”和“异步”的事。

关于同步异步，概念如下：

同步编程，即是一种典型的请求响应模型，当请求调用一个函数或者方法之后，需要等待其响应的返回结果，然后才可以继续执行代码.异步,即是一种事件驱动编程。

异步编程，即是一种事件驱动，当请求调用一个函数或者方法之后，不再需要等待其响应的返回结果，并继续执行代码，知道该方法或者函数响应返回的时候，通过状态或者通知或者回调来通知调用者。

其实更简单的说：同步是会顺序执行，一旦出问题就会卡住。比如原始form表单提交数据。如果没有返回整个页面都加载不出来。而异步呢是分道走，出问题也不影响全局运行。比如ajax请求，异步加载，异步请求。不影响页面刷新。

回归咱们的主题，promise是干什么的呢？其实promise就是一个异步的工具。帮助我们更好的协调异步的事。

① 定义一个promise

// 方法1

let promise = new Promise ( (resolve, reject) => {

if ( success ) {

resolve(a) // pending ——> resolved 参数将传递给对应的回调方法

} else {

reject(err) // pending ——> rejectd

}

} )

// 方法2

function promise () {

return new Promise ( function (resolve, reject) {

if ( success ) {

resolve(a)

} else {

reject(err)

}

} )

}

注意：实例化的Promise对象会立即执行

看个简单的例子：

上面例子中我们使用方法2的办法new出了promise对象。然后再使用promise的then方法运行它。运行成功走then方法第一个参数，运行失败走then方法第二个参数。所以我们可以看出Promise方法的参数都是函数（传说中的回调函数）。谈到这里就要重点说说then方法了。

then方法是Promise原型链上的方法，同时并存的还有catch方法。

② then方法原型如下：

promise.then( () => { console.log('this is success callback') }, () => { console.log('this is fail callback') })

then方法参数是两个回调函数，第一个参数是是then方法成功执行执行的方法。第二个参数是then方法执行失败执行的方法。

③ catch方法是处理promise调用异常的方法

它作用是捕获Promise的错误，与then()的rejected回调作用几乎一致。但是由于Promise的抛错具有冒泡性质，能够不断传递，这样就能够在下一个catch()中统一处理这些错误。同时catch()也能够捕获then()中抛出的错误，所以建议不要使用then()的rejected回调，而是统一使用catch()来处理错误。

④ Promise对象的一个重要特性就是可以链式调用，原型如下：

promise.then(

() => { console.log('this is success callback') }

).catch(

(err) => { console.log(err) }

).then(

...

).catch(

...

)

看下面的例子：

例子中promise链式调用了两遍。要注意各个调用之间如何传参数。

理论上promise是可以一直嵌套下去的，具体怎么使用就各凭本事啦。

⑤ promise封装ajax请求。

如果看上面的代码promise其实用处不大。它最大的好处就是可以封装ajax请求。而且对于多个ajax请求可以链式调用，传递参数也很方便。看下面例子：

三、总结

关于promise对象的日常用法就分享到这里。更多promise对象的知识就靠大家自己学习啦。

原创不易，只求一关注，谢谢大家。

关注万岁！！