原文:http://liubin.org/promises-book/#how-to-write-promise 1 创建Promise对象 创建promise对象的流程如下所示。 new Pr
原文:http://liubin.org/promises-book/#how-to-write-promise
1 创建Promise对象
创建promise对象的流程如下所示。
-
new Promise(fn)
返回一个promise对象 -
在
fn
中指定异步等处理-
处理结果正常的话,调用
resolve(处理结果值)
-
处理结果错误的话,调用
reject(Error对象)
-
按这个流程我们来实际编写下promise代码吧。
我们的任务是用Promise来通过异步处理方式来获取XMLHttpRequest(XHR)的数据。
创建XHR的promise对象
首先,创建一个用Promise把XHR处理包装起来的名为 getURL
的函数。
function getURL(URL) { return new Promise(function (resolve, reject) { var req = new XMLHttpRequest(); req.open('GET', URL, true); req.onload = function () { if (req.status === 200) { resolve(req.responseText); } else { reject(new Error(req.statusText)); } }; req.onerror = function () { reject(new Error(req.statusText)); }; req.send(); });}// 运行示例var URL = "http://httpbin.org/get";getURL(URL).then(function onFulfilled(value){ console.log(value);}).catch(function onRejected(error){ console.error(error);});
getURL
只有在通过XHR取得结果状态为200时才会调用 resolve
- 也就是只有数据取得成功时,而其他情况(取得失败)时则会调用 reject
方法。
resolve(req.responseText)
在response的内容中加入了参数。 resolve方法的参数并没有特别的规则,基本上把要传给回调函数参数放进去就可以了。 ( then
方法可以接收到这个参数值)
熟悉Node.js的人,经常会在写回调函数时将 callback(error, response)
的第一个参数设为error对象,而在Promise中resolve/reject则担当了这个职责(处理正常和异常的情况),所以 在resolve方法中只传一个response参数是没有问题的。
接下来我们来看一下reject
函数。
XHR中 onerror
事件被触发的时候就是发生错误时,所以理所当然调用reject
。 这里我们重点来看一下传给reject
的值。
发生错误时要像这样 reject(new Error(req.statusText));
,创建一个Error对象后再将具体的值传进去。 传给reject
的参数也没有什么特殊的限制,一般只要是Error对象(或者继承自Error对象)就可以。
传给reject
的参数,其中一般是包含了reject原因的Error对象。 本次因为状态值不等于200而被reject,所以reject
中放入的是statusText。 (这个参数的值可以被 then
方法的第二个参数或者 catch
方法中使用)