概述

为了体验promise的原理,我打算自己把ajax包装成promise的形式。主要希望实现下列功能:

// 1.使用success和error进行链式调用,并且可以在后面加上无限个
promise.get(myUrl).success(successCallback1).error(errorCallback1).success(successCallback2).error(errorCallback2).error(errorCallback3).success(successCallback3); // 2.支持同时调用多个myUrl,这个时候需要最后的http请求返回之后才执行回调。
promise.get(myUrl1).success(successCallback1).get(myUrl2).error(errorCallback1).get(myUrl3).error(errorCallback2).success(successCallback1); // 3.支持post和jsonp请求。

对于ajax我选用jq的ajax,但是尽量不使用jq的deferred对象。

本篇博文实现一个测试用ajax方法

测试用ajax

因为用实际ajax接口非常不方便测试,所以我用setTimeout模拟了一个ajax方法进行测试用。

值得一提的是,如果在node端,建议使用setImmediate代替setTimeout会有更好的性能。目前浏览器端只有IE支持setImmediate。

// 模拟ajax
let mockAjax = ({ url, type, success, error }) => {
let data = url + type, err = url + type, status;
// 随机执行success或者error
setTimeout(() => {
let rand = Math.random() > 0.1;
if(rand) {
status = 1;
if(typeof success == 'function') success(data, status);
} else {
status = 0;
if(typeof error == 'function') error(err, status);
}
});
}

mockAjax随机进行成功或者失败返回,可以更改上面的0.1来调高或者调低相关概率。

需要说明的是,最好在chrome的开发者工具下运行上面的代码,其它浏览器可能不支持参数解构

使用mockAjax进行测试

// 模拟ajax
let mockAjax = ({ url, type, success, error }) => {
let data = url + type, err = url + type, status;
// 随机执行success或者error
setTimeout(() => {
let rand = Math.random() > 0.5;
if(rand) {
status = 1;
if(typeof success == 'function') success(data, status);
} else {
status = 0;
if(typeof error == 'function') error(err, status);
}
});
} let Promise = function() {
this.eventName = {
success: [],
error: []
};
}; Promise.prototype.success = function(cb) {
this.eventName.success.push(cb);
return this;
}; Promise.prototype.error = function(cb) {
this.eventName.error.push(cb);
return this;
}; Promise.prototype.get = function(url) {
let that = this;
setTimeout(() => {
mockAjax({
url: url,
type: 'get',
success: function (data, status) {
let successList = that.eventName.success;
if(successList || successList.length) {
for(let i = 0; i < successList.length; i++) {
successList[i](data, status);
}
}
},
error: function (err, status) {
let errorList = that.eventName.error;
if(errorList || errorList.length) {
for(let i = 0; i < errorList.length; i++) {
errorList[i](err, status);
}
}
}
});
}); return this;
}; // test===================
let successCallback = (message) => (data, status) => {
console.log(data + '成功回调' + message);
}
let errorCallback = (message) => (err, status) => {
console.log(err + '失败回调' + message);
} let testPromise = new Promise();
testPromise.get('url1').success(successCallback(1)).success(successCallback(2)).error(errorCallback(1)).error(errorCallback(2));

可以看到浏览器输出如下:

// 成功情况
url1get成功回调1
url1get成功回调2
// 失败情况
url1get失败回调1
url1get失败回调2

多异步协作

多异步情况下会返回什么呢?

testPromise.get('url1').success(successCallback(1)).success(successCallback(2)).error(errorCallback(1)).error(errorCallback(2)).get('url2').success(successCallback(3)).error(errorCallback(3)).get('url3');

输出如下:

url1get成功回调1
url1get成功回调2
url1get成功回调3
url2get成功回调1
url2get成功回调2
url2get成功回调3
url3get失败回调1
url3get失败回调2
url3get失败回调3

冷静分析,在url1返回的时候,url2和url3没有返回,此时对url1返回的数据执行了三个成功回调。

但是更多情况下,我们需要url1, url2, url3全部返回之后再执行成功回调或者失败回调。

这种功能我们将在下篇博文实现。

