前端异步同步处理应用场景及优化详细讲解和举例

var arr = [1, 2, 3, 4, 5];  
for (var i = 0; i < arr.length; i++) {  
  console.log(arr[i]);  
}

var xhr = new XMLHttpRequest();  
xhr.open('GET', 'http://example.com/api/data', true); // true表示异步请求  
xhr.onreadystatechange = function() {  
  if (xhr.readyState === 4 && xhr.status === 200) {  
    console.log(xhr.responseText); // 处理服务器返回的数据  
  }  
};  
xhr.send();

setTimeout(function() {  
  console.log('This message is displayed after 1 second');  
}, 1000); // 1000毫秒后执行函数

// 定义一个函数，它接受一个回调函数作为参数  
function waitAndExecute(callback, delay) {  
  // 使用setTimeout来模拟异步等待  
  setTimeout(() => {  
    // 调用回调函数  
    callback();  
  }, delay); // 延迟时间，以毫秒为单位  
}  
  
// 定义一个回调函数  
function sayHello() {  
  console.log('Hello, world!');  
}  
  
// 调用waitAndExecute函数，并传递回调函数和延迟时间  
waitAndExecute(sayHello, 2000); // 等待2秒后执行sayHello函数  
  
// 程序的其他部分可以在这里继续执行，不会阻塞等待setTimeout完成  
console.log('等待2秒后将会打印"Hello, world!"');

function fetchUser(userId, callback) {  
  // 假设这是一个异步操作，比如从服务器获取用户数据  
  setTimeout(() => {  
    const user = { id: userId, name: 'John Doe' };  
    callback(null, user);  
  }, 1000);  
}  
  
function fetchPosts(userId, callback) {  
  // 假设这也是一个异步操作，比如从服务器获取用户的帖子  
  setTimeout(() => {  
    const posts = [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }];  
    callback(null, posts);  
  }, 1000);  
}  
  
// 回调地狱的例子  
fetchUser(1, (err, user) => {  
  if (err) {  
    console.error('Error fetching user:', err);  
    return;  
  }  
    
  fetchPosts(user.id, (err, posts) => {  
    if (err) {  
      console.error('Error fetching posts:', err);  
      return;  
    }  
      
    console.log('User:', user);  
    console.log('Posts:', posts);  
  });  
});

function fetchUser(userId) {  
  return new Promise((resolve, reject) => {  
    // ...异步操作  
    resolve({ id: userId, name: 'John Doe' });  
  });  
}  
  
function fetchPosts(userId) {  
  return new Promise((resolve, reject) => {  
    // ...异步操作  
    resolve([{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }]);  
  });  
}  
  
fetchUser(1)  
  .then(user => fetchPosts(user.id))  
  .then(posts => {  
    console.log('User:', user);  
    console.log('Posts:', posts);  
  })  
  .catch(err => {  
    console.error('Error:', err);  
  });

async function fetchUserData(userId) {  
  try {  
    const user = await fetchUser(userId);  
    const posts = await fetchPosts(user.id);  
    console.log('User:', user);  
    console.log('Posts:', posts);  
  } catch (err) {  
    console.error('Error:', err);  
  }  
}  
  
fetchUserData(1);

function fetchData() {  
  return new Promise((resolve, reject) => {  
    setTimeout(() => {  
      const data = 'Some data';  
      resolve(data); // 异步操作成功，返回数据  
    }, 1000);  
  });  
}  
  
fetchData().then(data => {  
  console.log(data); // 处理数据  
}).catch(error => {  
  console.error(error); // 处理错误  
});

async function fetchData() {  
  try {  
    const data = await new Promise((resolve, reject) => {  
      setTimeout(() => {  
        const data = 'Some data';  
        resolve(data); // 异步操作成功，返回数据  
      }, 1000);  
    });  
    console.log(data); // 处理数据  
  } catch (error) {  
    console.error('Error fetching data:', error); // 处理错误  
  }  
}  
  
fetchData();