js请求封装ajax、统一响应
warning:
这篇文章距离上次修改已过187天,其中的内容可能已经有所变动。
以下是一个简单的JavaScript请求封装函数,使用fetch
进行HTTP请求,并对响应结果进行统一处理的示例代码:
function fetchJSON(url, options) {
// 默认的请求选项
const defaults = {
headers: {
'Content-Type': 'application/json',
},
};
// 合并默认选项和传入的选项
options = { ...defaults, ...options };
// 发起请求并处理响应
return fetch(url, options)
.then(response => {
// 确保响应成功
if (!response.ok) {
throw new Error(`HTTP错误! 状态码: ${response.status}`);
}
// 解析JSON响应
return response.json();
})
.catch(error => {
console.error('请求出错:', error);
// 这里可以根据需要返回一个错误处理的Promise或者抛出错误
// 例如返回一个Promise.reject
throw error;
});
}
// 使用示例
fetchJSON('https://api.example.com/data', {
method: 'POST',
body: JSON.stringify({ key: 'value' })
})
.then(data => console.log('请求成功:', data))
.catch(error => console.error('请求失败:', error.message));
这段代码定义了一个fetchJSON
函数,它接受一个URL和一个选项对象作为参数。它使用fetch
方法发起请求,并确保响应是成功的。如果响应不成功,它会抛出一个错误。如果响应成功,它会解析JSON响应。在使用时,你可以通过传递不同的HTTP方法和数据来定制请求。如果请求成功,它会通过then
链进一步处理数据;如果请求失败,它会通过catch
链处理错误。
评论已关闭