JavaScript期约（Promise）在网络请求中的应用
JavaScript 期约（Promise）基础概念
在深入探讨 JavaScript 期约（Promise）在网络请求中的应用之前，我们先来了解一下 Promise 的基本概念。Promise 是 JavaScript 中处理异步操作的一种方式，它代表了一个异步操作的最终完成（或失败）及其结果值。
Promise 的状态
Promise 有三种状态：
- Pending（进行中）：初始状态，既没有被兑现（resolved），也没有被拒绝（rejected）。在这个状态下，异步操作正在执行，结果还未确定。
- Fulfilled（已兑现）：意味着异步操作成功完成，Promise 有了一个 resolved 的值。这个值就是异步操作成功返回的结果。
- Rejected（已拒绝）：表示异步操作失败，Promise 有了一个 rejection 的原因，通常是一个错误对象。
一旦 Promise 从 Pending 状态转换到 Fulfilled 或 Rejected 状态，它就不会再改变，这就是所谓的“已敲定（settled）”状态。
创建 Promise
在 JavaScript 中，可以使用 new Promise() 构造函数来创建一个 Promise 对象。它接受一个执行器函数作为参数，执行器函数会立即被调用。执行器函数接受两个参数：resolve 和 reject。
const myPromise = new Promise((resolve, reject) => {
// 模拟异步操作
setTimeout(() => {
const success = true;
if (success) {
resolve('操作成功');
} else {
reject(new Error('操作失败'));
}
}, 1000);
});
在上述代码中，我们使用 setTimeout 模拟了一个异步操作，1 秒后根据 success 的值决定是调用 resolve 还是 reject。
处理 Promise
Promise 提供了 .then()、.catch() 和 .finally() 方法来处理异步操作的结果。
.then()方法：用于处理 Promise 被 resolved 的情况。它接受一个回调函数作为参数，这个回调函数会在 Promise 被 resolved 时被调用，并且会传入 resolved 的值。
myPromise.then((result) => {
console.log(result); // 输出：操作成功
});
.catch()方法：用于处理 Promise 被 rejected 的情况。它接受一个回调函数，该回调函数会在 Promise 被 rejected 时被调用，并且会传入 rejection 的原因。
myPromise.catch((error) => {
console.error(error.message); // 输出：操作失败
});
.finally()方法：无论 Promise 最终是被 resolved 还是被 rejected，.finally()方法中的回调函数都会被执行。
myPromise.finally(() => {
console.log('无论成功或失败，我都会被执行');
});
网络请求与异步操作
在前端开发中，网络请求是常见的异步操作。例如，从服务器获取数据、向服务器提交数据等。传统上，我们可能会使用回调函数来处理网络请求的结果，但回调函数在处理多个异步操作时容易出现回调地狱（callback hell）的问题。
回调地狱示例
假设我们需要依次进行三个网络请求，每个请求的结果依赖于前一个请求的结果，使用回调函数可能会写成这样：
function firstRequest(callback) {
// 模拟网络请求
setTimeout(() => {
const result1 = '第一个请求的结果';
callback(result1);
}, 1000);
}
function secondRequest(result1, callback) {
setTimeout(() => {
const result2 = result1 + '，用于第二个请求';
callback(result2);
}, 1000);
}
function thirdRequest(result2, callback) {
setTimeout(() => {
const result3 = result2 + '，用于第三个请求';
callback(result3);
}, 1000);
}
firstRequest((result1) => {
secondRequest(result1, (result2) => {
thirdRequest(result2, (result3) => {
console.log(result3);
});
});
});
上述代码中，回调函数层层嵌套，随着异步操作的增多，代码的可读性和维护性会急剧下降。
Promise 在网络请求中的应用
Promise 为解决网络请求中的异步操作提供了一种更优雅的方式。在现代 JavaScript 中，fetch API 是进行网络请求的常用方式，它返回一个 Promise 对象。
使用 fetch 进行简单网络请求
fetch('https://example.com/api/data')
.then((response) => {
if (!response.ok) {
throw new Error('网络请求失败');
}
return response.json();
})
.then((data) => {
console.log(data);
})
.catch((error) => {
console.error(error.message);
});
在上述代码中，我们使用 fetch 发起一个 GET 请求到 https://example.com/api/data。如果请求成功，fetch 返回的 Promise 会被 resolved，并且 response 对象作为参数传递给第一个 .then() 回调函数。在这个回调函数中，我们检查 response.ok 判断请求是否成功，如果失败则抛出一个错误。然后，我们调用 response.json() 将响应数据解析为 JSON 格式，这也是一个异步操作，会返回一个新的 Promise。第二个 .then() 回调函数会在这个新的 Promise 被 resolved 时被调用，此时我们就可以处理解析后的 JSON 数据了。如果在整个过程中任何一步出现错误，.catch() 回调函数会捕获并处理错误。
多个网络请求并发执行
有时候我们需要同时发起多个网络请求，并且在所有请求都完成后再进行下一步操作。Promise 提供了 Promise.all() 方法来实现这一点。
const request1 = fetch('https://example.com/api/data1');
const request2 = fetch('https://example.com/api/data2');
Promise.all([request1, request2])
.then((responses) => {
return Promise.all(responses.map((response) => response.json()));
})
.then((data) => {
const data1 = data[0];
const data2 = data[1];
console.log('合并后的数据：', { data1, data2 });
})
.catch((error) => {
console.error(error.message);
});
在上述代码中，我们首先创建了两个 fetch 请求 request1 和 request2。然后，使用 Promise.all() 方法传入这两个请求组成的数组。Promise.all() 会返回一个新的 Promise，只有当数组中的所有 Promise（即 request1 和 request2）都被 resolved 时，这个新的 Promise 才会被 resolved，并且 resolved 的值是一个包含所有已 resolved 值的数组，也就是 responses。接下来，我们使用 map 方法对 responses 数组中的每个 response 调用 response.json() 方法，并再次使用 Promise.all() 等待所有解析操作完成。最后，我们可以在第二个 .then() 回调函数中处理解析后的两个数据。
多个网络请求顺序执行
如果我们需要按照顺序依次执行多个网络请求，可以通过将前一个请求的 then 方法返回值作为下一个请求的输入来实现。
function sequentialRequests() {
let result = null;
return fetch('https://example.com/api/data1')
.then((response) => {
if (!response.ok) {
throw new Error('第一个请求失败');
}
return response.json();
})
.then((data1) => {
result = data1;
return fetch('https://example.com/api/data2', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ data1: result })
});
})
.then((response) => {
if (!response.ok) {
throw new Error('第二个请求失败');
}
return response.json();
})
.then((data2) => {
console.log('第二个请求的结果：', data2);
})
.catch((error) => {
console.error(error.message);
});
}
sequentialRequests();
在上述代码中，首先发起对 https://example.com/api/data1 的 GET 请求，成功后将解析后的 data1 赋值给 result，然后发起对 https://example.com/api/data2 的 POST 请求，将 data1 作为请求体发送。第二个请求成功后，处理其返回的数据。如果任何一个请求失败，.catch() 会捕获并处理错误。
自定义 Promise 封装网络请求
除了使用 fetch 这种已经返回 Promise 的 API，我们也可以自定义 Promise 来封装网络请求，以满足特定的需求。
基于 XMLHttpRequest 的 Promise 封装
在 fetch API 出现之前，XMLHttpRequest 是进行网络请求的主要方式。我们可以将它封装在一个 Promise 中。
function customFetch(url, options = {}) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(options.method || 'GET', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status >= 200 && xhr.status < 300) {
try {
const data = JSON.parse(xhr.responseText);
resolve(data);
} catch (error) {
resolve(xhr.responseText);
}
} else {
reject(new Error('网络请求失败，状态码：' + xhr.status));
}
}
};
xhr.onerror = function () {
reject(new Error('网络请求发生错误'));
};
if (options.headers) {
for (const key in options.headers) {
xhr.setRequestHeader(key, options.headers[key]);
}
}
if (options.body) {
xhr.send(options.body);
} else {
xhr.send();
}
});
}
customFetch('https://example.com/api/data')
.then((data) => {
console.log(data);
})
.catch((error) => {
console.error(error.message);
});
在上述代码中，我们定义了 customFetch 函数，它接受 url 和 options 作为参数。在函数内部，创建了一个 XMLHttpRequest 对象，并设置其 open 方法和事件监听器。当 readystatechange 事件触发且 readyState 为 DONE 时，根据状态码判断请求是否成功，成功则尝试解析 JSON 数据并调用 resolve，失败则调用 reject。onerror 事件用于捕获网络请求过程中的错误。最后，根据 options 中的 headers 和 body 发送请求。
Promise 的错误处理策略
在使用 Promise 进行网络请求时，合理的错误处理至关重要。
全局错误处理
在一些应用场景中，我们可能希望有一个全局的错误处理机制来捕获所有未处理的 Promise 错误。可以通过监听 unhandledrejection 事件来实现。
window.addEventListener('unhandledrejection', (event) => {
console.error('未处理的 Promise 拒绝：', event.reason);
});
上述代码会在有未处理的 Promise 被 rejected 时，将错误信息打印到控制台。
链式调用中的错误处理
在 Promise 的链式调用中，错误会自动传递到下一个 .catch() 块。
fetch('https://example.com/nonexistentapi')
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => {
console.error('捕获到错误：', error.message);
});
在上述代码中，由于请求的 API 不存在，fetch 返回的 Promise 会被 rejected，错误会沿着链式调用传递到 .catch() 块中进行处理。
Promise 与 async/await
async/await 是 ES2017 引入的异步函数语法，它基于 Promise 构建，提供了一种更简洁、同步风格的异步代码书写方式。
async 函数基础
async 函数是一种异步函数，它始终返回一个 Promise。如果函数的返回值不是 Promise，JavaScript 会自动将其包装成一个已 resolved 的 Promise。
async function asyncFunction() {
return '异步函数的返回值';
}
asyncFunction().then((result) => {
console.log(result); // 输出：异步函数的返回值
});
await 关键字
await 关键字只能在 async 函数内部使用。它用于暂停 async 函数的执行，等待一个 Promise 被 resolved 或 rejected。
async function fetchData() {
try {
const response = await fetch('https://example.com/api/data');
if (!response.ok) {
throw new Error('网络请求失败');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error.message);
}
}
fetchData();
在上述代码中，await fetch('https://example.com/api/data') 会暂停 fetchData 函数的执行，直到 fetch 返回的 Promise 被 resolved 或 rejected。如果请求成功，response 会被赋值，然后检查 response.ok，如果失败则抛出错误。接着，await response.json() 又会暂停函数执行，等待 JSON 解析完成。如果整个过程中出现错误，会被 catch 块捕获并处理。
使用 async/await 处理并发和顺序请求
- 并发请求
async function concurrentRequests() {
const request1 = fetch('https://example.com/api/data1');
const request2 = fetch('https://example.com/api/data2');
const [response1, response2] = await Promise.all([request1, request2]);
const data1 = await response1.json();
const data2 = await response2.json();
console.log('合并后的数据：', { data1, data2 });
}
concurrentRequests();
在上述代码中，首先创建两个 fetch 请求，然后使用 Promise.all 和 await 等待两个请求都完成，再分别解析响应数据。
- 顺序请求
async function sequentialAsyncRequests() {
let result = null;
const response1 = await fetch('https://example.com/api/data1');
if (!response1.ok) {
throw new Error('第一个请求失败');
}
result = await response1.json();
const response2 = await fetch('https://example.com/api/data2', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ data1: result })
});
if (!response2.ok) {
throw new Error('第二个请求失败');
}
const data2 = await response2.json();
console.log('第二个请求的结果：', data2);
}
sequentialAsyncRequests();
在这段代码中，通过 await 依次执行两个网络请求，确保第二个请求依赖于第一个请求的结果。
实际应用场景案例分析
电商应用中的数据获取
在一个电商应用中，可能需要从服务器获取商品列表、用户信息等数据。假设我们有两个 API，一个用于获取商品列表 https://example.com/api/products，另一个用于获取当前用户信息 https://example.com/api/user。
async function loadData() {
try {
const [productsResponse, userResponse] = await Promise.all([
fetch('https://example.com/api/products'),
fetch('https://example.com/api/user')
]);
if (!productsResponse.ok) {
throw new Error('获取商品列表失败');
}
if (!userResponse.ok) {
throw new Error('获取用户信息失败');
}
const products = await productsResponse.json();
const user = await userResponse.json();
console.log('商品列表：', products);
console.log('用户信息：', user);
} catch (error) {
console.error(error.message);
}
}
loadData();
在上述代码中，使用 Promise.all 并发获取商品列表和用户信息，提高了数据加载效率。如果任何一个请求失败，都会捕获并处理错误。
社交应用中的动态加载
在社交应用中，当用户滚动页面加载更多动态时，可能需要依次请求不同页的数据。
async function loadMorePosts(page) {
let result = null;
const response1 = await fetch(`https://example.com/api/posts?page=${page}`);
if (!response1.ok) {
throw new Error('加载第' + page + '页动态失败');
}
result = await response1.json();
console.log('第' + page + '页动态：', result);
// 假设根据第一页的数据获取下一页的页码
const nextPage = result.nextPage;
if (nextPage) {
const response2 = await fetch(`https://example.com/api/posts?page=${nextPage}`);
if (!response2.ok) {
throw new Error('加载下一页动态失败');
}
const nextPageData = await response2.json();
console.log('下一页动态：', nextPageData);
}
}
loadMorePosts(1);
在上述代码中，首先加载第一页动态，然后根据第一页返回的数据决定是否加载下一页动态，通过 await 实现了顺序加载。
通过以上对 JavaScript 期约（Promise）在网络请求中的应用的详细介绍，我们了解了 Promise 的基础概念、在网络请求中的各种应用方式、错误处理策略以及与 async/await 的结合使用，并且通过实际案例分析看到了其在实际项目中的应用。在实际开发中，合理运用这些知识可以使我们的异步代码更加简洁、易读和可维护。