javascript - 完整的 Javascript Promise 错误处理。如何？

Question

我正在尝试理解 Javascript 的 promise ，到目前为止这就是我得到的。基本上，我尝试使用 setInterval 和 setTimeout 来模拟 ajax 请求，以了解如何使用:

promise 。进展
promise 。完成
promise 。失败
promise 。永远
promise 。捕获

下面的 console.log() 示例显示了除失败和捕获之外的所有内容。我不知道如何破坏代码以在失败时触发捕获？或者IS catch失败？还是失败之后才发现？？!

您能帮助我以捕获和处理失败所需的所有方式破解此代码吗？

$(document).ready(function() {
  console.log('1. Document is ready.');

  var timer;
  var i = 1;
  // Declare and Call the promise.
  var promise = myProcess();

  promise.progress(function() {
    // Receives updates from deferred.notify();
    // deferred.notify updates promise.progress on every Tick of timer = setInterval
    console.clear();
    console.log('promise.progress.. ' + i++);
  });

  promise.done(function() {
    // deferred.resolve triggers at the end of setTimeout
    console.log('promise.done');
  });

  promise.fail(function(error) {
    // Executes on fail...
    console.log('promise.fail');
  });

  promise.always(function() {
    // Executes always...
    console.log('promise.always');
    //console.log(myProcess());
  });

  function myProcess() {

    var deferred = $.Deferred();

    timer = setInterval(function() {
      // Tick every 1 second...
      deferred.notify();
    }, 1000);

    // until the 3rd second...
    setTimeout(function() {
      clearInterval(timer);
      deferred.resolve();
    }, 3000);

    return deferred.promise();

  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

我建议阅读一些有关 Promise 的文章。那些人能够比我更好地解释。还可以尝试在现代浏览器上使用“真实”的 promise 。否则，一旦您放弃 JQuerys deferred()，您就必须重新学习一些东西，因为它是 Promise 的非标准实现，因此 API 会有所不同。但让我们看看我们可以用您的代码做什么。

1) 如果我们想测试 Promise 的所有可能结果，我们需要在 Promise 中实际做一些可能成功或失败的事情。ajax 调用就是一个很好的例子。因此，让我们创建一个可以正常工作的函数，并稍微更改一下 myProcess 函数，以便它对我们提供的 uri 进行 ajax 调用。

var myProcess = function myProcess( uri ) {
    var deferred = $.Deferred();
    // Keep the timer so the .progress() method will get triggered.
    // In the example of an ajax call, you'd probably want to bind this to either the readystatechange event or to some work the callback of $.get() executes.
    timer = setInterval(function() {
      // Tick every 1 second...
      deferred.notify();
    }, 1000);
    // Make an ajax call. If it suceeeds, resolve, else reject
    // Since an ajax call is already async, we don't need to simulate the waiting with the timeout.
    $.get( uri, function( data ) {
        // remove the timer again once the ajax result returns.
        clearInterval( timer );
        if ( data ) deferred.resolve( data );
        else deferred.reject( data );
    } );
    return deferred.promise();
};

2) 使用 myProcess 函数并将一些处理程序链接到它。 .done() 方法相当于标准 Promises 的 .then() 方法。

myProcess( 'http://some.api.uri/' )
    // This will get triggered every second as long as the timer is active.
    // If you want this to take longer for testing purposes, just make the ajax call take longer by adding a setTimeout again.
    .progress( function onProgress() {
        // The promise is still being resolved. Every second this gets triggered because we have deferred.notify() inside myProcess().
    } )
    // This will trigger once the ajax call succeeds succesfully and hence, .resolve() is triggered.
    .done( function onResolved_1( data ) {
        // Do something with the data you received from the ,get() call inside myProcess.
        return JSON.parse( data );
    } )
    // This will trigger after the previous .done() function ( onResolved_1 ) has returned the data.
    .done( function onResolved_2( dataReturnedFromPreviousDone ) {
        // Do something with the data we parsed.
    } )
    // This will only trigger if the ajax call fails and hence, .reject() gets triggered.
    .fail( function onFail( error ) {
        // Do something with the error.
    } )
    // This will happen no matter if the promise gets resolved or rejected.
    .always( function always() {
        // stuff that always needs to happen.
    } );

更新:围绕 JQuery.get() 的 native promise

最后，事情很简单。任何时候你有异步发生的事情，只需将其包装在一个 Promise 中并从那里继续使用 .then() 链接。因此，如果我们想要 Promisify JQuery .get()，我们可以使用以下基本包装器:

var getURI = function getURI( uri ) {
    // Wrap the basic $.get() function into a native promsie object.
    // The promise constructor expects a function that will take in the resolve and reject methods as parameters
    return new Promise( function( resolve, reject ) {
        $.get( uri, function( data ) {
            if ( data ) resolve( data );
            else reject( new Error( 'could not load uri: ' + uri ) );
        } );
    } );
};

话又说回来，我们可以使用这个函数来获取一些东西。页面、数据、任何我们可以获得的东西。

var getData = function getData( callback ) {
    // Do any work that you want to happen before the GET call
    console.log( 'this always happens before we fetch the data' );
    // Make the request for the data. Let's assume it returns us a text structured as JSON.
    getURI( 'https://postman-echo.com/get?foo1=bar1&foo2=bar2' )
    // .then() accepts two functions. One to trigger after resolve() and one to trigger after reject()
    .then(
        function onResolve( data ) {
            // do something with the data
            // If the only thing you do with the data is returning the result of a function, you don't have to wrap that function.
            // So if we only want to parse, we can just use .then( JSON.parse )
            return data;
        },
        function onReject( error ) {
            // do something with the error.
            console.log( 'error thrown inside onReject() after getURI failed to get data.' );
            console.error( error );
        }
    } )
    // Anything you return from inside the onResolve() function will get used as the parameter for the next onResolve() function in the chain.
    .then( function( data ) {
        // do something else.
        // instead of using a callback, you could also return the promise and keep chaining from there.
        callback( data );
    } );
};

.then() 函数并不要求您始终提供拒绝处理程序。如果您只想提供一个错误处理程序，则可以在末尾使用 .catch() 。唯一真正缺少的是 .progress() 方法。 .first() 是触发 Promise 之前的任何代码。

promise 在行动中的完整示例如下:

var getURI = function getURI( uri ) {
    return new Promise( function( resolve, reject ) {
        $.get( uri, function( data ) {
            if ( data ) resolve( data );
            else reject( new Error( 'could not load uri: ' + uri ) );
        } );
    } );
};
var doThisFirst = function doThisFirst() {
    console.log( 'this should be the first log to appear' );
};
var doThisLast = function doThisLast() {
    console.log( 'this.should always be the last log' );
};
var addMeta = function addMeta( obj ) {
    obj.meta = 'extra meta data';
    return obj;
};
var renderData = function renderData( obj ) {
    console.log( 'we received the following object and added a meta property to it: ' );
    console.dir( obj );
};
var handleError = function handleError( error ) {
    console.log( 'we found an error while fetching and augmenting some data' );
    console.error( error );
};
var runApplication = function runApplication() {
    doThisFirst();
    getURI( 'https://postman-echo.com/get?foo1=bar1&foo2=bar2' )
        .then( JSON.parse )
        .then( addMeta )
        .then( renderData )
        .then( doThisLast )
        .catch( handleError );
};
runApplication();