1. 1. promise 的流程
  2. 2. promise

promise 的流程

基本的构造是这样: new Promise().then().catch()

new Promise( function(resolve, reject) {
// 执行异步操作
// 对异步进行判断,如果是成功则执行 resolve( resolveData )
// 如果失败,则执行 reject( rejectData )
// 其中 resolve 和 reject 是关键词,或者说大家已经达成共识的保留词
} )

如果执行了 resolve 函数,则 then 会执行,
then(function(data) {
// 处理 data,这个 data 就是上面的 resolveData
})
如果执行 reject 函数,则 catch 会执行,
catch(function(e) {
// 处理 e,而 e 则是上面的 rejectData
})

和普通回调函数相比, promise 只是将逻辑从回调转成了外部调用,使代码逻辑更加简洁了吗?这个我不太清粗。但是要注意的是,和普通回调相比,我们需要改造的就是回调部分,或者说异步执行的部分,这部分函数内部一定会执行 resolve() 或者 reject(),只是将回调函数放到了 then() 里而已了。
举例俩说,正常的 ajax 核心代码是这样的:

request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            return success(request.responseText);
        } else {
            return fail(request.status);
        }
    }
}

那么这个 onreadystatechange 就是回调函数,那在 promise 里改造的话就是改造这个。将 success() 这个回调部分直接改为 resolve(),而将 fail() 部分直接改为 reject(),然后再 promise 后再写 then() 替代 success 的功能,而 catch() 来替代 fail 的功能。

同理,如果是 setTimeout 在 promise 里的话,应该就是对 setTimeout 里面的内容进行判断,成功的话就执行 resolve(),然后把 resolve 要处理的内容放在 then() 中处理,而失败的话则执行 reject(),然后在 catch() 里执行要处理的问题。

promise

最近在看 promise 相关的内容,找到一些不错的资源先罗列下来。

廖雪峰的 js 教程

JavaScript Promise API,这里面有一个原生 js 实现 ajax 的代码,非常值得一读,里面就是关于 promise 在实际中使用的非常好的例子,可以让你能更明白实际中使用 promise 的效果。

JavaScript Promises: an Introduction,这是一篇 google 开发者网页上的 promise 简介,目前还没有仔细阅读。


2017.3.27 first published