
葡萄牙语版本
axios 和 fetch 是在 javascript 中发出 http 请求的流行工具,但它们有一些关键的区别。总结如下:
阿克西奥斯
内置功能:axios 具有许多内置功能,例如自动 json 转换、请求和响应拦截器以及请求取消。浏览器兼容性:支持旧版浏览器,包括 internet explorer。错误处理:axios 自动拒绝 http 错误状态(例如 404 或 500)的 promise,使错误处理更容易。请求/响应拦截器:允许您以简单的方式全局修改请求或响应。请求取消:axios 提供了一种简单的方法来取消请求。
拿来
原生 api:fetch 是原生 web api,这意味着无需安装额外的库。promise-based:使用promise,但需要手动检查响应状态是否有错误。流处理:fetch 支持流,这对于处理大型响应非常有用。更多控制:提供对请求的更多控制,但需要更多额外代码来实现设置模式或拦截请求等功能。没有内置对 json 的支持:您需要在响应对象上调用 .json() 来解析 json 数据。
使用案例
如果您需要一组丰富的开箱即用功能,特别是对于复杂的应用程序,请使用 axios。使用 fetch 来实现更简单的用例或当您想避免外部依赖时。
使用示例
axios:
axios.get('/api/data') .then(response => console.log(response.data)) .catch(error => console.error(error));const options = { url: 'http://localhost/test.htm', method: 'post', headers: { 'accept': 'application/json', 'content-type': 'application/json;charset=utf-8' }, data: { a: 10, b: 20 }};axios(options) .then(response => { console.log(response.status); });
获取:
fetch('/api/data') .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));const url = "https://jsonplaceholder.typicode.com/todos";const options = { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json;charset=UTF-8", }, body: JSON.stringify({ a: 10, b: 20, }),};fetch(url, options) .then((response) => response.json()) .then((data) => { console.log(data); });
笔记:
为了发送数据,fetch() 使用 post 请求的 body 属性,而 axios 使用 data 属性。使用 json.stringify 方法将 fetch() 中的数据转换为字符串。axios 会自动转换服务器返回的数据,但使用 fetch() 时,需要调用 response.json() 方法将数据解析为 javascript 对象。使用 axios,可以在数据对象内访问服务器提供的数据响应,而在 fetch() 方法中,最终的数据可以用任意变量命名。
结论
两者都有各自的优点,选择通常取决于您的具体需求和偏好。如果您正在构建具有大量 api 交互的大型应用程序,axios 可以使某些任务变得更容易,而 fetch 非常适合简单的任务。
axios 提供了一个用户友好的 api,可以简化大多数 http 通信任务。但是,如果您更喜欢使用本机浏览器功能,您绝对可以使用 fetch api 自己实现类似的功能。
正如我们所探索的,使用浏览器中可用的 fetch() 方法复制 axios 的核心功能是完全可行的。包含客户端 http 库的决定最终取决于您对本机 api 的舒适度以及项目的具体要求。
更多信息:https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59
以上就是Axios 与 Fetch的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1491898.html
微信扫一扫
支付宝扫一扫