Async/await в fetch?

Question

[daxak]

async function getIp(){
    let resp = await fetch('https://json.geoiplookup.io/');
    let firstIp = await resp.json();
    let secondResp = await fetch(`https://ipapi.co/${firstIp.ip}/json/`);
    let secondIp = await secondResp.json();
    return secondIp;
}
getIp().then(data => console.log(data));

Только недавно начал изучать async/await операторы. Как можно изменить мой код в лучшую сторону? Идея в том, что с одного сайта код получает ip, а на другом использует ip в целях получении информации

Comments

[Lynn «Кофеман»]

А зачем вам первый вызов?
ipapi отлично умеет выдавать информацию про текущий ip адрес.

https://ipapi.co/api/

[daxak]

Lynn «Кофеман», Действительно, я про это даже не знал. Но по сути вопроса, правильно ли я использовал async/await операторы?

[Lynn «Кофеман»]

Ну и названия функции и переменных лучше бы отражали реальность. Функция возвращает не IP, так что название явно вводит в заблуждение

Answer 1

[Надим]

Откройте консоль и выполните:

async function getIp(){
	
	// Блок try выполнится полностью, если не будет ошибок:
	
	try {
		
		// Выполняем первый запрос:
		
		var response1 = await (await fetch('https://json.geoiplookup.io/')).json();
		
		// Выполняем второй запрос используя данные с первого:
		
		var response2 = await (await fetch('https://ipapi.co/'+response1.ip+'/json/')).json();
		
		return response2; // Возвращаем результат второго запроса
		
	}
	
	// Блок catch сработает только если будут какие-то ошибки в блоке try:
	
	catch(err) {
		
		// Выведем в консоли информацию об ошибке:
		
		console.log('При запросе IP произошла ошибка, детали ниже:');
		console.error(err);
		
		// Вернем исключение с текстом поясняющим детали ошибки:
		
		throw new Error('Один из запросов завершился неудачно =(');
		
	}
	
}

// Вызовем функцию:

var info = await getIp();

// Выведем результат:

console.log('Результаты запроса IP ниже:');
console.dir(info);

Код раскомментирован, думаю все понятно. Отдельно замечу, что если вы будете вызывать await getIp(); не в консоли, а где-то внутри другой функции, то эта функция обязательна должна иметь приставку async, иначе получите ошибку. Например, вам надо вызывать эту функцию внутри функции test() тогда не забудьте к ней добавить async:

async function test() {
	
	// ... ваш код
	
	var info = await getIp();
	
	// ... ваш код
	
}

Учебник:
https://learn.javascript.ru/async-await

Comments

[daxak]

и еще вопрос, почему когда я дублирую код в vscode и запускаю его в браузере возникает ошиюка: await is only valid in async functions and the top level bodies of modules

[Надим]

daxak, потому что await можно использовать только внутри функций которые имеют приставку async, ну или в консоли еще можно использовать await, а во всех остальных случаях это считается ошибкой. Поэтому просто оберите свой код в такую обертку и проблема исчезнет:

(async function() {
    // Ваш код...
})();