在前端开发中，与后端api进行交互是常见任务。fetch api是现代浏览器提供的强大网络请求工具，但其默认行为在错误处理方面可能不够直观。例如，fetch在接收到http 4xx或5xx状态码时并不会抛出错误，而是将其视为成功的响应，需要开发者手动检查response.ok属性。此外，网络故障、请求配置错误等情况则会直接导致promise被拒绝。为了提升代码的可读性、可维护性和健壮性，通常需要对fetch进行一层封装，统一处理各种成功与失败场景，并提供清晰的返回值或错误信息。
async/await语法是处理Promise的强大工具，它允许我们以同步的方式编写异步代码，极大地提高了代码的可读性。在封装fetch时，async/await能帮助我们更优雅地处理Promise链，避免回调地狱，并方便地使用try...catch结构捕获错误。
一个基本的fetch调用通常如下：
async function myFetch(url, options) {
// 假设这是对fetch的直接调用或一个更底层的封装
return fetch(url, options);
}我们的目标是创建一个callApi函数，它能封装myFetch的调用，并根据业务需求返回特定格式的数据或错误。
当API预期返回纯文本内容时，我们需要使用response.text()方法来获取响应体。值得注意的是，response.text()本身也返回一个Promise，因此需要await等待其解析。
我们将探讨两种主要的错误处理策略：
这种策略的优点是调用者总是会收到一个Promise的解决结果，无需在调用链中使用catch。但缺点是调用者必须检查返回对象中的ok或error字段来判断请求是否成功。
/**
* 封装API调用，处理文本响应。
* 总是解决Promise，通过返回对象中的属性指示成功或失败。
* @param {string} url - 请求URL
* @param {object} options - fetch请求选项
* @returns {Promise<object>} 包含ok, status, body/error信息的对象
*/
async function callApiForTextAlwaysResolve(url, options) {
let ok = false;
let status = null;
let body = null;
let error = null;
try {
const response = await myFetch(url, options); // 假设myFetch是fetch的直接封装
ok = response.ok;
status = response.status;
body = await response.text(); // 等待文本内容解析
if (!ok) {
// HTTP状态码非2xx，但fetch本身成功
error = `${status}: ${body}`;
}
} catch (e) {
// 网络错误、请求配置错误等导致fetch失败
error = e.message || "网络请求失败";
body = e; // 将原始错误对象也附带上
}
return { ok, status, body, error };
}
// 示例调用
async function fetchData() {
const result = await callApiForTextAlwaysResolve('/api/data', { method: 'GET' });
if (result.ok) {
console.log('数据获取成功:', result.body);
} else {
console.error('数据获取失败:', result.error);
// 可以根据result.status做进一步处理
}
}这种策略更符合Promise的惯用模式，即成功时解决，失败时拒绝。调用者可以使用try...catch或.catch()来捕获错误。
/**
* 封装API调用，处理文本响应。
* 成功时解决Promise并返回响应体，失败时拒绝Promise并抛出错误信息。
* @param {string} url - 请求URL
* @param {object} options - fetch请求选项
* @returns {Promise<string>} 成功时返回响应文本，失败时拒绝Promise
* @throws {string|Error} 失败时抛出错误信息
*/
async function callApiForTextRejectOnFailure(url, options) {
try {
const response = await myFetch(url, options);
const body = await response.text(); // 等待文本内容解析
if (!response.ok) {
// HTTP状态码非2xx，抛出错误
throw `${response.status}: ${body}`;
}
return body; // 成功时返回文本内容
} catch (e) {
// 网络错误、请求配置错误或上一步抛出的HTTP错误
// 如果是自定义的HTTP错误字符串，直接抛出；否则包装为Error对象
if (typeof e === 'string') {
throw e;
}
throw e.message || "网络请求失败";
}
}
// 示例调用
async function fetchDataWithReject() {
try {
const data = await callApiForTextRejectOnFailure('/api/data', { method: 'GET' });
console.log('数据获取成功:', data);
} catch (error) {
console.error('数据获取失败:', error);
// 根据错误类型做进一步处理
}
}当API预期返回JSON格式的数据时，我们需要使用response.json()方法。与response.text()类似，response.json()也返回一个Promise，需要await等待其解析。
此策略与文本响应的“始终解决”类似，但body字段将包含解析后的JSON对象。
/**
* 封装API调用，处理JSON响应。
* 总是解决Promise，通过返回对象中的属性指示成功或失败。
* @param {string} url - 请求URL
* @param {object} options - fetch请求选项
* @returns {Promise<object>} 包含ok, status, body/error信息的对象
*/
async function callApiForJsonAlwaysResolve(url, options) {
let ok = false;
let status = null;
let body = null; // 默认为null，成功时为JSON对象，失败时为错误信息或对象
let error = null;
try {
const response = await myFetch(url, options);
ok = response.ok;
status = response.status;
// 尝试解析JSON，即使非2xx响应也可能返回JSON格式的错误信息
try {
body = await response.json();
} catch (jsonParseError) {
// 如果响应不是有效的JSON，则尝试解析为文本
body = await response.text();
console.warn("JSON解析失败，尝试解析为文本:", body);
}
if (!ok) {
// HTTP状态码非2xx
error = {
message: `HTTP ${status} 错误`,
status: status,
details: body // 可能是JSON错误对象或文本
};
}
} catch (e) {
// 网络错误或请求配置错误
error = {
message: e.message || "网络请求失败",
details: e
};
body = null; // 确保body在网络错误时为null
}
return { ok, status, body, error };
}
// 示例调用
async function fetchJsonData() {
const result = await callApiForJsonAlwaysResolve('/api/json-data', { method: 'GET' });
if (result.ok) {
console.log('JSON数据获取成功:', result.body);
} else {
console.error('JSON数据获取失败:', result.error.message, result.error.details);
}
}此策略在失败时拒绝Promise，并抛出一个包含status、body和error信息的结构化错误对象，以便调用者能更细致地处理不同类型的错误。
/**
* 封装API调用，处理JSON响应。
* 成功时解决Promise并返回JSON对象，失败时拒绝Promise并抛出结构化错误对象。
* @param {string} url - 请求URL
* @param {object} options - fetch请求选项
* @returns {Promise<object>} 成功时返回JSON对象，失败时拒绝Promise
* @throws {object} 失败时抛出包含error, status, body的结构化错误对象
*/
async function callApiForJsonRejectOnFailure(url, options) {
let ok = false;
let status = null;
let body = null;
try {
const response = await myFetch(url, options);
ok = response.ok;
status = response.status;
// 尝试解析JSON
try {
body = await response.json();
} catch (jsonParseError) {
// 如果不是有效的JSON，仍将其作为body返回，但可能导致后续处理问题
// 或者可以抛出一个特定的解析错误
body = await response.text(); // 尝试获取文本内容
throw {
error: true,
status: status,
body: `JSON解析失败: ${body}` // 将非JSON内容作为错误信息
};
}
if (!ok) {
// HTTP状态码非2xx，抛出结构化错误
throw { error: true, status: status, body: body };
}
return body; // 成功时返回解析后的JSON对象
} catch (e) {
// 捕获网络错误、请求配置错误或上一步抛出的HTTP/JSON解析错误
if (e && typeof e === 'object' && e.error === true) {
// 已经是我们定义的结构化错误
throw e;
}
// 对于其他类型的错误（如网络错误），包装成统一的结构化错误
throw {
error: true,
status: null, // 网络错误没有HTTP状态码
body: e.message || "网络请求失败"
};
}
}
// 示例调用
async function fetchJsonDataWithReject() {
try {
const data = await callApiForJsonRejectOnFailure('/api/json-data', { method: 'GET' });
console.log('JSON数据获取成功:', data);
} catch (error) {
console.error('JSON数据获取失败。');
if (error.status) {
console.error(`HTTP状态码: ${error.status}`);
console.error('响应体:', error.body);
} else {
console.error('错误信息:', error.body); // 网络错误
}
}
}在上述封装中，我们处理了两种主要类型的错误：
在构建错误信息时，建议提供足够的信息，如HTTP状态码、服务器返回的错误体（无论是JSON对象还是文本），以及一个清晰的错误描述。对于需要拒绝Promise的策略，抛出结构化错误对象比抛出简单的字符串更有利于调用者进行精细的错误处理。
通过上述封装，我们可以构建一个既健壮又易于使用的fetch API调用模块，从而提高整个应用的网络请求可靠性。
以上就是使用async/await封装fetch实现全面的错误捕获与响应处理的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
430
收藏
