在现代化的前端开发中，异步编程无处不在。例如，获取数据、更新用户界面、执行密集计算等，几乎所有涉及延迟的操作都需要使用异步编程来处理。ES6 (ECMAScript 2015) 引入的 Promise 以及 async/await 是 JavaScript 异步编程的两个主要解决方案，但在使用异步编程时，仍有一些常见问题需要注意。
问题一：回调地狱
将一个异步调用链式化可以使得代码更易读、更好维护。然而，这也会导致回调出现嵌套的情况，常常称作“回调地狱”。这种情况下的代码可读性很差，也不好维护。
// www.javascriptcn.com code example
function getData(url, callback) {
return fetch(url, { method: 'GET' })
.then(res => res.json())
.then(data => callback(data))
.catch(error => console.log(error));
}
getData('https://jsonplaceholder.typicode.com/posts', function(posts){
// Do something with posts
getData(`https://jsonplaceholder.typicode.com/comments?postId=${posts[0].id}`, function(comments){
// Do something with comments
getData(`https://jsonplaceholder.typicode.com/users/${comments[0].userId}`, function(user){
// Do something with user
});
});
});解决方案
使用 Promise 可以轻松地将代码转换为“扁平化”的形式，从而避免回调地狱的出现。
// www.javascriptcn.com code example
function getData(url) {
return fetch(url, { method: 'GET' })
.then(res => res.json())
.catch(error => console.log(error));
}
getData('https://jsonplaceholder.typicode.com/posts')
.then(posts => getData(`https://jsonplaceholder.typicode.com/comments?postId=${posts[0].id}`))
.then(comments => getData(`https://jsonplaceholder.typicode.com/users/${comments[0].userId}`))
.then(user => {
// Do something with user
})
.catch(error => console.log(error));问题二：错误处理
在异步编程中，错误的处理比同步编程复杂许多。尤其是在错误发生时，它可能不会像同步代码那样立即发生影响，这也意味着你可能需要特别小心地处理错误，以便防止应用程序崩溃。
解决方案
在处理异步操作时，使用 .catch() 方法可以轻松地捕获错误并执行处理代码，从而避免程序崩溃。
// www.javascriptcn.com code example
function getData(url) {
return fetch(url, { method: 'GET' })
.then(res => res.json())
.catch(error => console.log(error));
}
getData('https://jsonplaceholder.typicode.com/posts')
.then(posts => getData(`https://jsonplaceholder.typicode.com/comments?postId=${posts[0].id}`))
.then(comments => getData(`https://jsonplaceholder.typicode.com/users/${comments[0].userId}`))
.then(user => {
// Do something with user
})
.catch(error => console.log(error));问题三：异步代码的顺序
异步操作是在主线程之外的线程中运行，所以无法确保异步调用的顺序。当处理多个异步操作时，可能需要等待前一个操作完成后再进行下一个操作，特别是当一个操作的结果取决于之前的操作结果时。
// www.javascriptcn.com code example
function getData(url) {
return fetch(url, { method: 'GET' })
.then(res => res.json())
.catch(error => console.log(error));
}
Promise.all([
getData('https://jsonplaceholder.typicode.com/posts'),
getData('https://jsonplaceholder.typicode.com/comments'),
getData('https://jsonplaceholder.typicode.com/users')
])
.then(([posts, comments, users]) => {
// Do something with all data
})
.catch(error => console.log(error));解决方案
使用 Promise 中提供的 .then() 方法和 async/await 可以确保异步调用的顺序。通过将异步操作包装在一个函数内部，可以更好地在各个操作之间控制顺序。
// www.javascriptcn.com code example
function getData(url) {
return fetch(url, { method: 'GET' })
.then(res => res.json())
.catch(error => console.log(error));
}
async function getDataInOrder() {
const posts = await getData('https://jsonplaceholder.typicode.com/posts');
const comments = await getData(`https://jsonplaceholder.typicode.com/comments?postId=${posts[0].id}`);
const user = await getData(`https://jsonplaceholder.typicode.com/users/${comments[0].userId}`);
// Do something with data in order
}
getDataInOrder()
.catch(error => console.log(error));总结
使用 Promise 和 async/await 可以避免回调地狱、处理错误和控制异步代码的顺序。另外，在异步编程过程中，一定要注意异常处理，确保异步操作不会破坏整个应用程序。
以上列举的解决方案只是异步编程中的一部分。掌握好这些技术之后，在实际开发过程中应该尝试更多的应用，以增强对异步端对端环节的可靠性和效率。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64adf0c748841e98949e69db