在 javascript 中，axios 和原生的 fetch api 都用于发出 http 请求，但它们在特性、易用性和功能方面存在一些差异。详细介绍如下：
1. 易于使用：
axios：
axios 简化了发出请求和处理响应。它自动解析 json 响应，使其更易于使用。
axios.get('/api/user') .then(response => console.log(response.data)) .catch(error => console.error(error));
获取：
使用 fetch 时，需要显式处理 json 解析，这增加了一个额外的步骤。
fetch('/api/user') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
2. 响应处理：
axios： 如果响应状态超出 2xx 范围，axios 会自动解析响应并抛出错误，因此您可以直接在 .catch() 块中处理错误。
获取：
对于 fetch，非 2xx 状态代码（如 404 或 500）不会被视为错误。您必须手动检查响应状态并在需要时抛出错误。
fetch('/api/user') .then(response => { if (!response.ok) throw new error('network response was not ok'); return response.json(); }) .then(data => console.log(data)) .catch(error => console.error(error));
3. 请求和响应拦截：
axios：
axios 提供内置拦截器，允许您全局修改请求或处理响应，这对于添加身份验证令牌、日志记录等非常有用
axios.interceptors.request.use(config => { config.headers['authorization'] = 'bearer token'; return config; });
获取：
fetch 没有内置拦截器，因此如果需要此行为，您需要手动将 fetch 调用包装在自定义函数中。
4. 浏览器兼容性：
axios： axios 适用于较旧的浏览器（ie 11 及更早版本）并在内部处理 polyfill。获取： internet explorer 不支持 fetch api。您可能需要像whatwg-fetch这样的polyfill来在旧版浏览器中支持它。
5. 数据处理：
axios：
axios 在发出 post 请求时自动对数据进行字符串化，并将 content-type 设置为 application/json。它还支持轻松发送 formdata 等其他格式的数据。
axios.post('/api/user', { name: 'john' });
获取：
在 fetch 中，您需要手动对数据进行字符串化并设置 post 请求的标头。
fetch('/api/user', { method: 'post', headers: { 'content-type': 'application/json' }, body: json.stringify({ name: 'john' }) });
6. 取消请求：
axios：
axios 内置支持使用 canceltoken 取消请求。
const source = axios.canceltoken.source(); axios.get('/api/user', { canceltoken: source.token }); source.cancel('request canceled.');
获取：
使用 fetch 时，您需要使用 abortcontroller 来取消请求，这可能会更复杂一些。
const controller = new AbortController(); fetch('/api/user', { signal: controller.signal }); controller.abort();
7. 错误处理：
axios： axios 对于非 2xx 响应自动抛出错误，错误处理更加一致和集中。获取： fetch 需要更多的手动错误处理，因为它只会拒绝网络错误的承诺，而不会拒绝 http 错误状态代码。
结论：
axios 功能更加丰富，易于使用，并为处理请求提供了更好的抽象。fetch 是一种现代的原生 api，需要较少的依赖项，但需要更多的手动工作来处理某些功能，如错误、拦截器和数据处理。
如果您希望更好地控制您的请求，您可能会坚持使用 fetch。如果您想要简化 http 请求的东西，axios 将是更好的选择。
魔乐社区
天翼云和华为联合打造的AI开发者社区，支持AI模型评测训练、全流程开发应用
102 查看详情
以上就是JavaScript 中 Axios 和 Fetch 的区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/451155.html
微信扫一扫 
支付宝扫一扫 
