چرا Promise و کاربردهاش

برای حل مشکل Asynchronous توی جاوااسکریپت. قبل از Promise برنامه نویس ها از callback استفاده میکردند که مشکلات زیادی داشته از جمله callback hell

getUserData(1, function(user) {
  getPostsByUser(user.id, function(posts) {
    getCommentsForPost(posts[0].id, function(comments) {
      console.log('Comments:', comments);
    }, function(error) {
      console.error('Error fetching comments:', error);
    });
  }, function(error) {
    console.error('Error fetching posts:', error);
  });
}, function(error) {
  console.error('Error fetching user:', error);
});

getUserData(1, function(user) {

getPostsByUser(user.id, function(posts) {

getCommentsForPost(posts[0].id, function(comments) {

console.log('Comments:', comments);

}, function(error) {

console.error('Error fetching comments:', error);

});

}, function(error) {

console.error('Error fetching posts:', error);

});

}, function(error) {

console.error('Error fetching user:', error);

});

کد بالا رو در نظرم بگیرید. توی هر مرحله باید callback تودرتو نوشت که باعث میشه. کد کثیف و اگر توی کد داخلی باگی پیدا بشه پیدا کردن و فیکس کردنش سخته.

توی Promise میتونیم به صورت زنجیروار همه عملیاتها رو مدیریت کرد بجای ساختار تودرتو. گارانتی شده که یا عملیات موفق میشه و تابع resolve اجرا میشه یا عملیات ناموفق خواهد بود و تابع reject اجرا میشه. یعنی به راحتی میتونی تمامی حالات رو با تابع then و catch مدیریت کنیم. حتی اگر عملیات به دلیل کندی زیاد طول بکشه.

مثال بالا رو میتونیم زنجیری مدیریت کنیم

getUser(1)
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0].id))
  .then(comments => console.log('Comments:', comments))
  .catch(error => console.error('Error:', error));

getUser(1)

.then(user => getPosts(user.id))

.then(posts => getComments(posts[0].id))

.then(comments => console.log('Comments:', comments))

.catch(error => console.error('Error:', error));

یکی از کاربردهاش API call هست

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log('Posts:', data))
  .catch(error => console.error('API Error:', error));

fetch('https://jsonplaceholder.typicode.com/posts')

.then(response => response.json())

.then(data => console.log('Posts:', data))

.catch(error => console.error('API Error:', error));

توی مثال زیر حتی چندین API با هم صدا زده میشه و میبینیم که چقدر خوانا و راحت نوشته میشه:

Promise.all([
  fetch('https://api.example.com/user/1'),
  fetch('https://api.example.com/posts'),
  fetch('https://api.example.com/comments')
])
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(data => {
    console.log('User:', data[0]);
    console.log('Posts:', data[1]);
    console.log('Comments:', data[2]);
  })
  .catch(error => console.error('Error in one of the requests:', error));

Promise.all([

fetch('https://api.example.com/user/1'),

fetch('https://api.example.com/posts'),

fetch('https://api.example.com/comments')

])

.then(responses => Promise.all(responses.map(res => res.json())))

.then(data => {

console.log('User:', data[0]);

console.log('Posts:', data[1]);

console.log('Comments:', data[2]);

})

.catch(error => console.error('Error in one of the requests:', error));

دیدگاهتان را بنویسید لغو پاسخ