Пример обратного вызова, обещания и асинхронного ожидания в Javascript.

Мы видели много разных объяснений обратного вызова в JavaScript, но на этот раз мы узнаем больше на примерах, а не на определениях. Я собрал много разных примеров для обучения, и вы можете практиковать их, чтобы обрести уверенность.

Мы рассмотрим список концепций, упомянутых ниже.

Перезвонить
Ад обратного вызова
Обещать
Цепочка обещаний
Асинхронный — ожидайте

обратный вызов, обещание и асинхронное ожидание — это способ асинхронного выполнения javascript.

Обратный вызов — это функция, которая передается как аргумент другой функции.

Обещать-

Это объект, представляющий завершение или сбой асинхронной задачи. Он используется, чтобы избежать ада обратных вызовов и делает наш код более читабельным. Он имеет три состояния: ожидание, разрешение и отклонение.

Асинхронное ожидание-

Это снова способ обработки асинхронной операции в JavaScript. Это современный синтаксис обработки асинхронных задач. Это расширение обещаний, которое упрощает чтение и запись нашего кода. Ключевое слово async используется перед объявлением функции, где нам нужно выполнить асинхронную задачу и вернуть обещание. Ключевое слово Await используется внутри функции async, где нам нужно приостановить выполнение до тех пор, пока обещание не будет выполнено.

Пример 1: (обратный вызов)

function getUser(callback){
const user= {id: 123, name: "john"};
callback(user);
}
getUser(function(user){
console.log(user);
})

// output: {id: 123, name: "john"}




// example

function calc(a,b,method){
  return method(a,b);
}

function add(a,b){
  return a+b;
}

function subs(a,b){
  return a-b;
}

console.log(calc(2,3,add))
console.log(calc(4,3,subs))

// 5
// 1

Пример 2: (обратный вызов)

//we have list of users:
const usersDatabase = [
  { id: 123, name: "Bittu" },
  { id: 456, name: "Ravi" },
  { id: 789, name: "vivek" },
];

// get user details
// input=> id:4 -> output (id: 4,name:"bittu")  -- complete object

function getUser(userId, callback){
  let user;
  usersDatabase.forEach((data)=>{
    if(data.id===userId){
      user= data;
    }
  })

  if(user){
  callback(user);
  }
  else{
    callback(null)
  }
}

getUser(123,function(user){
  if(user){
  console.log(user);
  }
  else{
    console.log("user not found")
  }
})

//output: {id: 123, name: "Bittu"} 
// try passing some different id which is not present in array of object in getUser method



//other  example
function getUser(id, cb){
    setTimeout(() => {
        console.log("reading data");
        const user= {id, name: `User ${id}`};
        console.log('before callback function called')
        cb(user);
        console.log('after callback function called')
    }, 2000);
}

getUser(1, function user(user){
    console.log(user)
});

Пример 3: (ад обратных вызовов)

const usersDatabase = [
  { userId: 123, name: "Bittu" },
  { userId: 456, name: "Ravi" },
  { userId: 789, name: "Vivek" },
];

const orderDetailsDatabase = [
  { orderId: 101, userId: 123, items: ['burger', 'fries', 'coke'] },
  { orderId: 102, userId: 456, items: ['burger', 'fries', 'coke'] },
  { orderId: 103, userId: 789, items: ['burger', 'fries', 'coke'] },
];

const orderStatusDatabase = [
  { orderId: 101, cookedStatus: 'ready' },
  { orderId: 102, cookedStatus: 'notReady' },
  { orderId: 103, cookedStatus: 'ready' },
];


// input: id --> getUserDetails  --> output: userId, name
// input: userId --> getOrderDetails --> output: orderId,items
// input: orderId --> getOrderStatus --> output: cookedStatus




function getUserDetails(id, callback) {
  let user;
  console.log("input id: ", id)
  usersDatabase.forEach((data) => {
    if (data.userId === id) {
      user = data;
    }
  })
  console.log("user", user)
  callback(user);
}

function getOrderDetails(orderId, callback) {
  let orderDetails;
  orderDetailsDatabase.forEach((data) => {
    if (data.userId === orderId) {
      orderDetails = data;
    }
  })
  console.log("order", orderDetails)
  callback(orderDetails)
}

function getOrderStatus(orderId) {
  let orderStatusDetails;
  orderStatusDatabase.forEach((data) => {
    if (data.orderId === orderId) {
      orderStatusDetails = data;
    }
  })
  console.log("Order Status", orderStatusDetails)
}




getUserDetails(123, function (user) {
  getOrderDetails(user.userId, function (orders) {
    getOrderStatus(orders.orderId)
  })
})

