【全栈React】第15天: Promise简介
今天,我们将要看看我们需要知道什么来从高层次了解Promises,所以我们可以使用这个非常有用的概念构建我们的应用。 昨天我们将 Promise正如 mozilla 所定义的,
使用 "承诺" 对象使我们有机会将异步操作的最终成功或失败关联到功能 (无论出于何种原因)。它还允许我们使用类似于同步的代码来处理这些复杂的场景。 例如,考虑下面的同步代码,我们在 javascript 控制台中打印出当前时间: var currentTime = new Date(); console.log('The current time is: ' + currentTime); 这是相当直接的,并作为 假设我们有一个方法来处理从远程服务器获取当前时间的 function getCurrentTime() { // Get the current 'global' time from an API return setTimeout(function() { return new Date(); },2000); } var currentTime = getCurrentTime() console.log('The current time is: ' + currentTime); 我们的 function getCurrentTime(callback) { // Get the current 'global' time from an API return setTimeout(function() { var currentTime = new Date(); callback(currentTime); },2000); } getCurrentTime(function(currentTime) { console.log('The current time is: ' + currentTime); }); 如果有其余的错误呢?我们如何捕获错误并定义重试或错误状态? function getCurrentTime(onSuccess,onFail) { // Get the current 'global' time from an API return setTimeout(function() { // randomly decide if the date is retrieved or not var didSucceed = Math.random() >= 0.5; if (didSucceed) { var currentTime = new Date(); onSuccess(currentTime); } else { onFail('Unknown error'); } },2000); } getCurrentTime(function(currentTime) { console.log('The current time is: ' + currentTime); },function(error) { console.log('There was an error fetching the time'); }); 现在,如果我们想根据第一个请求的值提出请求怎么办?作为一个简短的示例,让我们再次重用 function getCurrentTime(onSuccess,onFail) { // Get the current 'global' time from an API return setTimeout(function() { // randomly decide if the date is retrieved or not var didSucceed = Math.random() >= 0.5; console.log(didSucceed); if (didSucceed) { var currentTime = new Date(); onSuccess(currentTime); } else { onFail('Unknown error'); } },2000); } getCurrentTime(function(currentTime) { getCurrentTime(function(newCurrentTime) { console.log('The real current time is: ' + currentTime); },function(nestedError) { console.log('There was an error fetching the second time'); }) },function(error) { console.log('There was an error fetching the time'); }); 以这种方式处理 异步 会很快变得复杂。此外,我们可以从以前的函数调用中获取值,如果我们只想得到一个... 在处理应用启动时还没有的值时,有很多棘手的情况需要处理。 进入Promise使用承诺,另一方面帮助我们避免了很多这种复杂性 (虽然不是一个银弹解决方案,参考《人月神话》)。以前的代码,这可以被称为意大利面条代码可以变成一个更整洁,更同步的前瞻版本: function getCurrentTime(onSuccess,onFail) { // Get the current 'global' time from an API using Promise return new Promise((resolve,reject) => { setTimeout(function() { var didSucceed = Math.random() >= 0.5; didSucceed ? resolve(new Date()) : reject('Error'); },2000); }) } getCurrentTime() .then(currentTime => getCurrentTime()) .then(currentTime => { console.log('The current time is: ' + currentTime); return true; }) .catch(err => console.log('There was an error:' + err)) 以前的源代码示例对正在发生的事情进行了一些清理和清除,避免了许多棘手的错误处理/捕获。 为了获得成功的值,我们将使用 要捕获在承诺链中任何地方发生的错误,我们可以使用
单使用Guarantee承诺在任何特定的时间都只应该在三种状态之一:
一个 待定 的承诺只能导致一个满足状态或一个被拒绝的状态 一次且仅一次,这可以避免一些相当复杂的错误场景。这意味着,我们只能返回一个承诺一次。如果我们想重新运行一个使用承诺的函数,我们需要创建一个 新 的。 创建一个Promise我们可以使用
从上面回顾我们的函数,我们可以看到,如果请求成功,我们调用 var promise = new Promise(function(resolve,reject) { // call resolve if the method succeeds resolve(true); }) promise.then(bool => console.log('Bool is true')) 现在我们知道了什么是承诺,如何使用,以及如何创建它们,我们实际上可以使用昨天安装的 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |