Обещание, ожидание, асинхронность, ожидание в Javascript

Question

Я пытаюсь понять, почему этот код возвращает "Promise {pending}".

const reduceDirections = (str) => {
    str = str.replace(/northsouth|southnorth|eastwest|westeast/ig, '')

            if (str.search(/northsouth|southnorth|eastwest|westeast/ig) === -1) {
                str = str.replace(/south|north|west|east/gi, '$& ').replace(/(^\s+|\s+$)/,'')
                console.log(str)
                return str

            } else {
                reduceDirections(str)
            }  
}

async function start(arr) {
    str = arr.join('')
    let res = await reduceDirections(str)
    return Promise.resolve(res)
}

console.log(start(["NORTH", "SOUTH", "SOUTH", "EAST", "WEST", "NORTH", "WEST"]))

Когда я console.log(str) из функции reduDirections (), я вижу, что у меня есть результат, который я хочу. Но когда я (одной строкой позже) return str вместо этого у меня появляется "Обещание в ожидании"

Извините, что не понимаю Обещания и асинхронное ожидание. Я пытался читать на MDN и смотреть видео, но я не вижу, как я могу передать, что они показывают к этой проблеме. Заранее спасибо за помощь!

Answer 1

Несколько проблем:

1) В reduceDirections не происходит ничего асинхронного, и при этом он не возвращает обещание, поэтому нет смысла использовать await для него.

2) Рекурсивная часть вашей функции не возвращает рекурсивный результат, поэтому измените:

 } else {
     reduceDirections(str)
 }  

на:

 } else {
     return reduceDirections(str)
 }  

Тогда, по крайней мере, вы можете надеяться получить полезную строку каквозвращаемое значение

3) Если вы действительно настаиваете на использовании await для чего-то, что возвращается синхронно, то вы можете сохранить это, но это не нужно делать

return Promise.resolve(res)

... поскольку функция async всегда все равно возвращает обещание. Просто сделайте

return res;

4) вы не ждете , которое обещает решить. Поэтому вам следует дождаться его разрешенного значения и использовать console.log для , что . Измените:

console.log(start(["NORTH", "SOUTH", "SOUTH", "EAST", "WEST", "NORTH", "WEST"]))

на:

start(["NORTH", "SOUTH", "SOUTH", "EAST", "WEST", "NORTH", "WEST"]).then(console.log)

Но опять же, использование обещаний здесь бесполезно и только усложняет код. Вы не получаете никакого преимущества от этого.

Answer 2

Избавьтесь от линии return Promise.resolve(res). В любом случае асинхронные функции возвращают обещание.

Первая строка, которую вы видите на консоли (WEST), идет из оператора console.log в функции reduDirections.

Promise {pending} - это то, что показывает второй console.log, потому что это возвращаемое значение из функции start.

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