把ajax包装成promise的形式(2)的更多相关文章

  1. 把ajax包装成promise的形式(3)

    概述 为了体验promise的原理,我打算自己把ajax包装成promise的形式.主要希望实现下列功能: // 1.使用success和error进行链式调用,并且可以在后面加上无限个 promis ...

  2. 把ajax包装成promise的形式(1)

    概述 为了体验promise的原理,我打算自己把ajax包装成promise的形式.主要希望实现下列功能: // 1.使用success和error进行链式调用,并且可以在后面加上无限个 promis ...

  3. 如何把 Callback 接口包装成 Promise 接口

    最近一段时间一直在看Node.js,在开发过程中经常要调用一些异步接口,通常在接口的最后一个参数会传入一个回调函数,可以用来处理异常,非异常情况.大致模式如下: var fs = require(“f ...

  4. Finder Item脚本如何包装成 Mac App

    第一步,包装 记得之前把一个 java 程序的 jar 包 用 automator包装成了 app, 但自己找不到做法了.回头我想了想 这么实验可行. 这样做成 app 后保存在 /Applicati ...

  5. (转)Groupon前传:从10个月的失败作品修改,1个月找到成功 并不挶泥在这个点子上面,它反而往后站一步,看看他们已经做好的这个网站,可以再怎么包装成另一个完完全全不同的网站?所有的人所做的每件失败的事情中, 一定有碰到或含有成功的答案」在里面,只是他们不知道而已。 人不怕失败」,只怕宣布失败」

    (转)Groupon前传:从10个月的失败作品修改,1个月找到成功 今天读到 一个非常励志人心的故事 ,就像现在「叶问」有「前传」,最近很火红的团集购网站Groupon 也出现了「Groupon前传」 ...

  6. SIP:用Riverbank的SIP创建C++库的Python模块(把自己的C++库包装成Python模块)

    我们发现PyQt做的Python版的PyQt是如此好用,如果想把自己的C++库包装成Python模块该如何实现呢? 这里介绍下用SIP包装C++库时值得参考的功能实现: 需要Python模块中实现C+ ...

  7. [Python] 将视频转成ASCII符号形式、生成GIF图片

    一.简要说明 简述:本文主要展示将视频转成ASCII符号形式展示出来,带音频. 运行环境:Win10/Python3.5. 主要模块: PIL.numpy.shutil. [PIL]: 图像处理 [n ...

  8. 安卓、ios时间转换成时间戳的形式

    将日期转换成时间戳的形式,在安卓和ios不同的系统下转正会有兼容性的问题 安卓系统下Date.parse(new Date('2018-03-30 12:00:00'))会直接转换成时间戳的形式(简单 ...

  9. Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题

    转: Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题 在实际PL/SQL编程中,我们要对动态取出来的一组数据,进行For循环处理,其基本程序逻辑为: ...

随机推荐

  1. Linux 学习笔记 4:Shell 编程

    1.简单过滤器 a. pr [OPTION] [FILE] 功能:改变文件打印格式 选项 功能 -l n 设定页面长度为n行 -w n 设定页面总宽度为n个字符(不够会被砍掉) -h str 设定页眉 ...

  2. ORACLE设置用户密码不过期

    1.查看用户的 profile 是哪个,一般是 default SELECT USERNAME, PROFILE FROM dba_users; 2.查看指定概要文件(这里是1中对应的profile) ...

  3. Scrapy运行ImportError: No module named win32api错误

    windows系统上出现这个问题的解决需要安装Py32Win模块,更方便的做法是: pip install pypiwin32

  4. rtx tiny os

    一,简单测试步骤: 1.  license management包含两项:artx51 real time os, PK51 2. code #include "rtx51tny.h&quo ...

  5. 从 Basic Paxos 到 Multi Paxos 到 Raft

    在朴素Paxos算法中, 各个节点经过 Prepare 和 Accept 阶段, 会达成一个值, 这个值一旦达成, 就不能被修改, 如下例子: 图示1 上面的操作几乎没有任何实用价值, 于是演变成下面 ...

  6. "车羊门问题"作业

    作业完成人: 学号:20171301008 潘松泉: 学号:20171301022 陈霖彬: 1.按照你的第一感觉回答,你觉得不换选择能有更高的几率获得汽车,还是换选择能有更高的几率获得汽车?或几率没 ...

  7. 利用java的url实现小型的网页爬虫

    暂时还没学处理数据的方法,扒下来的数据还包含html的标签. 后面再学. package com.imooc; import java.io.BufferedReader; import java.i ...

  8. Scrapy学习之路(一)————环境配置

    一.问题环境安装 首先scrapy这个爬虫框架是基于twisted完成的因此,在安装scrapy之前需要安装twisted.否则直接安装scrapy就会直接出错:Failed building whe ...

  9. flume接收http请求,并将数据写到kafka

    flume接收http请求,并将数据写到kafka,spark消费kafka的数据.是数据采集的经典框架. 直接上flume的配置: source : http channel : file sink ...

  10. [置顶]ABP框架系列总目录(持续更新)

    Articles & Tutorials Introduction & Step by Step With ASP.NET Core & Entity Framework Co ...