gpt4 book ai didi

javascript - 如何转换为使用 Promises 和 Q Library

转载 作者:行者123 更新时间:2023-12-03 04:38:27 26 4
gpt4 key购买 nike

我们的应用程序正在不断增长,我们的客户端脚本需要重构,以变得更干净、更精简、更易于维护。我正在尝试使用一个小模块来利用 Q 库进行 promise 链接。

正如您所看到的,我需要将一些返回值从初始函数传递回 promise 链的其余部分。有人可以帮助我理解我需要做什么才能让第一个函数作为 Promise 正确返回吗?然后解释一下链条?

这是我的出发点:

var promise = new Q.Promise(generateMoveRequest)
.then(function (id) {
var woNum = 12345;
return layoutInit(woNum, id, true);
}).then(function (result) {
if (result) {
return moveRequestInit(result, true);
} else {
throw new Error('Template not loaded');
}
}).catch(function (err) {
console.log(err);
});

生成移动请求:

generateMoveRequest: function () {
$.ajax({
method: "GET",
url: window.contextPath + '/api/settings/getjson',
data: {name: "the_name"},
success: function (data) {
if (data.length) {
var id = $.parseJSON(data).Parent;
return id;
}
},
error: function (xhr, textStatus, errorThrown) {
console.log("xhr: ", xhr);
return null;
}
});
}

布局初始化:

layoutInit: function (num, id, appendLayout) {
$.ajax({
method: "GET",
url: window.contextPath + '/some/url',
data: {num: num, id: id},
success: function (data) {
return layoutInit.callback(data, appendLayout);
},
error: function (xhr, textStatus, errorThrown) {
console.log("xhr: ", xhr);
}
});
},
callback: function (data, appendLayout) {
if (data && data.toString().toLowerCase() !== "blank") {
if (appendLayout) {
$(data).insertBefore($("#detailsection"));
} else {
$("#detailsection").html(data);
}
} else {
$("#detailsection").html('');
}
},

generateMoveRequest 函数将执行,但链永远不会继续进行。没有 .then() 执行,并且 layoutInit 永远不会被调用。

我正在使用 Q 库,但一些示例似乎忽略了如何启动/创建 Promise 或将初始函数转换为 Promise。

有人可以解释我这里的错误或为我提供一个干净的例子吗?

最佳答案

promise 的 jQuery 实现不遵循 A+ 标准,因此您最好使用 Q。

promise 必须接收一个带有 2 个参数的函数 - resolvereject - 它们也是函数(请记住 Javascript 是一种函数式语言)。成功时必须调用 resolve 函数,出错时必须调用 reject 函数。无论您传递给这些函数的是什么,都可以在 then()catch() 回调中使用。

长话短说,重写你的代码如下:

var generateMoveRequest = function (resolve, reject) {
$.ajax({
method: "GET",
url: window.contextPath + '/api/settings/getjson',
data: {name: "the_name"},
success: function (data) {
if (data.length) {
var id = $.parseJSON(data).Parent;
resolve(id);
} else {
reject({message: 'Data not received'})
}
},
error: function (xhr, textStatus, errorThrown) {
reject({message: errorThrown})
}
});
}

var promise = new Q.Promise(generateMoveRequest)
.then(function (id) {
var woNum = 12345;
return layoutInit(woNum, id, true);
}).then(function (result) {
if (result) {
return moveRequestInit(result, true);
} else {
throw new Error('Template not loaded');
}
}).catch(function (error) {
console.log(error.message)
});

稍后编辑 - 请参阅代码片段以了解 Promise 的工作原理:

// any number of params
function willPerformAnAsyncOperationAndReturnAPromise(firstParam, secondParam, thirdParam) {
var promise = new Q.Promise(function (resolve, reject) { // always resolve & reject
// perform an async operation, like waiting one second
window.setTimeout(function () {
if (firstParam !== 0) {
// if the 1st param is not 0, it's a success
resolve ({
first: firstParam,
second: secondParam,
third: thirdParam
})
} else {
reject({message: 'The first param must not be null'})
}
}, 1000)
})

return promise
}

willPerformAnAsyncOperationAndReturnAPromise(1, 2, 3)
.then(function (data) {
console.log(data)
})
.catch(function (error) {
console.log(error)
})

willPerformAnAsyncOperationAndReturnAPromise(0, 2, 3)
.then(function (data) {
console.log(data)
})
.catch(function (error) {
console.log(error)
})

关于javascript - 如何转换为使用 Promises 和 Q Library,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43193345/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com