javascript – 使用promises实现回退

前端之家收集整理的这篇文章主要介绍了javascript – 使用promises实现回退前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是一种常见的模式,我们在数据源列表中级联,第一次成功打破了这样的链:
var data = getData1();
if (!data) data = getData2();
if (!data) data = getData3();

等等.但是,如果getDatan()函数是异步的,它会导致我们’回调地狱’:

var data;
getData1(function() {
    getData2(function () {
        getData3(function () { alert('not found'); })
    })
});

实现可能看起来像这样:

function getData1(callback) {
    $.ajax({
        url: '/my/url/1/',success: function(ret) { data = ret },error: callback
    });
 }

…有了承诺,我希望写下这样的东西:

$.when(getData1())
   .then(function (x) { data = x; })
   .fail(function () { return getData2(); })
   .then(function (x) { data = x; }) 
   .fail(function () { return getData3(); })
   .then(function (x) { data = x; });

其中第二个.then实际上是指第一个.fail的返回值,它本身就是一个承诺,我理解它被链接作为后续链步骤的输入.

显然我错了,但写这个的正确方法是什么?

@R_502_323@

在最有希望的库,你可以链.fail()或.catch()作为@ mido22的答案,但jQuery的.fail()不“处理”错误本身.保证始终传递输入承诺(具有未更改状态),如果/成功发生,则不允许级联所需的“中断”.

可以返回具有不同状态(或不同值/原因)的promise的唯一jQuery Promise方法是.then().

因此,您可以通过在每个阶段将下一步指定为then的错误处理程序来编写一个继续出错的链.

function getDataUntilAsyncSuccess() {
    return $.Deferred().reject()
        .then(null,getData1)
        .then(null,getData2)
        .then(null,getData3);
}
//The nulls ensure that success at any stage will pass straight through to the first non-null success handler.

getDataUntilAsyncSuccess().then(function (x) {
    //"success" data is available here as `x`
},function (err) {
    console.log('not found');
});

但实际上,您可能更常创建一个函数数组或数据对象,这些函数或数据对象在Array方法.reduce()的帮助下依次调用.

例如 :

var fns = [
    getData1,getData2,getData3,getData4,getData5
];      

function getDataUntilAsyncSuccess(data) {
    return data.reduce(function(promise,fn) {
        return promise.then(null,fn);
    },$.Deferred().reject());// a rejected promise to get the chain started
}

getDataUntilAsyncSuccess(fns).then(function (x) {
    //"success" data is available here as `x`
},function (err) {
    console.log('not found');
});

或者,这可能是一个更好的解决方案:

var urls = [
    '/path/1/','/path/2/','/path/3/','/path/4/','/path/5/'
];      

function getDataUntilAsyncSuccess(data) {
    return data.reduce(function(promise,url) {
        return promise.then(null,function() {
            return getData(url);// call a generalised `getData()` function that accepts a URL.
        });
    },$.Deferred().reject());// a rejected promise to get the chain started
}

getDataUntilAsyncSuccess(urls).then(function (x) {
    //"success" data is available here as `x`
},function (err) {
    console.log('not found');
});
原文链接:https://www.f2er.com/js/150039.html

猜你在找的JavaScript相关文章