Вступ
Функції зворотного виклику
Функції зворотного виклику - це функції, які передають як аргументи.
Цей прийом програмування створює послідовність викликів функцій як у синхронному, так і в асинхронному програмуванні.
Написати функцію зворотного виклику нічим не відрізняється від написання звичайної функції; однак функція зворотного виклику має відповідати сигнатурі, яку визначає функція, що її викликає.
const squareLength = 5;
// Caller function takes a callback function
function applyToSquare(callback) {
return callback(squareLength);
}
// Callback must expect the possible argument from the calling function
function areaOfSquare(number) {
return number * number;
}
applyToSquare(areaOfSquare); // => 25
Функції зворотного виклику також можна записати як функціональний вираз, анонімний функціональний вираз або стрілковий функціональний вираз:
applyToSquare(function squarePerimeter(side) {
return side * 4;
});
applyToSquare(function (side) {
return side * 4;
});
applyToSquare((side) => {
return side * 4;
});
Вказівки
Ми створюємо новий онлайн-портал, через який наші клієнти зможуть замовляти свіжі фрукти просто в продавця.
У продавця є API, за допомогою якого ми можемо перевірити, чи є в нього потрібні нашим клієнтам запаси фруктів.
Нам потрібно створити невеличку бібліотеку функцій для роботи з API продавця.
1. Повідомте клієнта про успішне замовлення
Портал має повідомляти клієнта, якщо його замовлення виконано успішно.
Визначте функцію зворотного виклику onSuccess, яку буде викликано, якщо замовлення вдалося виконати, бо в продавця вистачило фруктів на складі.
Ця функція повинна викликати імпортовану функцію notify, передаючи їй { message: 'SUCCESS' }, щоб повідомити клієнта про успішне замовлення.
onSuccess();
// => `notify` called with `{ message: 'SUCCESS' }`
2. Повідомте клієнта про невдале замовлення
Портал має повідомляти клієнта, якщо його замовлення виконати не вдалося.
Визначте функцію зворотного виклику onError, яку буде викликано, якщо замовлення не вдалося виконати, бо в продавця немає цих фруктів на складі або сталася помилка.
Ця функція повинна викликати імпортовану функцію notify, передаючи їй { message: 'ERROR' }, щоб повідомити клієнта про невдале замовлення.
onError();
// => `notify` called with `{ message: 'ERROR' }`
3. Створіть обгортку для функції замовлення з API продавця
Замовлення фруктів розміщуються через API продавця за допомогою наданої функції order.
Ця функція приймає три аргументи: запит, що містить variety і quantity замовлених фруктів, функцію зворотного виклику, яку буде викликано, якщо замовлення успішне, і функцію зворотного виклику, яку буде викликано, якщо під час замовлення сталася помилка.
Ми хочемо захистити свою кодову базу від можливих зовнішніх змін, тому вирішуємо загорнути виклик функції order у нову функцію з назвою orderFromGrocer.
Реалізуйте функцію orderFromGrocer, яка намагається розмістити замовлення через виклик функції order з API продавця, і не забудьте передати далі аргументи, отримані orderFromGrocer, у цей виклик API.
Запит має форму обʼєкта:
const query = {
variety: string,
quantity: number,
};
orderFromGrocer(
{ variety: 'pear', quantity: 12 },
exampleSuccessCallback,
exampleErrorCallback,
);
// => `order` was called with the query and the callbacks
4. Спростіть обробку розміщених замовлень
Тепер наші клієнти можуть розміщувати замовлення на фрукти через наш портал, але ми помічаємо, що викликаємо функцію orderFromGrocer у багатьох різних місцях нашої кодової бази, і щоразу доводиться передавати як аргументи query і дві функції callback.
Побачивши нагоду відрефакторити код, ми думаємо, що було б простіше розміщувати замовлення, передаючи лише variety і quantity потрібних фруктів.
Визначте допоміжну функцію postOrder, яка приймає variety і quantity як аргументи й намагається розмістити замовлення в продавця.
postOrder('peach', 100);
// => order placed for 100 peaches
Навчальна вправа
