在前端开发中，我们经常会遇到需要异步执行的任务，比如发送网络请求、读取本地文件等等。而在 JavaScript 中，异步任务通常通过回调函数来处理。但是，回调函数嵌套过多的情况下，代码可读性和可维护性都会变得很差。为了解决这个问题，ES6 引入了 Promise 和 async/await 两种语法，可以更优雅地处理异步任务。
Promise
Promise 是一种处理异步任务的方式，它可以将异步操作包装成一个对象，从而使得代码更易于理解和维护。Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当异步操作完成时，Promise 对象的状态会从 pending 变为 fulfilled 或 rejected，同时会调用相应的回调函数。
下面是一个使用 Promise 的例子，假设我们需要从服务器上获取一张图片：
// javascriptcn.com 代码示例
function loadImage(url) {
return new Promise(function(resolve, reject) {
var image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
loadImage('https://example.com/image.jpg').then(function(image) {
document.body.appendChild(image);
}).catch(function(error) {
console.error(error);
});在这个例子中，loadImage 函数返回一个 Promise 对象，该对象包装了异步加载图片的操作。当图片加载完成时，Promise 对象的状态会变为 fulfilled，并调用 then 方法中的回调函数；如果加载失败，则状态会变为 rejected，并调用 catch 方法中的回调函数。
async/await
async/await 是 ES8 中引入的语法，它是基于 Promise 的语法糖，可以更方便地处理异步任务。async/await 的作用是让异步代码看起来像同步代码，从而提高代码的可读性和可维护性。
下面是一个使用 async/await 的例子，假设我们需要从服务器上获取一组数据：
// javascriptcn.com 代码示例
async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
fetchData('https://example.com/data.json').then(function(data) {
console.log(data);
});在这个例子中，fetchData 函数返回一个 Promise 对象，该对象包装了异步获取数据的操作。在函数体内部，我们使用了 async 和 await 关键字，分别表示该函数是异步函数，以及需要等待 Promise 对象的状态变为 fulfilled 才能继续执行后面的代码。当 Promise 对象的状态变为 rejected 时，会抛出异常并被 catch 语句捕获。
改写回调风格的代码
下面是一个使用回调函数的例子，假设我们需要读取本地文件并显示在页面上：
// javascriptcn.com 代码示例
function readFile(filename, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', filename, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
callback(null, xhr.responseText);
} else {
callback(new Error(xhr.statusText), null);
}
}
};
xhr.onerror = function() {
callback(new Error('Network error'), null);
};
xhr.send();
}
readFile('data.txt', function(error, data) {
if (error) {
console.error(error);
} else {
document.body.textContent = data;
}
});在这个例子中，readFile 函数使用了回调函数来处理异步操作。当文件读取成功时，调用 callback 函数并将数据作为参数传递；当文件读取失败时，调用 callback 函数并将错误信息作为参数传递。
我们可以使用 Promise 或 async/await 来改写这段代码。下面是使用 Promise 的例子：
// javascriptcn.com 代码示例
function readFile(filename) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', filename, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(new Error(xhr.statusText));
}
}
};
xhr.onerror = function() {
reject(new Error('Network error'));
};
xhr.send();
});
}
readFile('data.txt').then(function(data) {
document.body.textContent = data;
}).catch(function(error) {
console.error(error);
});在这个例子中，readFile 函数返回一个 Promise 对象，该对象包装了异步读取文件的操作。当文件读取成功时，Promise 对象的状态会变为 fulfilled，并调用 then 方法中的回调函数；当文件读取失败时，状态会变为 rejected，并调用 catch 方法中的回调函数。
下面是使用 async/await 的例子：
// javascriptcn.com 代码示例
async function readFile(filename) {
try {
const response = await fetch(filename);
return response.text();
} catch (error) {
console.error(error);
}
}
readFile('data.txt').then(function(data) {
document.body.textContent = data;
});在这个例子中，readFile 函数使用了 async/await 关键字，让异步代码看起来像同步代码。在函数体内部，我们使用了 fetch 函数来获取文件内容，然后使用 await 等待 Promise 对象的状态变为 fulfilled。当 Promise 对象的状态变为 rejected 时，会抛出异常并被 catch 语句捕获。
总结
Promise 和 async/await 是处理异步任务的两种常用方式。它们可以将异步操作包装成一个对象，并提供更优雅的语法来处理异步任务。使用 Promise 和 async/await 可以让代码更易于理解和维护，同时提高开发效率。在实际开发中，我们应该根据具体情况选择合适的方式来处理异步任务。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6577f7f9d2f5e1655d1c6a12