Promise.js with AJAX

╰+攻爆jí腚メ 2022-07-16 01:17 110阅读 0赞

# 使用 #

Promise.timeout(f1(), 2000).then(f2, function () {

alert("timeout");

}).wait(5000).then(f3);

function f1() {

var promise = Promise();

setTimeout(function () {

console.log(1);

promise.resolve("from f1");

}, 1500)

return promise;

}

function f2() {

var promise = Promise();

setTimeout(function () {

console.log(2);

promise.resolve();

}, 1500)

return promise;

}

function f3() {

var promise = Promise();

setTimeout(function () {

console.log(3);

promise.resolve();

}, 1500)

return promise;

}

# AJAX #

function xhr(options) {

var promise = Promise(),

req = new XMLHttpRequest();

req.open(options.method || 'GET', options.url, true);

// Set request headers if provided.

Object.keys(options.headers || {}).forEach(function (key) {

req.setRequestHeader(key, options.headers[key]);

});

req.onreadystatechange = function (e) {

if (req.readyState !== 4) {

return;

}

if ([200, 304].indexOf(req.status) === -1) {

promise.reject('Server responded with a status of ' + req.status);

} else {

promise.resolve(e.target.result);

}

};

req.send(options.data || void 0);

return promise;

}

使用：

xhr({ url: "xxx.php?a=xxx" }).then(function (msg) {

})

当然，promise支持等待N个AJAX都完成之后进行回掉:

Promise(xhr({ url: "a.php?c=xxx" }), xhr({ url: "b.php?d=xxx" })).then(function () {

})

上面的写法的Promise.when的缺省形式。

# Promise.timeout with AJAX #

这里需要思考的是:timeout是属于AJAX还是属于Promise?

如果属于AJAX,那么就有下面这种形式：

xxx.ajax("xxx.php", {

method: "GET",

data: null,

onSuccess: function () { },

onTimeout: function () { },

timeout: 30000

});

如果属于Promise:

Promise.timeout(xhr({ url: "xxx.php" }), 30000).then(

function () { },

function () { }

)

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery ajax ajax()

-------------------- jquery ajax ajax() 应用：ajax()是jquery ajax底层实现，其他的ajax提交方式都可以通

浅浅的花香味﹌/ 2023年03月04日 08:21/ 0 赞/ 40 阅读

相关 html5 file ajax,javascript - Using HTML5 file uploads with AJAX and jQuery - Stack Overflow

With jQuery (and without FormData API) you can use something like this: function readFi

清疚/ 2022年10月07日 04:49/ 0 赞/ 157 阅读

相关 ajax vue data,vue.js - Display data in a Vue component with ajax - Stack Overflow

I seem to be misunderstanding how to pass data to a Vue.js component with an ajax call.

曾经终败给现在/ 2022年09月03日 11:22/ 0 赞/ 130 阅读

相关 Promise.js with AJAX

使用 Promise.timeout(f1(), 2000).then(f2, function () { alert("timeout");

╰+攻爆jí腚メ/ 2022年07月16日 01:17/ 0 赞/ 111 阅读

相关 Ajax 请求的http头信息特点 x-requested-with

很多用到AJAX请求，如何区别一个请求是传统的HTTP请求？还是Ajax请求？网上有很多，这里记录一下，方便以后直接查看，![大笑][laugh.gif]懒人计划，关键是看

古城微笑少年丶/ 2022年07月11日 08:40/ 0 赞/ 110 阅读

相关 TableSorter - Appending table data with ajax

$(document).ready(function() { $("table").tablesorter(); $("ajax-a

青旅半醒/ 2022年06月08日 02:11/ 0 赞/ 162 阅读

相关 x-requested-with 请求头区分ajax请求还是普通请求

在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)：　　两种请求在请求的Header不同，Ajax 异步请求比传统的同步请求多了一个头参数　　1、

妖狐艹你老母/ 2022年06月06日 06:57/ 0 赞/ 156 阅读

相关 x-requested-with 请求头区分ajax请求还是普通请求

很多用到AJAX请求，如何区别一个请求是传统的HTTP请求？还是Ajax请求？网上有很多，这里记录一下，方便以后直接查看，![大笑][laugh.gif]懒人计划，关键是看

布满荆棘的人生/ 2022年05月31日 12:41/ 0 赞/ 218 阅读

相关利用x-requested-with判断请求是否是Ajax请求

转载：http://www.cnblogs.com/tony-jingzhou/archive/2012/07/30/2615612.html x-request

快来打我*/ 2021年09月15日 23:36/ 0 赞/ 371 阅读

相关 x-requested-with 请求头区分ajax请求还是普通请求

服务器端判断request来自Ajax请求(异步)还是传统请求(同步)：　　两种请求在请求的Header不同，Ajax 异步请求比传统的同步请求多了一个头参数　　1、传

矫情吗；*/ 2021年06月24日 15:58/ 0 赞/ 421 阅读