promise chain:attach callback vs

a promise is an object representing the eventual completion or failure of an asynchronous operation.

essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.

Imagine a function, createAudioFileAsync(), which asynchronously generates a sound file given a configuration record and two callbacks functions, one called if the audio file is successfully created, and the other called if an error occurs.

function successCallback(result){console.log("Audio file ready at URL: "+result);}

function failureCallback(error){console.log("Error generating audio file: "+error);}

createAudioFileAsync(audioSettings,successCallback,failureCallback);

---

modern functions return a promise you can attach your callbacks to instead:

createAudioFileAsync(audioSettings).then(successCallback,failureCallback);

That's shorthand for:

const promise=createAudioFileAsync(audioSettings);

promise.then(successCallback,failureCallback);

---

promise chain

Here's the magic: the then() function returns a new promise, different from the original:

const promise=doSomething();

const promise2=promise.then(successCallback,failureCallback);

or

const promise2=doSomething().then(successCallback,failureCallback);

In the old days, doing several asynchronous operations in a row would lead to the classic callback pyramid of doom:

doSomething(function(result){

    doSomethingElse(result,function(newResult{

        doThirdThing(newResult,function(finalResult){

            console.log('Got the final result:'+finalResult);

        },failureCallback);

    },failureCallback);

},failureCallback);

With modern functions, we attach our callbacks to the returned promises instead, forming a promise chain:

doSomething()

.then(function(result){

    returndoSomethingElse(result);

})

.then(function(newResult{

    returndoThirdThing(newResult);

})

.then(function(finalResult){

    console.log('Got the final result: '+finalResult);})

.catch(failureCallback);

The arguments to then are optional, and catch(failureCallback) is short for then(null, failureCallback). You might see this expressed with arrow functions instead:

doSomething()

.then(result=>doSomethingElse(result))

.then(newResult=>doThirdThing(newResult))

.then(finalResult=>{console.log(`Got the final result: ${finalResult}`);})

.catch(failureCallback);

---

1: 对同一个promise对象同时调用then方法

var aPromise=new Promise(function(resolve){resolve(100);});

aPromise.then(function(value){returnvalue*2;});

aPromise.then(function(value){returnvalue*2;});

aPromise.then(function(value){console.log("val: "+value);// => 100})

第1种写法中并没有使用promise的方法链方式，这在Promise中是应该极力避免的写法。这种写法中的then调用几乎是在同时开始执行的，而且传给每个then方法的value值都是100。

 2: 对then进行 promise chain 方式进行调用

var bPromise=new Promise(function(resolve){resolve(100);});

bPromise.then(function(value){returnvalue*2;})

.then(function(value){returnvalue*2;})

.then(function(value){console.log("2: "+value);// => 100 * 2 * 2});

第2中写法则采用了方法链的方式将多个then方法调用串连在了一起，各函数也会严格按照 resolve → then → then → then 的顺序执行，并且传给每个then方法的value的值都是前一个promise对象通过return返回的值。

---

在Promise中，我们可以选择多种方法来实现处理的按顺序执行。

循环使用then调用的方法

使用for循环的方法

使用reduce的方法

分离出顺序处理函数的方法

但是，这些方法都是基于JavaScript中对数组及进行操作的for循环或forEach等，本质上并无大区别。 因此从一定程度上来说，在处理Promise的时候，将大块的处理分成小函数来实现是一个非常好的实践。