侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 129226 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

【转】编写Promise代码

2024-04-28 星期日 / 0 评论 / 0 点赞 / 2 阅读 / 3312 字

原文: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对象的流程如下所示。

  1. new Promise(fn) 返回一个promise对象

  2. 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 方法中使用)

广告 广告

评论区