Используя fetch, зачем мне так много «ожидающих» операторов?

Question

У меня есть инструкция выборки в одной функции, которая извлекает ключ API с сервера, и он используется несколькими другими объектами для доставки этого ключа API в любую нужную службу.

export default async function getAPIKey(key) {
    return await (await fetch('http://localhost:8000/' + key)).json();
}

А в моем погодном объекте:

export default {
    URI: 'https://api.openweathermap.org',
    getLocalWeather: async function(city=null, countryCode=null) {
        try {
            // fetch the API key from environment
            const API_KEY = await getAPIKey('wx');
            //... rest of code

Код, как он работает, но я не понимаю, почему мне нужно 3 оператора ожидания. Разве мне не нужно только два? Мне нужен один для fetch() в getAPIKey(). Затем .json() возвращает обещание, потому что оно должно ждать тела ответа, поэтому мне нужно ждать, когда я вызову функцию в getLocalWeather(). Но если у меня нет двух ожиданий в getAPIKey(), он просто возвращает [object Response]?

По сути, мне интересно, почему следующее неправильно:

export default async function getAPIKey(key) {
    return (await fetch('http://localhost:8000/' + key)).json();
}

А в моем погодном объекте:

export default {
    URI: 'https://api.openweathermap.org',
    getLocalWeather: async function(city=null, countryCode=null) {
        try {
            // fetch the API key from environment
            const API_KEY = await getAPIKey('wx');
            //... rest of code

Я не считаю? Потому что я вижу только два обещания. Я знаю, что функции async / await - это обещания, поэтому getAPIKey() - это обещание, но разве это обещание не будет .json() Обещанием? И если так, то почему не достаточно ожидания, когда я вызываю функцию?

Я не уверен, что я не понимаю.

Answer 1

Вам не нужны никакие из этих await операторов внутри getAPIKey(), и ваша функция даже не должна быть async. Вы можете просто сделать это:

export default function getAPIKey(key) {
    return fetch('http://localhost:8000/' + key).json();
}

Вы просто хотите вернуть обещание от fetch().json().

Код работает так, как он есть, но я не понимаю, почему мне нужно 3 оператора ожидания. Разве мне не нужно только два?

На самом деле, вам нужен только один, когда вы делаете await getAPIKey(). Остальные внутри getAPIKey() вообще не нужны.

---

Когда вы делаете что-то вроде:

export default async function getAPIKey(key) {
    return await fetch('http://localhost:8000/' + key).json();
}

Вы просто добавляете лишнее await, которое не приносит никакой пользы. Функция возвращает обещание (все функции async возвращают обещание), и это обещание разрешается, когда выполняется await, что в точности совпадает с выполнением return fetch('http://localhost:8000/' + key).json(); вначале. Добавление второго await также не добавляет значения.