Как обещание, которое возвращается от обработчика разрешения, сопоставленного с возвращаемым значением «then»?

Question

Если я свяжу обещание и возвращаю обещание от обработчика разрешения, как это обещание станет возвратным значением для звонка на then? Что происходит за кулисами?

В следующем примере, в firstMethodHandler, вызов secondMethod получает новое обещание, которое она затем возвращается, но это обещание затем возвращается из then метода, в котором он передается свое обещание. Как это произошло?

function firstMethod(value) { 
    console.log('1st method:', value) 
    return new Promise((resolve, reject) => { 
    resolve(++value); 
    }); 
} 

function secondMethod(value) { 
    return new Promise((resolve, reject) => { 
    console.log('2nd method:', value) 
    resolve(++value); 
    }); 
} 

function firstMethodHandler(value) { 
    console.log("1st method handler:",value); 
    return secondMethod(value); 
} 

function secondMethodHandler(value) { 
    console.log("2nd method handler:", value); 
} 


firstMethod(1) 
    .then(firstMethodHandler) 
    .then(secondMethodHandler) 

Answer 1

Ключевым моментом здесь является то, что p1.then() возвращает новое обещание, мы будем называть p2. Когда p1 разрешен, он вызывает привязанный к нему обработчик .then(). Когда вы вернете еще одно обещание от этого .then() (которое мы назовем p3), то p3 прикован к p2 и таким образом p2 не будет разрешен до p3. Таким образом, вызывающий абонент p1.then() вернет обещание p2, которое не будет разрешено до тех пор, пока не будут устранены как p1, так и p3. Вот так вещи связаны друг с другом.

Обычно ключевая информация здесь состоит в том, что p1.then() возвращает новое обещание, и именно это обещание зависит от того, что происходит внутри предыдущего обработчика .then().

Вы можете увидеть подобное объяснение здесь:

Difference between resolve and return in promise JS

---

В вашем конкретном примере:

firstMethod(1) 
    .then(firstMethodHandler) 
    .then(secondMethodHandler) 

firstMethod() возвращает обещание, которое я буду называть p1. Затем, вызвав .then(firstMethodHandler) на это обещание, возвращается новое обещание p2, а затем вызывается .then(secondMethodHandler), что создает новое обещание p3.

В какой-то момент в будущем firstMethod() решает обещание, которое оно вернуло. Итак, теперь разрешен p1. Это вызывает связанный с ним обработчик .then() и, таким образом, вызывает firstMethodHandler(). Это возвращает новое обещание p4. Это цепи p4 до p2 обещают, что p2 не решит до p4. В какой-то момент в будущем, p4 разрешает, что позволяет решить p2. Это вызывает обработчик .then(), прикрепленный к p2, который, таким образом, вызывает secondMethodHandler(), и вы видите окончательный console.log().

Как вы можете видеть из объяснения, ключевым моментом здесь являются новые обещания p2 и p3, которые создаются, когда .then() выполнен в первый раз. Вот что связано с привязанными обработчиками .then(), и эти обещания зависят от того, что возвращается от прикрепленных обработчиков .then().

Чтобы увидеть, что делает сцепление, мы можем удалить фактические цепочки и показать вам реальные промежуточные переменные, которые автоматически создаются и используются:

var p1 = firstMethod(1); 
var p2 = p1.then(firstMethodHandler); 
var p3 = p2.then(secondMethodHandler); 

p1 Косову внутренней по отношению к firstMethod() p2 является возвращение значение p1.then(...) p3 является возвращаемым значением p2.then(...)

Когда firstMethodHandler вызываются (после того, как р1 решает), то г eturns p4, который прикован к p2, так что p2 не разрешается до p4. Когда p4, наконец, разрешает, он разрешает p2, чтобы затем позвонить secondMethodHandler. Когда этот обработчик .then() возвращает нормальное значение, то p3 разрешается, и вся цепочка выполняется.