// output-- 
// input id: 123
// user: {userId: 123, name: "Bittu"}
// order: {orderId: 101, userId: 123, items:["burger", "fries", "coke"]}
// Order Status: {orderId: 101, cookedStatus: "ready"}

Пример 4: (обратный вызов с функцией setTimeout)

const usersDatabase = [
  { userId: 123, name: "Bittu" },
  { userId: 456, name: "Ravi" },
  { userId: 789, name: "Vivek" },
];


function getUserDetails(id, callback) {
  setTimeout(function () {
    let user;
    usersDatabase.forEach((data) => {
      if (data.userId === id) {
        user = data;
      }
    })
    callback(user)
  }, 3000)
}


getUserDetails(123, function (user) {
  console.log("user id: ", user)
})

// user id : {userId: 123, name: "Bittu"}

Пример 5: (ад обратный вызов с функцией setTimeout)

//we have list of users:
const usersDatabase = [
  { userId: 123, name: "Bittu" },
  { userId: 456, name: "Ravi" },
  { userId: 789, name: "Vivek" },
];

const orderDetailsDatabase = [
  { orderId: 101, userId: 123, items: ['burger', 'fries', 'coke'] },
  { orderId: 102, userId: 456, items: ['burger', 'fries', 'coke'] },
  { orderId: 103, userId: 789, items: ['burger', 'fries', 'coke'] },
];

const orderStatusDatabase = [
  { orderId: 101, cookedStatus: 'ready' },
  { orderId: 102, cookedStatus: 'notReady' },
  { orderId: 103, cookedStatus: 'ready' },
];


// input: id --> getUserDetails  --> output: userId, name
// input: userId --> getOrderDetails --> output: orderId,items
// input: orderId --> getOrderStatus --> output: cookedStatus




function getUserDetails(id, callback) {
  setTimeout(function () {
    let user;
    console.log("input id: ", id)
    usersDatabase.forEach((data) => {
      if (data.userId === id) {
        user = data;
      }
    })
    console.log("user", user)
    callback(user);
  }, 2000)
}

function getOrderDetails(orderId, callback) {

  setTimeout(function () {
    let orderDetails;
    orderDetailsDatabase.forEach((data) => {
      if (data.userId === orderId) {
        orderDetails = data;
      }
    })
    console.log("order", orderDetails)
    callback(orderDetails)
  }, 5000)
}

function getOrderStatus(orderId) {
  setTimeout(function () {
    let orderStatusDetails;
    orderStatusDatabase.forEach((data) => {
      if (data.orderId === orderId) {
        orderStatusDetails = data;
      }
    })
    console.log("Order Status", orderStatusDetails)
  }, 3000)
}


getUserDetails(123, function (user) {
  getOrderDetails(user.userId, function (orders) {
    getOrderStatus(orders.orderId)
  })
})

// output-
// input id: 123
// user: {userId: 123, name: "Bittu"}
// order: {orderId: 101, userId: 123, items:["burger", "fries", "coke"]}
// Order Status: {orderId: 101, cookedStatus: "ready"}

Пример 6: (асинхронный JS для практики)

// *******
console.log("first");

setTimeout(function(){
  console.log("second");
});

console.log("third")


// first 
// third
// second


// now we want to print first,second,third in this order
// doesn't matter how much time this setTimeout takes


console.log("first");

function test(callback){
  setTimeout(function () {
    console.log("second");
    callback()
  }, 1000);

}

test(function(){
    console.log("third")
})

Пример 7: (Простое обещание)

const myPromise = new Promise((resolve, reject) => {
    const randomNum = Math.round(Math.random() * 10);
    if (randomNum < 5) {
      resolve(`Success! Random number: ${randomNum}`);
    }
    else {
      reject(`Error! Random number: ${randomNum}`);
    }       
});

myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

Пример 8: (Обещание с setTimeout)

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const randomNum = Math.round(Math.random() * 10);
    if (randomNum < 5) {
      resolve(`Success! Random number: ${randomNum}`);
    }
    else {
      reject(`Error! Random number: ${randomNum}`);
    }
  }, 1000);
});

myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

Пример 9: (Обещание — Fetch API)

function fetchData(url) {
  return fetch(url);
}

const apiUrl = 'https://jsonplaceholder.typicode.com/posts/1';

fetchData(apiUrl)
  .then(response => {
    return response.json(); 
  })
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.log('Error:', error);
  });

Пример 10: (асинхронный — ожидание)

const apiUrl = 'https://jsonplaceholder.typicode.com/posts/1';


async function fetchData11(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log('Data received:', data);
  } catch (error) {
    console.log('Error:', error);
  }
}

fetchData11(apiUrl);

Спасибо, что прочитали полностью.

Приятного обучения!!

Пример обратного вызова, обещания и асинхронного ожидания в Javascript.

Вопросы по теме