Как получить последовательное выполнение async функций?

Question

[Elvis]

Использую либу, которая превращает элемент(в моем случае таблицу) в картинку и отправляю её на сервер. После чего сервер сохраняет и выдает ссылку на эту картинку. https://github.com/niklasvh/html2canvas

На странице есть кнопка, которая запускает скрипт:

async function convertToImage(){
	let resulttable = document.getElementById("fctable");
	let imglink = await html2canvas(resulttable)
	.then(canvas => canvas.toDataURL("image/png"));
	let response = actionpl(imglink, 'saveimg');
	let imgresp = await response;
}

Так же функция, которая передает на бэк Base64 картинку, которая сохраняется и возвращает ссылку на изображение:

async function actionpl(data, action){
	let formData = new FormData();
	formData.append('data', data.trim());
	formData.append('action', action);
	let response = await fetch('', {
		method:'POST', 
		body:formData
	})
	.then(response => response.text())
	.then(function(data) {
			console.log(data);
			return data;
	}
});

Картинка на сервер сохраняется, console.log пишет ссылку, но в let imgresp = await response; возвращается промис, а не ссылка в виде строки.
Помогите разобраться, я же делаю return data;, в которой и есть сама ссылка, плюс я ожидаю когда отработает второй скрипт здесь await response;

Answer 1

[Aetae]

Где return в actionpl? Оно ничего не возвращает у тебя, что в случае с async значит пустой Promise.

Comments

[Elvis]

return не там поставил оказывается. спасибо!

async function actionpl(data, action){
  var message = '';
  let formData = new FormData();
  formData.append('data', data.trim());
  formData.append('action', action);
  let response = await fetch('', {
    method:'POST', 
    body:formData
  })
  .then(response => response.text())
  .then(function(data) {
      console.log(data);
      message = data;
      return;
  });
return message;
}